[RESOLVED]Html5 video not playing.

Hi

I am trying to use html5 video in a mvc4 web-application.

For some reason, I only get a Black Square with a controlpanel underneith.

This is my view.

@model Telekoret.Models.Video

@{
    Layout = null;
}


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Video</title>
</head>
<body>
    <div>
        <video controls="controls" autoplay="autoplay" preload="auto">
            <source src="@Url.Content(@Model.WebM)" type="video/webm" />
            <source src="@Url.Content(@Model.Mp4)" type="video/mp4"/>
        </video>
    </div>

</body>

</html>

and this is my model.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;

namespace Telekoret.Models
{
    public class Video
    {
        public string FileName { get; set; }
        public string Mp4
        {
            get
            {
                return Path.Combine("~\data\video\", Path.GetFileNameWithoutExtension(FileName) + ".mp4");
            }
        }
        public string WebM
        {
            get
            {
                return Path.Combine("~\data\video\", Path.GetFileNameWithoutExtension(FileName) + ".webm");
            }
        }
    }
}

I have allready tried using a .htaccess file and to enable hardware accelerated video with no luck.

I have only been able to test in Chrome, since IIs Express 8 is to slow for IE.

Getting video to play in a cross-platform environment can often be tricky, as specific browsers only support certain file types (and you need to use plug-ins to supplement and fill the gaps). As a result you may have to convert your particular video
into multiple different formats so that when requested, the browser can choose the appropriate option for it to play.

Consider Video For Everyone

You may want to consider checking out Video For Everyone which explains setting up video so that it can be used in nearly every environment and browser (using HTML5 and a
Flash-fallback
). There is actually a generator available for this sample plugin available here which will generate the appropriate code that can be used across multiple browsers.

You can read more about this topic in this Microsoft article on Making your HTML5 Video play on Mobile Devices. If you are looking for some additional resources or alternatives (if the above
doesn’t suit your needs or you want to see what else is out there
) check out the list below :

Specific Issues

You mentioned that you are using Chrome, which should support both the .webm and .mp4 formats so that shouldn’t be an issue. However, you might want to try using the Developer Tools (F12) to check the console and ensure that your path is being rendered properly
and that there are not any errors loading these files. If this is the case, you might look at using Server.MapPath() when generating your paths.

You also have an extra ‘@’ within your code that you can take out, which could possibly cause an issue with your pathing :

<video controls="controls" autoplay="autoplay" preload="auto">
            <source src="@Url.Content(Model.WebM)" type="video/webm" />
            <source src="@Url.Content(Model.Mp4)" type="video/mp4"/>
        </video>

or you might be able to just try using the path directly :

<video controls="controls" autoplay="autoplay" preload="auto">
            <source src="@Model.WebM" type="video/webm" />
            <source src="@Model.Mp4" type="video/mp4"/>
</video>

Hi,

The path is likely wrong. The first step is to use "view source" and the network tab in the browser dev tools to check for 404 not found errors.

It seems you are rendering directly @"~datavideoyourfile.mp4" to the client side. ~is a server side notation that needs to be resolved first (implicitely in some cases, explicitely if not done for you)… See:

http://stackoverflow.com/questions/2418050/should-i-use-url-content-or-resolveurl-in-my-mvc-views

Hi

I have checked the view source and both the .mp4 and the .webm file gets a http 200, so the path must be correct.

Assuming that your paths are correct (as you mentioned), your code should be working as long as the <video> element is supported and the appropriate file types are also supported by your browser.

You can see an example here that is working.

Hi Rion

Now, I have tried using video.js and this time it at least shows the first frame. But the controlpanel is gone and the video is still not playing.

I get the following error in line 7124 in video.dev.js : Uncaught TypeError: Cannot read property ‘sources’ of undefined.

This is my updated view:

@model Telekoret.Models.Video

@{
    Layout = null;
}


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Video</title>
    <link href="~/Content/video-js.css" rel="stylesheet" />
    <script src="~/Scripts/video.js"></script>
    <script src="~/Scripts/video.dev.js"></script>
    <script>
        videojs.options.flash.swf = "~/Content/video-js.swf"
    </script>
</head>
<body>
    <div>
        <video controls autoplay preload="auto" id="videoplayer" class="video-js vjs-default-skin" data-setup='{}'>
            <source src="@Url.Content(Model.WebM)" type="video/webm" />
            <source src="@Url.Content(Model.Mp4)" type="video/mp4"/>
            <p class="vjs-no-js">For at se denne video skal du slå Javascript til i din browser og sikre dig at browseren kan afspille video i enten .mp4 eller .webm formatet. </p>
        </video>
    </div>

</body>

</html>

Try only using one of the video.js files, you probably can remove the video.dev.js one as it is likely intended for development purposes :

@model Telekoret.Models.Video
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Video</title>
    <link href="~/Content/video-js.css" rel="stylesheet" />
    <script src="~/Scripts/video.js"></script>
    <script>
        videojs.options.flash.swf = '@Url.Content("~/Content/video-js.swf")';
    </script>
</head>
<body>
    <div>
        <video controls autoplay preload="auto" id="videoplayer" class="video-js vjs-default-skin" data-setup='{}'>
            <source src="@Url.Content(Model.WebM)" type="video/webm" />
            <source src="@Url.Content(Model.Mp4)" type="video/mp4"/>
            <p class="vjs-no-js">For at se denne video skal du slå Javascript til i din browser og sikre dig at browseren kan afspille video i enten .mp4 eller .webm formatet. </p>
        </video>
    </div>
</body>
</html>

Oups sorry. I missed you already used Url.Content…

Which browser? You are 100% sure this is an HTML standard document. Have you tried with only one of the format or to directly download the video and play it locally to see what happens?

Hi Rion

If I remove the link to video.dev.js I get another error:

VIDEOJS: Error: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The video could not be loaded, either because the server or Network failed or because the format is not supported.

I get the same error using both .mp4 and .webm one at the time.

If I open the .mp4 file directly in Chrome, it only plays the sound, so .mp4 is not supported by Chrome, but if I do the same thing with the .webm file it shows the video correctly, som .webm is supported by Chrome.

Hi PatriceSc

It’s a MVC view, which is being translated to a html5 website in runtime.

For the rest of your questions, check my answert to Rion.

I changed your model to use http://techslides.com/demos/sample-videos/small.webm and it works fine here. What if you try with this particular url?

The generated markup is :

