如何无缝播放多个视频然后循环播放？

问题描述 投票：0回答：4

我知道以前曾提出过类似的问题，但没有人能够解决这个具体问题，他们只解决了部分问题。

我想实现以下目标：

  1. 我们有很多视频。我们称它们为 
    video1
    、
    video2
    、
    video3
    、
    video4
    和 
    video5
    。
  2. 视频按顺序播放，无限循环地重复 - 因此，在 
    video1
    结束后，播放 
    video2
    ，然后播放 
    video3
    、
    video4
    、
    video5
    ，然后再次从 
    video1 开始
    .
  3. 起点必须是随机的。因此，整个序列应该从列表中随机选择的视频开始，然后按正常顺序浏览列表的其余部分。如果它随机选择以 
    video3
    开头，则会继续播放 
    video4
    、
    video5
    、
    video1
    、
    video2
    等
  4. 序列的播放必须自动开始，无需任何用户输入。
  5. 最后一点是最难的一点：每个视频的播放之间不能有间隙。

我已经能够编写一个代码来完成从第 1 点到第 4 点的所有操作，但我无法用它来解决第 5 点！

这是我的代码。我已将视频的 

background-color
设置为 
red
以使视频之间的间隙可见 - 您将能够在每个视频播放之间看到红色闪烁。这就是我需要解决的问题：我需要消除那一瞬间的间隙，以便播放绝对无缝。

var vidElement = document.getElementById('video');
    var vidSources = [
      "http://www.w3schools.com/html/mov_bbb.mp4",
      "http://www.w3schools.com/html/movie.mp4"
      ];
    var activeVideo = Math.floor((Math.random() * vidSources.length));
    vidElement.src = vidSources[activeVideo];
    vidElement.addEventListener('ended', function(e) {
      // update the active video index
      activeVideo = (++activeVideo) % vidSources.length;
      if(activeVideo === vidSources.length){
        activeVideo = 0;
      }

      // update the video source and play
      vidElement.src = vidSources[activeVideo];
      vidElement.play();
    });
video { background-color: red }
<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="video" autoplay muted playsinline></video>
<p>(each video is just ~ 10 seconds)</p>

javascript html html5-video
4个回答
8
投票

您可以创建两个具有 

video
属性的 
preload
元素并将其添加到 div 容器中。然后我们可以通过切换显示状态来切换视频，如下所示：

var videoContainer = document.getElementById('videoContainer'),
    output = document.getElementById('output'),
    nextVideo,
    videoObjects =
    [
        document.createElement('video'),
        document.createElement('video')
    ],
    vidSources =
    [
        "http://www.w3schools.com/html/mov_bbb.mp4",
        "http://www.w3schools.com/html/movie.mp4",
        "http://www.w3schools.com/html/mov_bbb.mp4",
        "http://www.w3schools.com/html/movie.mp4",
        "http://www.w3schools.com/html/mov_bbb.mp4",
        "http://www.w3schools.com/html/movie.mp4"
        //this list could be additionally filled without any other changing from code
    ],
    //random starting point
    nextActiveVideo = Math.floor((Math.random() * vidSources.length));

videoObjects[0].inx = 0; //set index
videoObjects[1].inx = 1;

initVideoElement(videoObjects[0]);
initVideoElement(videoObjects[1]);

videoObjects[0].autoplay = true;
videoObjects[0].src = vidSources[nextActiveVideo];
videoContainer.appendChild(videoObjects[0]);

videoObjects[1].style.display = 'none';
videoContainer.appendChild(videoObjects[1]);

function initVideoElement(video)
{
    video.playsinline = true;
    video.muted = false;
    video.preload = 'auto'; //but do not set autoplay, because it deletes preload

    //loadedmetadata is wrong because if we use it then we get endless loop
    video.onplaying = function(e)
    {
        output.innerHTML = 'Current video source index: ' + nextActiveVideo;

        //select next index. If is equal vidSources.length then it is 0
        nextActiveVideo = ++nextActiveVideo % vidSources.length;

        //replace the video elements against each other:
        if(this.inx == 0)
            nextVideo = videoObjects[1];
        else
            nextVideo = videoObjects[0];

        nextVideo.src = vidSources[nextActiveVideo];
        nextVideo.pause();
    };

    video.onended = function(e)
    {
        this.style.display = 'none';
        nextVideo.style.display = 'block';
        nextVideo.play();
    };
}
video{background-color: red}
<div id="videoContainer" style="display:inline-block"></div>
<b id="output" style="vertical-align:top"></b>

4
投票

尝试将显示设置为阻止和无：

