HTML5多视频屏幕

Question

我有多个视频标签在单个屏幕上的绝对位置，并希望获得更长的视频从多个，当更长的视频结束想要执行代码。

<div style="width:1320px;height:1080px;position:absolute;left:0px;top:0px;z-index:0;">
    <video preload="auto" autoplay>
            <source src="1.mp4" type="video/mp4">
            <source src="1.ogv" type="video/ogg">
    </video>
</div>
<div style="width:600px;height:1080px;position:absolute;left:1321px;top:0px;z-index:0;">
    <video preload="auto" autoplay>
            <source src="2.mp4" type="video/mp4">
            <source src="2.ogv" type="video/ogg">
    </video>
</div>
<div style="width:1000px;height:600px;position:absolute;left:200px;top:200px;z-index:5;">
    <video preload="auto" autoplay>
            <source src="3.mp4" type="video/mp4">
            <source src="3.ogv" type="video/ogg">
    </video>
</div>

我该怎么做呢？

谢谢，Bhumi

Answer 1

所以，如果我理解的很好，你在一个页面上有多个视频，当最长的一个结束播放时，你想执行代码吗？

然后你会这样做：

$(document).ready(function() {

   var longestVid = "";
   $("video").each(function() {
       if (longestVid == "" || longestVid.duration < this.duration)
          longestVid = this;
   });

  //To loop all others:
  $("video").not($(longestVid)).attr("loop","loop");

   $(longestVid).on("ended",function() {

      //This code will execute when the longest video on the page ends playing.

  });

});