|
<!-- |
|
Before opening this file in a web-browser, do the following. |
|
In the same directory as this file, create a new directory/folder called media. |
|
In the "media" folder, put some video that you want to use in the demo as ubuntu.webm and ubuntu.mp4 |
|
Also place a tux.jpg image in the "media" folder to see examples of the poster-image section |
|
--> |
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Video Tags in HTML 5</title> |
|
<style type="text/css"> |
|
body { |
|
text-align:center; |
|
} |
|
h3 { |
|
font-family: "ubuntu", sans-serif; |
|
font-weight: bold; |
|
font-size: 25px; |
|
color: #772953; |
|
|
|
} |
|
p { |
|
font-style: italic; |
|
} |
|
</style> |
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> |
|
</head> |
|
<body> |
|
<h3>Basic Video Tag Demo</h3> |
|
<video src="media/ubuntu.webm" controls></video> |
|
|
|
<h3>Adjusting Size of the Video Demo</h3> |
|
<video src="media/ubuntu.webm" controls height="800" width="600"></video> |
|
|
|
<h3>Autoplay Demo</h3> |
|
<video controls autoplay> |
|
<source src="media/ubuntu.mp4" type="video/mp4" /> |
|
<source src="media/ubuntu.webm" type="video/webm" /> |
|
<p>Gaaaah!!!!! Update your browser!!!! </p> |
|
</video> |
|
|
|
<h3>Loop Demo</h3> |
|
<video controls loop> |
|
<source src="media/ubuntu.mp4" type="video/mp4" /> |
|
<source src="media/ubuntu.webm" type="video/webm" /> |
|
<p>Gaaaah!!!!! Update your browser!!!! </p> |
|
</video> |
|
|
|
<h3>Background video (Autoplay+Loop-Controls) Demo</h3> |
|
<video autoplay loop> |
|
<source src="media/ubuntu.mp4" type="video/mp4" /> |
|
<source src="media/ubuntu.webm" type="video/webm" /> |
|
<p>Gaaaah!!!!! Update your browser!!!! </p> |
|
</video> |
|
|
|
<h3>Repeat w/jQuery Demo</h3> |
|
<video id="needsrepeat" controls autoplay> |
|
<source src="media/ubuntu.mp4" type="video/mp4" /> |
|
<source src="media/ubuntu.webm" type="video/webm" /> |
|
<p>Gaaaah!!!!! Update your browser!!!! </p> |
|
</video> |
|
<script> |
|
$("#needsrepeat").bind("ended",function(){ |
|
this.play(); |
|
}); |
|
</script> |
|
|
|
<h3>Poster-Images Demo</h3> |
|
<video controls poster="media/tux.jpg"> |
|
<source src="media/ubuntu.mp4" type="video/mp4" /> |
|
<source src="media/ubuntu.webm" type="video/webm" /> |
|
<p>Gaaaah!!!!! Update your browser!!!! </p> |
|
</video> |
|
|
|
<h3>Multiple Sources Demo</h3> |
|
<video controls poster="media/tux.jpg"> |
|
<source src="media/ubuntu.mp4" type="video/mp4" /> |
|
<source src="media/ubuntu.webm" type="video/webm" /> |
|
<p>Gaaaah!!!!! Update your browser!!!! </p> |
|
</video> |
|
|
|
<h3>Flash Player Fallback Demo</h3> |
|
<video controls poster="media/tux.jpg"> |
|
<source src="media/ubuntu.mp4" type="video/mp4" /> |
|
<source src="media/ubuntu.webm" type="video/webm" /> |
|
<!-- Code from http://osmf.org/configurator/fmp/ --> |
|
<object width="600" height="409"> <param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param><param name="flashvars" value="src=http%3A%2F%2Fwww.whatever.com%2Fmedia%2Fubuntu.mp4&poster=http%3A%2F%2Fwww.whatever.com%2Fmedia%2Ftux.jpg"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="409" flashvars="src=http%3A%2F%2Fwww.whatever.com%2Fmedia%2Fubuntu.mp4&poster=http%3A%2F%2Fwww.whatever.com%2Fmedia%2Ftux.jpg"></embed></object> |
|
<p>Gaaaah!!!!! Update your browser!!!! You have neither HTML 5 nor Flash support! </p> |
|
</video> |
|
|
|
</body> |
|
</html> |
|
|