var vidElement0 = document.getElementById('video0');
var vidElement1 = document.getElementById('video1');
var vidElement2 = document.getElementById('video2');
var vidElement3 = document.getElementById('video3');
var vidElement4 = document.getElementById('video4');

    var vidSource0 = "http://www.w3schools.com/html/mov_bbb.mp4";
    var vidSource1 = "http://www.w3schools.com/html/movie.mp4";
    var vidSource2 = "http://www.w3schools.com/html/mov_bbb.mp4";
    var vidSource3 = "http://www.w3schools.com/html/movie.mp4";
    var vidSource4 = "http://www.w3schools.com/html/mov_bbb.mp4";
    
    vidElement0.src = vidSource0;
    vidElement1.src = vidSource1;
    vidElement2.src = vidSource2;
    vidElement3.src = vidSource3;
    vidElement4.src = vidSource4;

    var rand = Math.floor((Math.random() * 5 )); //5 = length of vidsources (Start counting from 0)
    
    var vidRandom = document.getElementById("video" + rand);
    console.log("Video "+rand+ " will be displayed first.");
    
    vidRandom.style.display = "block";
   

   
    vidElement0.addEventListener('ended', function(e) {
    vidElement1.play();
   
    vidElement0.style.display = "none";
     vidElement1.style.display = "block";
});

    vidElement1.addEventListener('ended', function(e) {
    vidElement2.play();
    
    vidElement1.style.display = "none";
    vidElement2.style.display = "block";
  });
  
    vidElement2.addEventListener('ended', function(e) {
    vidElement3.play();
    
    vidElement2.style.display = "none";
    vidElement3.style.display = "block";
  });
  
    vidElement3.addEventListener('ended', function(e) {
    vidElement4.play();
    
    vidElement3.style.display = "none";
    vidElement4.style.display = "block";
  });
  
    vidElement4.addEventListener('ended', function(e) {
    vidElement0.play();
    
    vidElement4.style.display = "none";
    vidElement0.style.display = "block";
  });
video {background-color: red; height: 200px; width: 300px;display: none; }
<video src="" id="video0"  preload autoplay muted playsinline></video>
<video src="" id="video1"  preload autoplay muted playsinline></video>
<video src="" id="video2"  preload autoplay muted playsinline></video>
<video src="" id="video3"  preload autoplay muted playsinline></video>
<video src="" id="video4"  preload autoplay muted playsinline></video>

编辑：我已经编辑了源，将其设为 5 个源，但我找不到正确的代码来淡入它。

0
投票

不需要有两个（或更多）视频元素。一个视频元素就可以了。 只有一个问题。自动播放只能在音频静音的情况下进行。

参见代码片段：

const videoSources = [
  "//www.w3schools.com/html/mov_bbb.mp4", 
  "//www.w3schools.com/html/movie.mp4",
];

//var activeVideo = 0; //Start with first video
var activeVideo = Math.floor((Math.random() * videoSources.length)); //Start with random video
const videoElm = document.getElementById("video");
videoElm.src = videoSources[activeVideo];
videoElm.addEventListener("ended", function() { 
  activeVideo = ++activeVideo % videoSources.length; 
  videoElm.src = videoSources[activeVideo];  
});
#video {
  width: 480px;
  height: 360px;
  border: 1px solid #000;
}
<video id="video" autoplay muted></video>

0
投票

你也可以这样做。查看代码示例。

JSX/TSX：用于多个视频播放器

import React, { useState } from "react";

const videoSources = [
  "https://example.com/video_1.webm",
  "https://example.com/video_2.webm",
  "https://example.com/video_3.webm",
];

const VideoPlayer = () => {
  const [currentVideoIndex, setCurrentVideoIndex] = useState(0);

  // This will handle video end and switch to the next video
  const handleVideoEnd = () => {
    setCurrentVideoIndex((prevIndex) => (prevIndex + 1) % videoSources.length);
  };

  return (
    <div className="relative w-full h-full">
      <video
        className="top-0 left-0 object-cover absolute -z-10 w-screen h-screen"
        autoPlay
        muted
        loop={false}
        onEnded={handleVideoEnd}
        key={currentVideoIndex}
      >
        <source src={videoSources[currentVideoIndex]} type="video/webm" />
      </video>

      {/* Here add the fade-in animation css */}
      <div className="video-fade-in">
        <p>The animation will trigger once the video ends.</p>
      </div>
    </div>
  );
};

export default VideoPlayer;

CSS：

For FadeIn Animation

@keyframes videoFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.video-fade-in {
  animation-name: videoFadeIn;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.