HTML5 Video Tag Not Playing
Question
I'm trying to utilize the HTML5 video tag to autoplay a mov or mp4 video when the page is loaded. However, the video isn't playing when the page loads. Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Bropocalypse</title>
<style>
body {background:#000000;
margin:100px;}
p {font-size:36px;
text-align:right;
margin:20px 0px;}
a:link, a:hover, a:visited {color:#FF0000;
text-decoration:none;}
.trailer {width:700px;
height:100%;
margin:0 auto;}
</style>
</head>
<body>
<div class="trailer">
<video width="700" height="400" src="trailer.mp4" poster="trailer.mp4" controls="controls" autoplay="autoplay" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
<p>If you are reading this, it is because your browser does not support the HTML5 video element.</p>
</video>
<p><a href="about.php"><img src="images/skip.png" alt="SKIP >>" /></a></p>
</div>
</body>
</html>
The page can be found here: http://www.tcnj.edu/~moore56/game-design/bropocalypse/ . Please let me know of any suggestions or questions you might have. Thank you.
2 answers
solution1
1 2012-06-04 18:44:58
First of all, try using HTML5 doctype for HTML5 stuff, not XHTML 1.0 doctype.
I tested your code and it didn't work for me, however, when I replaced the video with a test .m4v video (from here ) it worked immediately on my Chrome browser, so the problem doesn't seem to be with the HTML code.
Note also that you are serving your video file with text/plain content type, which can't be right.
solution2
0 2013-01-30 20:47:08
yeah, as eis said If you rename a video format manually it runs well on your machine, but the codecs won't match which leads to video not being played in the browser. Moreover you should put a backplay format and a object tag to embed the video in your browser...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.