如何禁止HTML视频播放结束后自动倒回至起始位置

将本地HTML轮播组件集成到自定义应用后，出现两个异常：

• 视频播放器样式与主流浏览器不一致
• 视频播放结束后自动倒回起始位置，而轮播逻辑依赖ended事件切换幻灯片，需要让视频停在播放结束的最后一帧

相关HTML代码 #

<div class="container">
 <div id="slider">
      <div class="owl-carousel owl-theme video-slider-1">
          <img src="1.jpg" id="photocss" /> <!-- 图片 -->
          <video muted autoplay controls id="videocss">
            <source src="1.mp4" type="video/mp4"> <!-- 视频1 -->
          </video>
          <img src="2.jpg" id="photocss" /> <!-- 图片 -->
          <img src="3.jpg" id="photocss" /> <!-- 图片 -->
          <video muted autoplay controls id="videocss">
            <source src="2.mp4" type="video/mp4"> <!-- 视频2 -->
          </video>
          <img src="4.jpg" id="photocss" />
          <img src="5.jpg" id="photocss" /> <!-- 图片 -->
          <video muted autoplay controls id="videocss">
            <source src="3.mp4" type="video/mp4"> <!-- 视频3 -->
          </video>
          <img src="6.jpg" id="photocss" /> <!-- 图片 -->
      </div>
  </div>
</div>

相关JS代码 #

onTranslated: function() {
    if ($(".owl-item.active video", this.$element).length) {
      $(".owl-item.active video", this.$element)[0].play();
      owl.trigger('stop.owl.autoplay')
      $(".owl-item.active video", this.$element).on('ended', function() {
        owl.trigger('play.owl.autoplay')
      });
    }
  }
});

效果对比 #

• 当前效果：视频播放完毕自动跳回开头，播放器样式偏离主流浏览器默认样式
• 预期效果：视频停在播放结束的最后一帧，播放器样式与主流浏览器一致

解决方案 #

1. 让视频停在播放结束帧 #

修改JS逻辑，在ended事件触发时强制将视频当前时间设置为总时长，同时确保关闭视频循环：

onTranslated: function() {
    const activeVideo = $(".owl-item.active video", this.$element)[0];
    if (activeVideo) {
      // 关闭循环，避免自动重播
      activeVideo.loop = false;
      activeVideo.play();
      owl.trigger('stop.owl.autoplay');
      
      // 先解绑旧事件，避免重复绑定
      $(activeVideo).off('ended').on('ended', function() {
        // 强制停在最后一帧
        this.currentTime = this.duration;
        owl.trigger('play.owl.autoplay');
      });
    }
  }
});

也可以直接在HTML的video标签上添加loop="false"属性，双重保障：

<video muted autoplay controls id="videocss" loop="false">
  <source src="1.mp4" type="video/mp4">
</video>

2. 修复播放器样式问题 #

自定义应用可能覆盖了video控件的默认样式，通过CSS强制还原或自定义匹配浏览器的样式：

/* 针对轮播内的视频控件，强制还原基础样式 */
.video-slider-1 video {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: auto;
}

/* 还原WebKit内核浏览器的控件面板样式 */
.video-slider-1 video::-webkit-media-controls-panel {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
}

/* 若应用样式优先级过高，可使用!important强制覆盖（谨慎使用） */
.video-slider-1 video::-webkit-media-controls-play-button {
  filter: invert(1) !important;
}

内容的提问来源于stack exchange，提问作者rec39