Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: html5-video-javascript

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: html5-video-javascript
Showing posts with label html5-video-javascript. Show all posts
Showing posts with label html5-video-javascript. Show all posts

JAVA SCRIPT - Controlling Video from JavaScript with the video Element

Controlling Video from JavaScript with the video Element


Problem

You want to embed video in your web page, without using Flash. You also want a con‐ sistent look for the video control, regardless of browser and operating system.


Solution

Use the HTML5 video element: 

<video id="meadow" poster="purples.jpg" >
 <source src="meadow.m4v" type="video/mp4"/>
 <source src="meadow.ogv" type="video/ogg" />
</video>


You can provide controls for it via JavaScript, as shown in Example 9-5. Buttons are used to provide the video control, and text in a div element is used to provide feedback on time during the playback.

Providing a custom control for the HTML5 video element :


<!DOCTYPE html>
<head>
<title>Meadow Video</title>
<script>
<style>
 video {
 border: 1px solid black;
 }
</style>
window.onload=function() {
 // events for buttons
 document.getElementById("start").addEventListener("click",startPlayback);
 document.getElementById("stop").addEventListener("click",stopPlayback);
 document.getElementById("pause").addEventListener("click",pausePlayback);
 // setup for video playback
 var meadow = document.getElementById("meadow");
 meadow.addEventListener("timeupdate",reportProgress);
 // video fallback
 var detect = document.createElement("video");
 if (!detect.canPlayType) {
 document.getElementById("controls").style.display="none";
 }
}
// start video, enable stop and pause
// disable play
function startPlayback() {
 var meadow = document.getElementById("meadow");
 meadow.play();
 document.getElementById("pause").disabled=false;
 document.getElementById("stop").disabled=false;
 this.disabled=true;
}
// pause video, enable start, disable stop
// disable pause
function pausePlayback() {
 document.getElementById("meadow").pause();
 this.disabled=true;
 document.getElementById("start").disabled=false;
 document.getElementById("stop").disabled=true;
}
// stop video, return to zero time
// enable play, disable pause and stop
function stopPlayback() {
 var meadow = document.getElementById("meadow");
meadow.pause();
 meadow.currentTime=0;
 document.getElementById("start").disabled=false;
 document.getElementById("pause").disabled=true;
 this.disabled=true;
}
// for every time divisible by 5, output feedback
function reportProgress() {
 var time = Math.round(this.currentTime);
 var div = document.getElementById("feedback");
 div.innerHTML = time + " seconds";
}
</script>
</head>
<body>
<video id="meadow" poster="purples.jpg" >
 <source src="meadow.m4v" type="video/mp4"/>
 <source src="meadow.ogv" type="video/ogg" />
</video>
<div id="feedback"></div>
<div id="controls">
<button id="start">Play</button>
<button id="stop">Stop</button>
<button id="pause">Pause</button>
</controls>
</body>


EXPLAIN

The new HTML5 video element, as with the HTML5 audio element, can be controlled with its own built-in controls, or you can provide your own. The media elements support the following methods: 

• play: Starts playing the video 

• pause: Pauses the video 

• load: Preloads the video without starting play 

• canPlayType: Tests if the user agent supports the video type The media elements don’t support a stop method, so the code emulates one by pausing video play and then setting the video’s currentTime attribute to 0, 

which basically resets the play start time. I also used currentTime to print out the video time, using Math.round to round the time to the nearest second.

The video control is providing two different video codecs: H.264 (.mp4), and Ogg Theora (.ogv). Firefox, Opera, and Chrome support Ogg Theora, but Safari and IE only support the H.264-formatted video. 

However, by providing both types, the video works in all of the browsers that support the video element. The video and audio controls are inherently keyboard-accessible. 

If you do replace the controls, you’ll want to provide accessibility information with your replacements. The video control doesn’t have built-in captioning, but work is underway to provide the API for captioning.