循環播放 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>