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

Web Development and Design | Tutorial for Java, PHP, HTML, Javascript: javascript-video
Showing posts with label javascript-video. Show all posts
Showing posts with label javascript-video. 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.


JAVA SCRIPT - Running a Routine When an Audio File Begins Playing

Running a Routine When an Audio File Begins Playing 


Problem

You want to provide an audio file and then pop up a question or other information when the audio file begins or ends playing.


Solution

Use the HTML5 audio element: 


<audio id="meadow" controls>
 <source src="meadow.mp3" type="audio/mpeg3"/>
 <source src="meadow.ogg" type="audio/ogg" />
 <source src="meadow.wav" type="audio/wav" />
 <p><a href="meadow.wav">Meadow sounds</a></p>
</audio>

and capture either its play event (playback has begun) or ended event (playback has finished):

var meadow = document.getElementById("meadow");
meadow.addEventListener("ended", aboutAudio);



then display the information:


function aboutAudio() {
 var info = 'This audio file is a recording from Shaw Nature Reserve';
 var txt = document.createTextNode(info);
 var div = document.createElement("div");
 div.appendChild(txt);
 document.body.appendChild(div);
}


EXPLAIN

HTML5 added two media elements: audio and video. These simple-to-use controls provide a way to play audio and video files without having to use Flash. In the solution, the audio element’s controls Boolean attribute is set, so the controls are displayed. 

The element has three source children elements, providing support for three different types of audio files: WAV, MP3, and Ogg Vorbis. 

The use of the source element allows different browsers to find the format (codec) that they support. For the example, the browser support is: 

• Firefox accepts either the WAV or Ogg Vorbis. It also accepts MP3, but uses the underlying operating system support to do so, rather than providing its own. 

• Opera supports WAV and Ogg Vorbis, but not MP3. 

• Chrome supports WAV, MP3, and Ogg Vorbis. 

• Safari supports MP3 and WAV. 

• IE supports the MP3.

A link to the WAV file is provided as a fallback, which means people using browsers that don’t support audio can still access the sound file. I could have also provided an object element, or other fallback content.

The media elements come with a set of methods to control the playback, as well as events that can be triggered when the event occurs. In the solution, the ended event is captured and assigned the event handler aboutAudio(), which displays a message about the file after the playback is finished. 

Notice that though the code is using a DOM Level 0 event handler with the window load event, it’s using DOM Level 2 event handling with the audio element. Browser support is erratic with this event handler, so I strongly recom‐ mend you use addEventListener(). However, onended does seem to work without problems when used directly in the element:


<audio id="meadow" src="meadow.wav" controls onended="alert('All done')">
 <p><a href="meadow.wav">Meadow sounds</a></p>
</audio>

It’s interesting to see the appearance of the elements in all of the browsers that currently support them. There is no standard look, so each browser provides its own interpreta‐ tion.

You can control the appearance by providing your own playback controls and using your own elements/CSS/SVG/Canvas to supply the decoration.