如何使用Javascript动态地播放多个youtube或vimeo视频一个接一个

How to play multiple youtube or vimeo videos one after another dynamically using Javascript

本文关键字：一个 vimeo 视频 youtube Javascript 何使用 动态 播放      更新时间：2023-09-26

如何使用JavaScript动态播放多个youtube或vimeo视频一个接一个?

例如

:我需要有人帮我做这项工作。我有四个视频。每个视频应该一个接一个地播放，但这四个视频是分在菜单列表中。默认情况下，第一个视频必须播放，其余三个视频应处于活动状态，当第一个视频完成后，用户需要点击第二个菜单列表。请帮助我，我对这个概念没有概念

参考

对于Youtube来说非常简单。您只需要一个iframe，并在查询字符串("playlist")中提供额外的YouTube视频id，用逗号分隔。

<iframe
  id="p_1_zone_4_video"
  onload="oniframeYtLoaded(this)"
  style="width:100%; height:100%;border:0 none;" 
  src="https://www.youtube.com/embed/xKXaEJZxRHQ?loop=1&enablejsapi=1&playlist=yALuTl2THO0,yL1-MUdJ-2I">

我理解你的问题，最初只有第一个视频可以播放。完成后，第二个视频按钮被激活，如果用户点击它，则第二个视频开始播放。

你需要在保存视频信息的对象上添加一个active(canBePlayed)属性。只有第一个是真的(其他都是假的)。

视频处于活动状态，表示该视频的按钮处于活动状态，否则该按钮处于禁用状态，无法点击。

打开按钮，点击播放视频。在视频端，下一个视频处于活动状态。这是如何检测视频结束:检测HTML5视频何时结束

关于这个堆栈:

HTML5视频循环src改变结束播放功能不工作

你可以使用video html5标签和javascript实现这一点。请注意，由于缺少视频，片段将不起作用，但您可以查看实现目标的方法。

var videosList = ["video1.mp4", "video2.mp4", "video3.mp4", "video4.mp4"]
video_count = 1;
videoPlayer = document.getElementById("homevideo");
function run(){
        video_count++;
        if (video_count == videosList.length) 
          video_count = 0;
        var nextVideo = "app/video"+videosList[video_count];
        videoPlayer.src = nextVideo;
        videoPlayer.play();
   };
<video id="homevideo" width="100%" autoplay onended="run()">
    <source src="app/video1.mp4" type='video/mp4'/>
</video>

如果你需要youtube视频，你需要像在这个例子中使用youtube api，并检查onPlayerStateChange以便播放下一个视频:

// 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }
      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
  </body>
</html>

相关文章：