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

问题描述

我有一个视频标签和一个电影，每个部分10秒切割，名称：1.webm，2.webm ....... 1535.webm。我试图做一个JS代码，当视频结束，并发挥下一个，但我有一个问题：屏幕闪烁，电影不连续播放。我需要像电影一样播放，连续播放视频。

有什么办法可以做到吗？不要紧，如果它不在JavaScript中，或者它是许多脚本和代码的组合。

 < video id =my_videowidth =640height =480autoplay> 
< source src =files / 1.webmtype =video / webm> 
< / video> 
 
< script> 
 var src = 0; 
 var video = document.getElementById（my_video）; 
 
 document.querySelector（＃my_video）。addEventListener（ended，nextVideo，false）; 
 
函数nextVideo（）{
 src = src + 1; 
 video.src =files /+ src +.webm; 
 video.play（）; 
} 
< / script> 
  

解决方案

视频的c $ c> src ，因为一旦 src 发生变化，将会加载整个视频，因此您正面临着闪烁的屏幕效果。使用视频部分获得无缝视频似乎是不可能的，但您可以尝试这种方式：

使用不同的元素预加载所有视频，并为所有元素设置 preload =auto属性。您需要以这种方式播放元素的可见性，以便一次播放一个视频。第一个视频将是 autoplayed 。当结束事件触发时，只需将下一个元素的可见性更改为true，将上一个元素更改为false（不要使用 dispay：block / display：none ，因为我观察到在某些移动设备中，风格 display：none 的视频标签没有被浏览器预加载。还要保留一些背景到视频中，以避免白色背景闪光效果。

数据 - 控制台=假data-babel =false>

var my_video = document.getElementById（my_video） ; var my_video2 = document.getElementById（my_video2）; document.querySelector（＃my_video）。addEventListener（ended，nextVideo，false）; 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_videowidth =640height =480preload =autoautoplay controls> < / src =test.mp4type =video / mp4>< / video>< video id =my_video2width =640height =480preload =auto 隐藏 > < source src =test2.mp4type =video / mp4>< / video>< button type =buttononclick =nextVideo（）> Next< / button>

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.

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>

解决方案

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:

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.

Refer this snippet:

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屋！