CS 50.12 HTML 5 :: Interactive Web Pages

Browser support for audio formats

We will be using ACC (m4a) and Ogg/Vorbis (oga) formats

browser support for audio

 

 

Add code to play audio

<audio controls>
<source src="audio-files/sky.m4a" type="audio/mp4" />
<source src="audio-files/sky.oga" type="audio/ogg" />
<p>Your browser does not support HTML5 video.</p>
</audio>


Audio Sample 1

Add attributes such as autoplay

<audio controls autoplay>
<source src="audio-files/sky.m4a" type="audio/mp4" />
<source src="audio-files/sky.oga" type="audio/ogg" />
<p>Your browser does not support HTML5 video.</p>
</audio>


Audio Sample 2


or attributes such as autoplay and loop

<audio controls autoplay loop>
<source src="audio-files/sky.m4a" type="audio/mp4" />
<source src="audio-files/sky.oga" type="audio/ogg" />
<p>Your browser does not support HTML5 video.</p>
</audio>

We do not use the attributes of poster, width or hieght


Audio Sample 3

Customize Control Bar

Now lets explore how to customize the control bars of an audio or video element.

STEP 1
Prepare your website by adding the Jquery library to the folder on your local computer and on the student server. I recommend these files be placedinside a scripts sub-folder.

http://jquery.com/

I also need a file named player.js which has this code

$(function(){

// Stop if HTML5 video isn't supported
if (!document.createElement('video').canPlayType) {
$("#VideoControls").hide();
return;
}

var video = document.getElementById("VideoSample");

});

STEP 2
Next I create this code in the HTML page, I REMOVE the controls attribute and instead assign an ID so I can later control the element with JavaScript.

<video id="VideoSample" width="640" height="480" preload="none" poster="images/clouds-poster.png">
<source src="boiling_storm_clouds_512kb.mp4" type="video/mp4" />
<source src="boiling_storm_clouds.webm" type="video/webm" />
<source src="boiling_storm_clouds.ogv" type="video/ogg" />
<p>Your browser does not support HTML5 video.</p>
</video>
<div id="VideoControls">

</div>

STEP 3
Now I add CSS in the head of the document that controls the div tag that will eventually display the video controls

<style type="text/css">
#VideoControls {
width: 640px;
height: 30px;
background-color: #333;
color: #fff;
font-family: Verdana, sans-serif;
font-size: 12px;
text-transform: uppercase;
}

#VideoControls div {
float: left;
height: 30px;
line-height: 30px;
}
</style>


HTML/CSS - Custom Controls Sample File 1 and Javascript file

Add a play / pause button:

STEP 1
In the HTML I add a div tag with an id and class

<div id="VideoControls">
<div id="play_toggle" class="player-button">Play</div>
</div>

STEP 2
Next I modify the player.js file, the new code is shown below

var video = document.getElementById("VideoSample");

// Play/Pause ============================//
$("#play_button").bind("click", function(){
video.play();
});

$("#pause_button").bind("click", function(){
video.pause();
});

$("#play_toggle").bind("click", function(){
if (video.paused) {
video.play();
$(this).html("Pause");
} else {
video.pause();
$(this).html("Play");
}
});

});

STEP 3
Add more CSS code

.player-button {
width: 50px;
text-align: center;
cursor: pointer;
}


HTML/CSS - Custom Controls Sample 2 and JavaScript file

Add a progress bar that shows amount of video played.

STEP 1
Add HTML that establishes divs that show the progress of the video as it plays

<div id="video_controls">
<div id="play_toggle" class="player-button">Play</div>
<div id="progress">
<div id="play_progress"></div>
</div>

</div>

STEP 2
Modify the player.js file by adding this new JavaScript code

// Play Progress ============================//
$(video).bind("timeupdate", function(){
var timePercent = (this.currentTime / this.duration) * 100;
$("#play_progress").css({ width: timePercent + "%" })
});

STEP 3
Add CSS that style these div tags

#progress {
position: relative;
background: #555;
width: 310px;
}

#play_progress {
position: absolute;
background: #6C9;
}


HTML/CSS - Video Controls Sample file 3 and Javascript file

Add a progress bar that shows the video has loaded

Please Note: when you test this on your local computer the bar will immediately jump from gray to aqua, when you test it on the Web it will load more slowly and you will see the bar progress.

STEP 1
Modifiy the HTML adding yet another div which will show the progress of the download. Place the new div above the play_progress div.

<div id="progress">
<div id="load_progress"></div>
<div id="play_progress"></div>
</div>

STEP 2
Add this to the player.js file

// Load Progress ============================//
$(video).bind("progress", function(){
updateLoadProgress();
});
$(video).bind("loadeddata", function(){
updateLoadProgress();
});
$(video).bind("canplaythrough", function(){
updateLoadProgress();
});
$(video).bind("playing", function(){
updateLoadProgress();
});

function updateLoadProgress() {
if (video.buffered.length > 0) {
var percent = (video.buffered.end(0) / video.duration) * 100;
$("#load_progress").css({ width: percent + "%" })
}
}

});

STEP 3
Use CSS to style the new div

#load_progress {
position: absolute;
background: #069;
}


HTML/CSS - Custom Controls Sample File 4 and Javascript file

Create a Current Time Played and Duration display

STEP 1 - add more div tag info

<div id="video_controls">
<div id="play_toggle" class="player-button">Play</div>
<div id="progress">
<div id="load_progress"></div>
<div id="play_progress"></div>
</div>
<div id="time">
<span id="current_time">00:00</span> /
<span id="duration">00:00</span>
</div>
</div>

STEP 2 - modify the Javascript

// Time Display =============================//
$(video).bind("timeupdate", function(){
$("#current_time").html(formatTime(this.currentTime));
});
$(video).bind("durationchange", function(){
$("#duration").html(formatTime(this.duration));
});

function formatTime(seconds) {
var seconds = Math.round(seconds);
var minutes = Math.floor(seconds / 60);
// Remaining seconds
seconds = Math.floor(seconds % 60);
// Add leading Zeros
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}

STEP 3 - modify the CSS

#time {
width: 120px;
text-align: center;
}


HTML/CSS - Custom Controls Sample File 5 and JavaScript file

Lab Activity

In lab we will practice downloading a mp3 file, then downloading the audio/video converter and use that software to convert the file to .m4a and .oga files. We will also load the JQuery library if you have not alredy done that.