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秒，以便在开始时跳过黑屏。查看here以获取可用于操作功能的事件列表。我会查看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

我对短视频的持续时间与秒不成比例（例如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>

Answer 4

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

我知道这篇文章很老但我希望它能在将来帮助某人：）

Answer 5

为我工作

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

循环播放HTML5视频会在循环中闪烁黑屏

5 个答案: