Member Avatar for jalpesh_007

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
  • 11K Views
  • 7 Months Discussion Span
  • Latest Post Latest Post by swaranan.barman

Dani AI

Generated

Short answer: a single <video> element can list multiple <source> files, but those are alternate encodings of the same asset, not a playlist. The browser picks the first playable source and ignores the rest. HTML alone has no next/previous or playlist capability. To switch among different videos at the same spot, you must change the media source via JavaScript (update video.src or <source> elements, then call load() and play()). See MDN for details on the <video> element and HTMLMediaElement.src.

Safari note: for widest support on macOS and iOS, provide MP4 (H.264 video + AAC audio). Safari does not support Ogg Theora/Vorbis; including WebM helps Chromium/Firefox, but is not universally supported on iOS. Refer to MDN’s guide on media formats support. Also, do not use type="video/mp3"; MP3 is audio (audio/mpeg) and should be served via <audio>.

Example playlist with next/prev and auto-advance:

<video id="player" controls width="420" preload="metadata"></video>
<button id="prev">Prev</button>
<button id="next">Next</button>

<script>
const playlist = ['clip1.mp4','clip2.mp4','clip3.mp4','clip4.mp4'];
let i = 0;
const v = document.getElementById('player');
function play(n){ i = (n + playlist.length) % playlist.length; v.src = playlist[i]; v.load(); v.play(); }
document.getElementById('next').onclick = () => play(i+1);
document.getElementById('prev').onclick = () => play(i-1);
v.addEventListener('ended', () => play(i+1));
play(0);
</script>

Recommended Answers

All 5 Replies

Member Avatar for IIM

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>
commented: nice approach! +12
Member Avatar for JorgeM

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
Member Avatar for jalpesh_007

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

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

Member Avatar for pritaeas

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

No.

Member Avatar for swaranan.barman

nice helpful article.Does it also play in safari??

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.