0

Dear all,

I am learning html5 recently and stuck with one problem.

Is it possible to add 4 different videos on same location with different extension of oog and mp4 inside a single <video> tag?

If it is, then i have 4 video files that should be play with using next and previous button.

can we do it using html5 and web browser?
If so, then please reply.

Thanks

5
Contributors
5
Replies
46
Views
4 Years
Discussion Span
Last Post by swaranan.barman
2

Yes it is possible to do this.For example take a look at this example that i made to show next button,similarly you can create previous button.The concept is that you are using array to save to video location with name and on next click ,change the source of video and select next from array.

A code snippet showing the same

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="nextButton()">Next</button>
  <br> 
  <video id="video1" width="420">
    <source src="C:/Exam480Mod1Part1_mid_html5.mp4" type="video/mp4">
    <source  type="video/mp3">
     <source type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 
var videoList=['Exam480Mod2Part1_mid_css3_1.mp4','Exam480Mod1Part2_mid_html.mp4','Exam480Mod1Part1_mid_html5.mp4','[DDR] Udaan - 06 - Aazaadiyan.mp3','mov_bbb.ogg'];
var index = videoList.indexOf(window.currentVideoName);

//Next button
function nextButton(){
myVideo.pause();
myVideo.currentTime=0;
index = index + 1;
if(index==videoList.length)
index = 0;
alert(videoList[index]);
myVideo.src = 'C:/'+videoList[index];
window.currentVideoName=videoList[index];
myVideo.play();
}

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

</script> 

</body> 
</html>
Votes + Comments
nice approach!
0

Is it possible to add 4 different videos on same location with different extension of oog and mp4 inside a single <video> tag?

No, you would need to create multiple video elements and use javascript to show/hide, prevent/next controls to go through the videos.

[EDIT]: I didnt consider the approach that IIM proposed when I responded to the thread. I havent tested it, but it looks viable.

Edited by JorgeM

0

i don't want to use javascript to do so.

Is it possible to do the same with using HTML5 only?

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.