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.

  });

});

HTML5多视频屏幕

1 个答案: