循环播放 HTML5 视频时循环闪烁黑屏答案

【问题标题】：Looping HTML5 video flashes a black screen on loop循环播放 HTML5 视频时循环闪烁黑屏
【发布时间】：2014-04-25 13:58:57
【问题描述】：

我有一个通过 jquery 循环播放的 20 秒 HTML5 视频。但是每次播放视频时，黑屏都会快速闪烁，并且非常刺耳，因为它应该与白色背景融为一体。

我尝试使用 CSS 将视频背景设为白色，但无济于事。有什么想法可以达到预期的效果吗？

<video id="projects-video" width="841px" height="490px" autoplay poster="video/map1280-poster.jpg" >
    <source src="video/map841.mp4" type="video/mp4"/>
    Your browser does not support the video tag. I suggest you upgrade your browser.
 </video>

<script>
   $("#projects-video").bind('ended', function(){
            this.play();
     });
</script>

【问题讨论】：

标签： javascript css html html5-video

【解决方案1】：

只是一个猜测，但也许可以尝试从 0.5 秒开始播放视频，以便在开始时跳过黑屏。查看here 以获取可用于操作该功能的事件列表。我会查看 currentTime 事件，最后可能设置为this.currentTime，然后设置this.play();

【讨论】：

【解决方案2】：

<video width="320" height="240" autoplay="autoplay" loop> 
   <source src="movie.mp4" type="video/mp4" />
   <source src="movie.ogg" type="video/ogg" />

希望这会有所帮助，这个自动播放和循环播放没有 jQuery 的 HTML5 视频，可能与您正在寻找的内容不同，但如果您只是想循环播放视频，这应该可以解决问题 :-)

【讨论】：

【解决方案3】：

黑屏似乎是视频第一帧之前的时间。例如，如果视频有 30FPS，使用 video.currentTime = 0.034 (1/30 = 0.0333...) 并且黑屏应该消失。

我知道这篇文章已经过时了，但我希望它对未来的人有所帮助:)

【讨论】：

这个。我遇到了同样的问题，解决方案是在视频末尾删除一些额外的帧。谢谢！

【解决方案4】：

为我工作

// typescript code
    const video = document.getElementById('main-video') as HTMLVideoElement;
    video.addEventListener('ended', () => {
      video.currentTime = 0.05;
      video.play();
    });

// html !!!important delete loop attribute

<video autoplay muted id="main-video">
   <source src="..path to video" type="video/mp4"></source>
</video>

【讨论】：

有没有人解决这个问题？

【解决方案5】：

对于持续时间与秒数不成比例的短视频（例如，10 秒和 400 毫秒），我也遇到了同样的问题。解决方案是修剪可能由某些编码问题添加的部分：

ffmpeg -i in.mp4 -ss 00:00:00.0 -t 00:00:10.0 -an out.mp4

我还使用了原生循环和自动播放方法：

<video muted autoPlay loop poster="/static/index/background.jpg" css={videoStyleSheet}>
    <source src="/static/index/output.mp4" type="video/mp4" />
</video>

【讨论】：