时间戳

首页 > 解决方案 > 当第一个视频以视频标签作为播放列表结束时播放下一个视频

javascript - 当第一个视频以视频标签作为播放列表结束时播放下一个视频

问题描述

嗨，我不太擅长 javascript

我有视频，我想在第一个视频结束时播放下一个视频等等。这是我尝试过的。

<div id="myvideo" style="width: 100%; height: 400px; overflow: hidden;">
      <%= video_tag "men-kicking-punching-fighting-during-combat-sport-karate-simulation_b8ltmb7kqx_1080__D.mp4", muted: 'muted',autoplay: :true ,style: 'display: block; height: 100%; width: 100%; object-fit: cover;', class: "active"%>
      <%= video_tag "young-woman-dancing-on-the-stairs_hsua5f2_1080__D.mp4", muted: 'muted',autoplay: :true,style: 'display: block; height: 100%; width: 100%; object-fit: cover;'%>
      <%= video_tag "videoblocks-happy-arabian-uae-sheikh-man-walks-in-middle-of-white-desert-and-enjoys-life-on-hot-summer-day_rbtvafcvw_1080__D.mp4", muted: 'muted',autoplay: :true,style: 'display: block; height: 100%; width: 100%; object-fit: cover;' %>
    </div>

在java脚本中

    <script type="text/javascript">
var myvid = document.getElementById('myvideo');

myvid.addEventListener('ended', function(e) {
  // get the active source and the next video source.
  // I set it so if there's no next, it loops to the first one
  var activevideo = document.querySelector("#myvideo video.active");
  var nextvideo = document.querySelector("#myvideo video.active + video_tag") || document.querySelector("#myvideo video:first-child");
  
  // deactivate current source, and activate next one
  activevideo.className = "";
  nextvideo.className = "active";
  
  // update the video source and play
  myvid.srcObject = nextvideo.srcObject;
  myvid.play();
});</script>

标签： javascriptruby-on-railsloopsvideo

解决方案

当一个人完成3 个视频时，要自动播放您的视频 1 by1删除自动播放，以便您的 JS 正常工作：

<script type="text/javascript">

const videos = document.getElementsByTagName('video') 
videos[0].play()

videos[0].addEventListener('ended',function(e){

videos[1].play()

videos[1].addEventListener('ended',function(e){

videos[2].play()

videos[2].addEventListener('ended',function(e){

videos[0].play()

})

})

})

</script>

推荐阅读