Question

I am trying to accomplish a very simple task; at least I would think it should be but its not.

I am trying to embed video into HTML and nothing I try seems to works. Here is the code I am using to do it:

<video width="560" height="340" controls>
    <source src="video/30.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>  
    <source src="video/30.ogv" type='video/ogg; codecs="theora, vorbis"'>

    <object width="640" height="384" type="application/x-shockwave-flash"   data="video/player_flv_maxi.swf?image=placeholder.jpg&file=video/30.swf">
    <param name="movie" value="video/player_flv_maxi.swf?image=placeholder.jpg&file=video/30.swf" />
    </object>
</video>

I am using this resource to try and accomplish this: http://www.webmonkey.com/2010/05/embed-videos-in-your-web-pages-using-html5/

I also have tried: http://www.w3schools.com/html/html5_video.asp

And none of those seem to work. Can someone please tell me why none of the video formats I have listed above play in Google Chrome? Is there something wrong with the code?

Was it helpful?

Solution

I figured out what my problem was. It has to do with including the MIME Type to your IIS. I found this webpage that got me up and running in know time:

http://blog.arvixe.com/to-play-mp4-video-in-asp-net-you-may-need-to-add-a-mime-type/

Make sure if you are running Mircosoft IIS that you have the MIME Type added to IIS so IIS knows what to do when someone tries to load a mp4 video type. Thanks all for the help!

OTHER TIPS

Your HTML is fine and is likely not the problem. I put together a test JS Bin and changed the video URLs (except for the Flash fallback), and it works just fine for me in Chrome and Firefox.

http://jsbin.com/musod/1/edit

Without having your actual site to test, I can suggest a few possibilities:

  1. The video files are not in the right place on the server, so you're getting 404 or 503 errors on them.

  2. The video files are not encoded correctly in a way the browser can play them. This may be the case if the wrong codec was used or if the bit rate is way too high (not super likely).

  3. The HTML got mangled somehow, like if you pasted into a hosting platform like wordpress or something that is expecting plain text with minimal formatting HTML.

Here are some steps you can take to diagnose the problem. Feel free to report the results in the comments here if you need further direction.

  1. Check the browser console for error messages.

  2. Paste the full URL of the video file(s) right into the browser. This should show you if there's a 404, 503 or some other error that's causing the files not to load.

  3. Check the "Network" panel in developer tools to make sure you have the correct URL and see if it's loading the file.

  4. Drag the video file right into the browser and see if it plays. This will show you if there is a problem with the encoding. The browser should be able to play the video on its own, without any extra HTML.

  5. View the HTML source of the webpage to confirm that the server is delivering the HTML just as you wrote it. For example, make sure it hasn't converted your "angle brackets" to html entities or changed the quotes to "smart quotes".

HTML5 video still requires a lot of work, you should try using a player plugin, I've always used jPlayer. http://jplayer.org

I faced the same issue with the following code:

<!DOCTYPE html>
<html>
<body>

<video width="960" height="720" controls>
  <source src="sample.mp4" type="sample/mp4">
  Your browser does not support the video tag.
</video>

</body>
</html>

Neither Chrome, Explorer or Opera would work.

This modification did work for me:

<!DOCTYPE html>
<html>
<body>

<video width="960" height="720" controls src="sample.mp4" type="sample/mp4"/>
  Your browser does not support the video tag.
</video>

</body>
</html>

in my case, there was a case when my video was stored on a separate server and there was no https protocol. Therefore, the solution was very simple, check if the ssl protocol is installed on the cdn where I have the video

I found a solution on my problem. If you play a normal video on live server, it wouldn't work. Try playing it on the file itself.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top