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
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>
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.
i don't want to use javascript to do so.
Is it possible to do the same with using HTML5 only?
Is it possible to do the same with using HTML5 only?
No.
nice helpful article.Does it also play in safari??
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.
