video on Html5 - how to add two videos

Asked

Viewed 76 times

1

I wanted to make two videos running, one after the other, I tried the way below but it didn’t work.
You can do it?

<video width='400' height='300' controls loop>
   <source src='video.mp4' type='video/mp4'>
   <source src='video2.mp4' type='video/mp4'>
</video>
html5

  • you will have to do the javascript control, the source chaining serves for fallback and not as playlist.

1 answer

0


You can do it like this: 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<video id="v1" width="320" height="240" controls="controls" onended="vidplay(2)">
<source src="http://content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="Yes Bank Advertisment.mp4">
</object>
</video>

<video id="v2" width="320" height="240" controls="controls" onended="vidplay(1)">
<source src="http://content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="Yes Bank Advertisment.mp4">
</object>
</video>

<script type="text/javascript">

var video = document.getElementById("v1");
video.play();

function vidplay(i) {

  var video = document.getElementById("v"+i);
  if (video.paused) {
    video.play();

  } else {
    video.pause();

  }

};

</script>

</body>
</html>

I edited here and it works perfectly, is one rotating on the other side! one at a time, see if it helps you

Need to make javascript control it, I used the onended tag that performs a function call when the video ends

  • not by rotating one next to the other, I need to finish one, already turn the other in sequence

  • ah got it, so hold on

  • Ready young man! @Adriano

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.