HTML5 从多个部分播放电影而不闪屏 [英] HTML5 Play movie from multiple parts without flashing screen

问题描述

我有一个视频标签和一部电影，每部剪辑为 10 秒，名称为:1.webm、2.webm ...... 1535.webm.我试图制作一个 js 代码，它可以找到视频何时结束并播放下一个，但我有一个问题:屏幕闪烁，电影没有连续播放.我需要像电影一样播放它，连续播放视频.

I have a video tag and a movie cutted in parts of 10 seconds each, with name: 1.webm, 2.webm ....... 1535.webm. I tried to make a js code which find when the video is ended and play the next one, but I have a problem: the screen flashes and the movie is not playing continuously. I need to play it exactly as a movie, with continous video.

有没有办法做到这一点?不管它是不是在 JavaScript 中，还是它是许多脚本和代码的组合.

Is there any options to do this? It doesn't matter if it is not in JavaScript or if it is a combination of many scripts and codes.

<video id="my_video" width="640" height="480" autoplay>
    <source src="files/1.webm" type="video/webm">
</video>

<script>
var src = 0;
var video = document.getElementById("my_video");

document.querySelector("#my_video").addEventListener("ended", nextVideo, false);

function nextVideo() {
    src = src + 1;
    video.src = "files/" + src + ".webm";
    video.play();
}
</script>

推荐答案

如果更改视频的 src 会变得非常困难，因为它会加载整个视频一次 src 更改，因此您面临闪烁的屏幕效果.使用视频部分获得无缝视频似乎是不可能的，但您可以通过这种方式尝试:

It becomes very difficult if you are changing the src of the video as it will load the entire video once src changes and hence you are facing flashing screen effect. It seems impossible to get seamless video by using video parts yet you can try it this way:

为每个视频使用不同的elements 预加载所有视频，并将preload="auto" 属性设置为所有元素.您需要以一次播放一个视频的方式播放元素的可见性.第一个视频将自动播放.当 ended 事件触发时，只需将下一个元素的可见性更改为 true，将上一个元素的可见性更改为 false(不要像我一样使用 dispay:block/display:none已经观察到在某些移动设备中，具有样式 display:none 的视频标签没有被浏览器预加载).还要为视频保留一些背景，以避免白色背景闪光效果.

Pre-load all the videos using different elements for each video and set preload="auto" attribute to all the elements. You need to play with the visibility of the elements in such a way that you will play one video at a time. First video will be autoplayed. As the ended event fires, just change the visibility of the next element to be true and previous element to be false(Do not use dispay:block/display:none as I have observed that in some mobile devices, video tags having style display:none are not being pre-loaded by browser). Also maintain some background to the video just to avoid white background flash effect.

参考这个片段:

var my_video = document.getElementById("my_video");
var my_video2 = document.getElementById("my_video2");
document.querySelector("#my_video").addEventListener("ended", nextVideo, false);

function nextVideo() {
  my_video2.play();
  my_video2.setAttribute('class', '');
  my_video.setAttribute('class', 'hidden');
}

.hidden {
  position: absolute;
  top: -10000px;
  left: -10000px;
}
video {
  background: black;
}

<video id="my_video" width="640" height="480" preload="auto" autoplay controls>
  <source src="test.mp4" type="video/mp4">
</video>
<video id="my_video2" width="640" height="480" preload="auto" controls class="hidden">
  <source src="test2.mp4" type="video/mp4">
</video>
<button type="button" onclick="nextVideo()">Next</button>

这篇关于HTML5 从多个部分播放电影而不闪屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！