循环播放 HTML5 视频时循环播放黑屏

Question

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

我尝试使用 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>

Answer 1

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

Answer 2

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

希望这会有所帮助，此自动播放和循环播放 HTML5 视频而无需 jQuery，也许它与您要查找的内容相去甚远，但如果您只想循环播放视频，这应该可以解决问题:-)

Answer 3

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

我知道这个帖子很旧，但我希望它会在将来对某人有所帮助:)

Answer 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>

Answer 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>