Ways to include different video formats in different browsers and mobile devices

Introduction:

First of all my hearty thanks to Corinne Ducusin, one of the reader of my Tip How to play multiple videos in a loop using HTML5 and JavaScript. She is the person, who anyway encouraged me to write this post.

Yesterday I received an email from her, which includes a query, “how can we include the different formats of same video file to play it in different browsers”.

We all know that all browsers do not support same media formats of videos. So it’s a best practice to include different formats of videos to play it in different kind of browsers and devices. The browser will detect the supported format automatically and play that video file.

Description:

As per that post, videos were declared in an array to play them in a loop using HTML5.
var videoSource = new Array();
videoSource[0]=’video/video.m4v’;
videoSource[1]=’video/BigBuck.m4v’;

So now the question is, how can we include the other formats for the same video? If we declare the array like below, will it work?

videoSource[0]=’video/video.m4v’, ‘video/video.webm’;

Normally we follow the approach described below to play multiple formats as per the browser compatibility. If we can insert the source tag dynamically inside the video tag, it can solve our problem.

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Solution in details

Lets define video tag having width and height with id as myVideo.

<video  width="320" height="240" controls  id="myVideo" >
</video>

And defined a list of videos with different formats.

var videoSource = [
 [{
  src: 'video.mp4',
  type: 'video/mp4'
 },
 {
  src: 'video.ogg',
  type: 'video/ogg'
 }],
 [{
  src: 'BigBuck.mp4',
  type: 'video/mp4'
 },
 {
  src: 'BigBuck.ogg',
  type: 'video/ogg'
 }]
];

var videoCount = videoSource.length;

On above code I have created a JSON array, which contains the source and type of the media format of the video and declared a variable to check the length of the JSON array.

function videoPlay(videoNum) {
  var sourceString = "";
  var sourceArray = videoSource[videoNum];
  for(var count=0; count<sourceArray.length; count++) {
    sourceString += '<source src="'+sourceArray[count].src+'" '+
      ' type="'+sourceArray[count].type+'">'; 
  }
  document.getElementById("myVideo").innerHTML = sourceString;
  document.getElementById("myVideo").play();
}

The above videoPlay function, which will take the videoNum as argument and as per the videoNum it will set the src and type in the source tag. Then it will set the inner HTML of the video element and play the video.

function myHandler() {
  currentIndex++;
  if(currentIndex == (videoCount-1)){
    currentIndex = 0;
    videoPlay(currentIndex);
  }
  else{
    videoPlay(currentIndex);
  }
}

The above function myHandler will play the videos in the loop by checking the number of videos available in the JSON array.

Complete code

<!DOCTYPE html>
<html>
<body>
<video  width="320" height="240" controls id="myVideo" >
</video>
<script>
var currentIndex = -1;
var videoSource = [
 [{
  src: 'video.mp4',
  type: 'video/mp4'
 },
 {
  src: 'video.ogg',
  type: 'video/ogg'
 }],
 [{
  src: 'BigBuck .mp4',
  type: 'video/mp4'
 },
 {
  src: 'BigBuck .ogg',
  type: 'video/ogg'
 }]
];
var videoCount = videoSource.length;

//it will detect the completion of the event and execute the myHandler function to play the next video.
document.getElementById('myVideo').addEventListener('ended',myHandler,false);

function videoPlay(videoNum) {

  var sourceString = "";
  var sourceArray = videoSource[videoNum];
  for(var count=0; count<sourceArray.length; count++) {
    sourceString += '<source src="'+sourceArray[count].src+'" '+
      ' type="'+sourceArray[count].type+'">'; 
  }
  document.getElementById("myVideo").innerHTML = sourceString;
  document.getElementById("myVideo").play();
}

function myHandler() {
  currentIndex++;
  if(currentIndex == (videoCount-1)){
    currentIndex = 0;
    videoPlay(currentIndex);
  }
  else{
    videoPlay(currentIndex);
  }
}
myHandler();
</script>
</body>
</html>

Summary:
So here I have described the way to include the multiple media formats of a same video file and play it in different browsers and devices.

Written By: Sourabha Kumar Sahoo, Software Developer, Mindfire Solutions

Advertisements

One thought on “Ways to include different video formats in different browsers and mobile devices

  1. Pingback: Ways to include different video formats in different browsers and mobile devices | souravsahoo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s