Code Example: Video Playback

Overview

The following is part of a series of test-based HTML5 applications designed to run on the ActiveVideo platform. These applications incorporate the use of HTML5, JavaScript, and CSS3, and will be used as examples for further development of applications. These are not designed as tutorials for how to run each of the programs, but more of an exploration into some of the useful coding techniques presented.

Video (Remote)

This application allows the user to scroll through and select a video to play from an array of remotely accessed videos.

Code Highlights

There are two key portions of the code: video playback and video selection. First, all videos are loaded into an array in the config file.


window.config = { 
videos : [ {
name: "big_buck_bunny", codec: "H264 - MPEG-4 AVC (part 10) (avc1), 
Resolution: 640x360, Frame rate: 24, Audio: MPEG AAC", 
bitrate: "678kbps", length: "00:01:00", 
location: '<a href="http://avframework.s3.amazonaws.com/examples/video/big_buck_bunny.mp4'">
http://avframework.s3.amazonaws.com/examples/video/big_buck_bunny.mp4'</a>, 
fileType: ".mp4", img: 'bigbuckbunny.png', alt:'Big Buck Bunny'},{name:"PipeDrea2001_512kb", 
codec: "H264 - MPEG-4 AVC (part 10) (avc1), 
Resolution: 320x240, Frame rate: 29.970000, Audio: MP4 AAC", bitrate: "575kbps", length: "00:03:33", 
location: "<a href="http://avframework.s3.amazonaws.com/examples/video/PipeDrea2001_512kb.mp4">
http://avframework.s3.amazonaws.com/examples/video/PipeDrea2001_512kb.mp4</a>", 
fileType: ".mp4", img: PipeDream.png', alt:'Pipe Dream'} ]}


This information is later parsed into a button, which will contain all of that video’s display information. This will eventually be located in the right info panel on the page, and used to load the video from the external source.

var createVideoFiles = function (){
for(var i=0; i<window.config.videos.length; i++){
var video = window.config.videos[i];

var fbutton = document.createElement('button');
fbutton.name = video.name; 
fbutton.id = 'button'+i;
fbutton.codec = video.codec;
fbutton.bitrate = video.bitrate;
fbutton.length = video.length;
fbutton.location = video.location;
fbutton.fileType = video.fileType;
fbutton.img = video.img;
fbutton.alt = video.alt;
var img = document.createElement('img');
img.src = "images/"+video.img;
img.innerHTML = "<width:100px; height:100px;>";
img.alt = video.alt;
fbutton.appendChild(img);

//fbutton.addEventListener('keydown', onButtonUpDown, false);
//set navigation module properties
if(i != 0){
fbutton.style.navLeft = '#button'+(i-1);
}
if(i != window.config.videos.length.length-1){
fbutton.style.navRight = '#button'+(i+1);
}
allButtons[i] = fbutton;
}
allButtons[0].style.navLeft = '#button'+(window.config.videos.length-1);
allButtons[window.config.videos.length-1].style.navRight = '#button'+0;
}

In order to play a new movie, the user will need to select the correct button associated with it. The user controls one activeElement button, which when ‘Enter’ is pressed, will load that movie onto the page. This is done using the following function. Note that this will load the video into the “video0” element.

var playVideo = function(evt){ 
console.log("Play the video!"); 
var focusObject = document.activeElement;
console.log("Video location: " + focusObject.location);
document.getElementById('video0').setAttribute("src",focusObject.location);
document.getElementById('video0').style.width = "100%";
document.getElementById('video0').style.height = "360px";
}

The slider bar is handled mainly through WebKit transformations. A keypress eventListener is used to determine which direction the activeElement will shift to. All of the border glowing and scaling is done in the styles.css.

#mainContent #photoGallery button {    position: relative;     float: left;    margin-right: 6%;    margin-bottom: 10px;    background: #111;    -webkit-transition: all 0.5s ease;    color: #111;    display:block;    background-color:transparent;    border-width:0;    border-radius:5%;    padding:5px;    margin-top:50px;    width:100px;    box-shadow: 0px 5px 4px #23507a;}

 

  • Thursday, 01 August 2013

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2017 Active Video Networks. All Rights Reserved