     <video controls="controls" autoplay="autoplay" preload="auto">
            <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm" />
            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
     </video>

Though using a player is good idea, you may run into the same unknown issue so I started from your original post. You really didn’t saw anything special when using "view source"? What if you try with this same external file? Do you see the same HTML marlup?
Does it play the video?

If I use your links, the video Works, also without the video.js player.

Could there be a limit to the size of the video-files, and if so, can I change it in the config file?

As far as I know there is an upload limit but I don’t remember about a download limit. Also my understanding is that you are able to download your video from the *same * (?)web site and play it locally? And you tried the http dev tools in the browser and
it reports 200 OK?

The only thing I could think off for now would be the mime type not being registered for webm but then you would have a 404 Not found….

Ah, what if you get this file and place it on your server? Does it work? If yes it dépends on the file (size and/or format). If not, it is some kind of server configuration issue.

I’m running the webapplication on localhost and the videofiles is located on my pc.

Do I need to configure my iis? I’m using ISS Express 8.

Has anyone come up with a solution?

The problem is that for now we don’t know exactly what happens.

So if you download the video files I mentioned earlier for testing on your own machine, does it work ? It would allow to find out if it is a file problem or a site problem.

The strange thing is that my understanding is that you do have an HTTP 200 (and have you checked if the content is correct or if maybe the content is actually some HTML page ?). You are 100% sure the video Stream is downloaded correctly? You see nothing
special on the IIS side in the IIS log or whatever…

My first thought was a mime type issue (file types with no registered mime types are not served but then you should have a 404 error for example). I’ll try to give a quick try to what happens if I get the test video files I talked earlier on my machine and
give this a try.

So for now my understanding is that all happens as if there is no problem at all (the url is not wrong, the http request status is 200, the content is correct (I believe you can "save as" the content in most browser tool and then see if it seems the same
than the file you uploaded).

It’s much harder to diagnose an issue when we can’t even spot some error message or bad behavior that shouldn’t happen.

Really can’t see what happens on your side. I gave this a try with

<video controls="controls" autoplay="autoplay" preload="auto">
        <source src="/small.webm" type="video/webm" />
</video>

I downloaded the sample file I used earlier to the root of a test MVC site and running this in Chrome from VS (and it just works.. Could it be some kind of firewall/proxy/antivrus/whatever issue? Or does it work on your side?

I gave this a try and it works. I downloaded the webm sample file I used earlier, placed it at the root of an MVC test site and ran this test site from VS using Chrome :

<video controls="controls" autoplay="autoplay" preload="auto">
        <source src="/small.webm" type="video/webm" />
</video>

Hopefully it should work on your side? If yes, move from there one step at a time to see what starts to make this fail. If it still doesn’t work some kind of external condition such as an antivirus software or whatever? Good luck, seems a tough one…

Hi PatriceSc

It cannot be a download problem, since the file is allready on my computer as a part of the project.

My Iss logs does not show any errors.

However, in the developer tools->Network, the line with the loading of the videofiles returns status=200 but it is also colored red, and when i click them and try to see the responsedata, it says "Failed to load responsedata".

If it couldn’t load the responsedata, why is the status=200?

I made a change in the model and view, so the view now gets the full path to the file. The result is the following html:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Video</title>
    
</head>
<body>
    <div>
        <video controls autoplay preload="auto" id="videoplayer">
            
            <source src="c:userselsedocumentsvisual studio 2013ProjectsTelekoretTelekoretdatavideoStilleHjerte.webm" type="video/webm" />
            <source src="c:userselsedocumentsvisual studio 2013ProjectsTelekoretTelekoretdatavideoStilleHjerte.mp4" type="video/mp4" />

            <p>For at se denne video skal du slå Javascript til i din browser og sikre dig at browseren kan afspille video i enten .mp4 eller .webm formatet. </p>
        </video>
    </div>
   

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"8e3a9ae1f8d148c4b6483b9abfa9eeaa"}
</script>
<script type="text/javascript" src="http://localhost:62270/8abd778028a34c99b7c91522eec816af/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>

</html>

The strange thing is that, if I try to debug it in Visual Studio using Chrome, it does not show the video, but if I copy the source from Chrome to notepad, save it as a .html file and opens that one in chrome, it Works.

Ahhhh !! Don’t test with local file names. Do use an http link instead.

I’m not sure it applies to localhost but as a safety measure a web site doesn’t have access to local content by default so if you are showing this page through localhost I would quite expect this to fail (and I’m sure it would fail for a real web site anyway).
It would explain also that if you copy the source to a local file then it works (as now this is a *local* HTML page that uses a *local* resource so it is allowed).

As it was one of the first issue, I thought it was fixed. Could it be just that? In a way it would be best as it would explain it all…

So try again with something such as src="/data/video/StilleHjerte.webm"  (I assume data is right Under your web application root). Does it work?

Hi PatriceSc

Using src="/data/video/StilleHjerte.webm"  did not help, and it still fails to load response data.

Is it posible to see, if a safety measure is the problem?

Besides, I dont follow you: You say that a local html page are allowed to use local resources, but isn’t localhost regarded as a local html page?

So and when using
https://developer.chrome.com/devtools/docs/network
 what do you see for the http request? My understanding is that you saw 200 OK rather than for example 404 Not found…

For example I see :

If you have 200 OK (that is all is supposed to be fine) I really don’t get what happens on your side while it works just fine on mine. You could also try to test with the SAME test file than the one I used to elimate all différences.

That is correct.

The two video sources shows statuscode 200.

However, I have now noticed, that there is a browserlink, which gives me a http 404.0 Not Found.

Could that be causing the problem?

Don’t know but worth a try. See http://www.asp.net/visual-studio/overview/2013/using-browser-link#disabling to disable this…

Else it seems really some kind of configuration related issue (you tried with the same file than me, if you can try an another PC possiblty with a different configuration home/work/friend etc…). Good luck.

Disabling browserlink did the trick.Laughing

The video is running just fine.

Thanks for your help.

Leave a Reply