Question

我想在最后一帧停止完整的背景视频，因此它看起来像海报图片。

这是我拥有的html字符串：

      <video class="video" preload="true" autoplay="autoplay" loop="loop" muted>
          <source src="C:/Users/Paolo/Desktop/site/video/yo.webm" type="video/webm">
      </video>

我是新来的，所以我有点像菜鸟：P

Answer 1

您需要删除loop="loop"。

video.addEventListener('ended', function() { 
   this.currentTime = 100; 
}, false);

将100替换为视频的结束时间。

Answer 2

<video id="video" preload="true" autoplay="autoplay" loop="loop" muted>
    <source src="C:/Users/Paolo/Desktop/site/video/yo.webm" type="video/webm">
</video>

很难在最后一毫秒停止。您可以在视频结束前暂停它。

var videoEl = targetYourVideoElementSomehow;

videoEl.addEventListener("timeupdate", function () {
    console.log('checking time...');
    if (videoEl.currentTime > videoEl.duration - 0.5) {
        // 0.5 is seconds before end.
        videoEl.pause();
    }
});

请注意，videoEl.duration的第一笔支票可能会给您NAN，因为视频未加载足够的信息来提供视频的完整时长。

Answer 3

此解决方案对我有用：

<script type="text/javascript">
// select your video element
var video = document.querySelector('.video');

// listen for the event that fires when your video has finished playing
video.addEventListener('ended', function() {
    // pause the video
    this.pause();
    // set play time to the last frame
    this.currentTime = this.duration;
}, false);

</script>

this.duration（或video.duration）返回上一帧的确切时间。就像DCdaz所说的那样，您应该在HTML中删除loop属性。

Answer 4

做了一些研究，这个解决方案对我有用。在编码方面，总是有许多不同的方式来做事。

HTML

<video id="video" ontimeupdate="pauseVideo(this)" src="./content/video.mp4" muted loop autoplay></video>

Javascript

 <script>
    // Pause video function
    const video = document.getElementById('video');

    function pauseVideo(event) {
        // Console test
        // console.log(video.duration)
        // console.log(event.currentTime)

        // Pause video 0.5 seconds before end time.
        if (event.currentTime > video.duration - 0.5) {
            video.pause();
        }
    }
</script>

基本上，这是在每次视频播放到结尾时使用 ontimeupdate 属性调用 javascript 方法。然后，我使用 if 语句来检查视频的当前位置何时小于视频的总持续时间。有一次，视频位置在持续时间前 0.5 秒达到，即视频结束暂停。

在最后一帧停止完整的背景视频

4 个答案: