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 6182 posts 24284 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.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies