Question

我正在运行以下代码，该代码会在每个视频的末尾更改html5视频的来源，以便它不断播放一个视频。第一个视频播放完后，将运行第二个视频，然后运行第三个视频，并最终从头开始再次播放，从而导致无休止的循环。它还选择一个随机的起点，但这对我的问题并不重要。

在下面的代码中，您只会找到两个视频源，但最终的代码将使用大约十个左右的视频。

我的问题是，在视频结尾和下一个视频开头之间有一个小暂停。我已将视频标签的背景色设置为红色，以便您可以在播放每个视频之间看到红色闪烁。

我猜想这可以通过预加载javascript代码中指定的所有视频来解决。因此，我想实现的是在播放当前视频时仅预加载javascript代码内指定列表中的下一个视频。所以当视频nr。 5正在播放，应该预加载视频nr。 6等。

这不是通过有效的缓冲/预加载可以解决的问题吗？我对其他建议也很满意。

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>

Answer 1

您可以使用def refund_information amount_formatted = ActionController::Base.helpers.number_to_currency(@refund.amount, negative_format: '(%u%n)') { # ... amount_formatted: amount_formatted, # ... } end属性创建video元素，并将其添加到div容器中，如下所示：

preload

function initVideoElement(videoEl)
{
    videoEl.playsinline = true;
    videoEl.muted = false;
    videoEl.preload = 'auto'; //but do not set autoplay, because it deletes preload

    //loadedmetadata is wrong because if we use it then we get endless loop
    videoEl.onplaying = function(e)
    {
        if(++nextActiveVideo == 2)
            nextActiveVideo = 0;

        //replace the video elements against each other:
        if(this.inx == 0)
            nextVideoElement = videoElements[1];
        else
            nextVideoElement = videoElements[0];

        nextVideoElement.src = vidSources[nextActiveVideo];
        nextVideoElement.pause();
    };

    videoEl.onended = function(e)
    {
        this.style.display = 'none';
        nextVideoElement.style.display = 'block';
        nextVideoElement.play();
    };
}

var videoContainer = document.getElementById('videoContainer'),
    nextActiveVideo = 0,
    nextVideoElement,
    videoElements =
    [
        document.createElement('video'),
        document.createElement('video')
    ],
    vidSources =
    [
        "http://www.w3schools.com/html/mov_bbb.mp4",
        "http://www.w3schools.com/html/movie.mp4"
    ];

videoElements[0].inx = 0; //set index
videoElements[1].inx = 1;

initVideoElement(videoElements[0]);
initVideoElement(videoElements[1]);

videoElements[0].autoplay = true;
videoElements[0].src = vidSources[0];
videoContainer.appendChild(videoElements[0]);

videoElements[1].style.display = 'none';
videoContainer.appendChild(videoElements[1]);

video{background-color: red}

如何使用javascript缓冲/预加载html5视频

1 个答案: