-
Details
Use the following code to add a video to your webpage
You can use this video converter to change format of video files. http://www.mirovideoconverter.com
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<video controls poster="/teach/someStaticImage.jpg">
<source src="/teach/movie4.ogv" type="video/ogg">
<source src="/teach/movie4.mp4" type="video/mp4">
<p>Your browser does not play HTML5 videos.<a href="/teach/movie4.ogv">Download it</a> instead.</p>
</video>
</body>
</html>
]]>
Play a video with play/mute at the bottom
<![CDATA[
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>video</title>
<style>
body {
margin:0;
padding:50px;
background:#444;
}
/* Video */
.video video {
display:block;
}
</style>
<script>
function init() {
if( !document.createElement('video').canPlayType ) return;
// 1. Get all video containers on the page
var videos = document.querySelectorAll( 'div.video' ),
videosLength = videos.length;
// 2. Get every single video instance
for( var i=0; i < videosLength; i++ ) {
var root = videos[i];
// 3. Get and create all needed elements
video = root.querySelector( 'video' ),
play = document.createElement( 'button' ),
mute = document.createElement( 'button' );
// 4. Turn off native video controls
video.controls = false;
// 5. Customise Play button behaviour
play.innerText = play.title = 'Play';
play.onclick = function() {
if( video.paused ) {
video.play();
play.innerText = play.title = 'Pause';
} else {
video.pause();
play.innerText = play.title = 'Play';
}
}
// 6. Customise Mute button behaviour
mute.innerText = mute.title = 'Mute';
mute.onclick = function() {
if( video.muted ) {
video.muted = false;
mute.innerText = mute.title = 'Mute';
} else {
video.muted = true;
mute.innerText = mute.title = 'Unmute';
}
}
// 7. Add custom controls to the video container
root.appendChild( play );
root.appendChild( mute );
}
}
// 8. Initialise function on page load
window.onload = init;
</script>
</head>
<body>
<div class="video">
<video controls poster="/teach/m/video.jpg" width="854" height="480">
<source src="/teach/m/video.ogv" type="video/ogg">
<source src="/teach/m/video.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" data="/teach/m/player.swf" width="854" height="504">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="file=video.mp4">
<!--[if IE]><!--><param name="movie" value="/teach/m/player.swf"><!--<![endif]-->
<img src="/teach/m/video.jpg" width="854" height="480" alt="Video">
<p>Your browser can't play HTML5 video. <a href="/teach/m/video.ogv">Download it</a> instead.</p>
</object>
</video>
</div>
</body>
</html>
]]>
Refer to this webpage for a more advanced version.
http://www.netmagazine.com/files/tutorials/demos/2011/04/add-html5-video-to-your-site/demo/2.htm