Umbraco V7xx Inserting HTML5 Video to webpage

0
votes

So I have created a document type in umbraco with corresponding template for my video section, which I want it to be content manageable and don't want to embed from youtube or similar. I have changed the upload limit for umbraco in webconfig and uploaded the vid in media section, using media picker. The problem I have now is how to fetch it from that media and display it on my home page. I have this code in my partial view, which is for that section but it's not display anything to the page and not showing any errors on the console:

Edit: I tried a new way, it's giving me this error: Object reference not set to an instance of an object. (as soon as I remove ".Url" the page works but it doesn't load the path to the video in media! :(

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

<!--===================================Setion 2 SO Wifi & Customer Reviews=========================================-->
<section>
    <div class="row">
        <div class="col-sm-6 wifi">
            <h2 class="so-wifi">
                @Umbraco.Field("sowifiTitle", convertLineBreaks: true)
            </h2>
            <img src="/src/img/so wifi.png" class="img-fluid wifi-img" alt="so wifi">
        </div>
        <div class="col-sm-6">
            <div class="video embed-responsive embed-responsive-16by9">
             @{
                var videoId = Model.Content.GetPropertyValue<int>("sowifiVideo");
                var videoUrl = Umbraco.Media(videoId).Url;

                <video autoplay controls width="850" height="450">
                    <source src="@videoUrl" type="video/mp4" />
                </video>
                } 
            </div>
        </div>
    </div>
</section>
2
asp.net-mvc-4html5-videoumbracoumbraco7

2 Answers

0
votes

What have you tried to do yourself to fix? Could you check what HTML code is being generated? Have you tried debugging your way through? Are you getting a proper mediaFolderId? Are you actually picking a media folder on your content? What type of object are you then getting in the .Children() collection?

You aren't using your "video" variable in the loop, you are requesting a property of the current page instead. If you're lucky you might be able to do something like

src="@video.Url"

instead of the whole Model.Content thing, but it's very unclear from your question whether it might actually work :-/

EDIT: you should be able to do something like this to get a single Media URL:

var videoId = Model.Content.GetPropertyValue<int>("sowifiVideo");
var videoUrl = Umbraco.Media(videoId).Url;

and then

<source src="@videoUrl" type="video/mp4" />

When you do images and use GetCropUrl(...) then, funnily enough, that function gets the URL for you. With any other kind of media file you have to do it yourself.

0
votes

Finally solved, going to post the code that works here just in case someone else has a similar problem in the future.(thx for the help Jannik once again to forward me in the right direction)

            @{
                var videoId = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("sowifiVideo");
                foreach (var item in videoId)
                {
                    <video controls width="850" height="450">
                        <source src="@item.Url" type="video/mp4" />
                    </video>
                }
             }