Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Thomas Won Nyheim 33 posts 145 karma points
    Nov 27, 2017 @ 12:00
    Thomas Won Nyheim
    0

    Looping through source tags for HTML5 video tag

    Just trying to run a simple test code like this:

               <video id="test" width="200" height="150">
                    @for (var i = 1; i < 5; i++)
                    {
                        <source src="x.webm">
                    }
                </video>
    

    Gives me the following result:

               <video id="test" width="200" height="150">
                        <source src="x.webm">
                        <source src="x.webm">
                        <source src="x.webm">
                        <source src="x.webm">
                </source></source></source></source></video>
    

    I can't figure out what or where closes my source tags. I need to get rid of the closing tags due to code validation. Does Umbraco manipulate these tags in any way?

  • Alex Skrypnyk 6163 posts 24143 karma points MVP 8x admin c-trib
    Nov 27, 2017 @ 13:17
    Alex Skrypnyk
    0

    Hi Thomas

    Everything is fine with your code, can you show all your view?

  • Thomas Won Nyheim 33 posts 145 karma points
    Nov 27, 2017 @ 13:35
    Thomas Won Nyheim
    0

    I tried excluding some code; which fixed the issue where the /source for each source was added.

    <section class="article-list">
        <h2 class="screen-reader-only">Artikler</h2>
        @Html.Partial("_ArticleList")
    </section>
    

    This is the code for the view:

    @using Project.Web.classes
    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
        var newsPool = Model.Content.AncestorOrSelf(1).Url + "aktuelt";
        var currentSite = Model.Content.AncestorOrSelf(1).Name;
        var articleList = Umbraco.TypedContentAtRoot().First().Descendants()
                    .OrderByDescending(x => x.GetPropertyValue("artikkelDato")).Where(x =>
                    x.DocumentTypeAlias == "newsArticle" &&
                    x.GetPropertyValue<IEnumerable<string>>("publiserTil").Contains(currentSite) &&
                    x.GetPropertyValue<bool>("synligPaaHovedsiden") == true)
                    .Take(6);
    }
    <div class="article-inner row">
        @{ 
            var i = 0;
            foreach (var item in articleList)
            {
                var img = item.GetPropertyValue<IPublishedContent>("artikkelBilde");
                var imgLarge = img.GetResponsiveImageUrl(450, 270) + "&mode=crop";
                var imgMobile = img.GetResponsiveImageUrl(296, 185) + "&mode=crop";
                var articleThumb = imgLarge;
                if (Helper.IsMobileDetect())
                {
                    articleThumb = imgMobile;
                }
                var excerpt = item.GetPropertyValue<IPublishedContent>("artikkelInnhold");
                i++;
                if(i == 4)
                {
                    @Html.Partial("_Ads", new ViewDataDictionary { { "adSize", "small" } })
                }
            <article class="news-card col-lg-4 col-sm-4 col-xs-12">
                <div class="img-container">
                    <a href="@string.Format(@"{0}/{1}", newsPool, item.UrlName)" title="@item.Name - Les mer">
                        <img src="@articleThumb" alt="@img.Name" class="img-responsive" />
                        <div class="img-overlay"></div>
                    </a>
                </div>
                <div class="text-container">
                    <h3>@item.GetPropertyValue("artikkelTittel")</h3>
                    <p>@Helper.Truncate(item.GetPropertyValue<string>("artikkelLead"), 125)</p>
                    <a href="@string.Format(@"{0}/{1}", newsPool, item.UrlName)" title="@item.Name - Les mer" class="read-more">Les mer</a>
                </div>
            </article>
            }
        }
    </div>
    

    So stripped the view down to this:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
        Layout = "Master.cshtml";
    }
    @if (Model.Content.HasValue("frontPageCoverMedia"))
    {
        var coverMedia = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("frontPageCoverMedia");
    
        <video id="frontCoverVideo" width="1920" height="450" autoplay loop muted controls>
            @foreach (var mediaItem in coverMedia)
            {
                var mediaType = "";
                var mediaUrl = mediaItem.Url.ToString();
                switch (mediaItem.GetPropertyValue<string>("umbracoExtension"))
                {
                    case "mp4":
                        mediaType = "video/mp4";
                        break;
                    case "webm":
                        mediaType = "video/webm";
                        break;
                }
                <source src="@mediaUrl" type="@mediaType">
            }
        </video>
    }
    
    <section class="article-list">
        <h2 class="screen-reader-only">Artikler</h2>
        @Html.Partial("_ArticleList")
    </section>
    

    This code still generates the error.

  • Thomas Won Nyheim 33 posts 145 karma points
    Nov 28, 2017 @ 07:51
    Thomas Won Nyheim
    0

    Did some more digging at it seems it all leads to these lines of code

    var imgLarge = img.GetResponsiveImageUrl(450, 270) + "&mode=crop";
    var imgMobile = img.GetResponsiveImageUrl(296, 185) + "&mode=crop";
    

    As soon as I use the native GetCropUrl instead of the Slimsy one the closed source tags dissapear.

    Further than that, I have no idea as to why this is happening.

Please Sign in or register to post replies

Write your reply to:

Draft