Vue-Plyr加载2.7MB视频缓慢且加载后autoplay不生效问题咨询

自动播放不生效问题 #

vue-plyr 有独立的组件级播放配置，直接写在原生video标签上的autoplay属性优先级低于组件配置，默认组件的自动播放开关是关闭状态，所以你的配置不会生效，需要把自动播放参数传入组件的options属性。

加载慢、长时间黑屏问题 #

2.7MB的本地视频加载耗时10秒属于异常情况，常见原因有两个：

1. 你使用的MP4视频的元数据（MOOV原子）存储在文件尾部，浏览器需要下载完全部文件内容才能读取到视频分辨率、时长等播放参数，读取参数完成前都会显示黑屏
2. 未指定video标签的预加载策略，默认的metadata模式只会加载极小部分元数据，不会提前缓冲视频内容

修正后的配置代码 #

<template>
  <section id="vision" class="vision">
    <vue-plyr :options="plyrOptions">
      <video
        controls
        crossorigin
        playsinline
        muted
        loop
        preload="auto"
      >
        <source
          size="1080"
          src="videos/cgi_neutral.mp4"
          type="video/mp4"
        />
      </video>
    </vue-plyr>
  </section>
</template>

<script>
export default {
  data() {
    return {
      plyrOptions: {
        autoplay: true,
        // 其他自定义plyr配置可在此添加
      }
    }
  }
}
</script>

额外优化步骤 #

• 用ffmpeg处理视频，把元数据移到文件头部，处理后加载速度会大幅提升，不需要等全量加载完成就能开始播放，命令如下：
  ffmpeg -i cgi_neutral.mp4 -movflags +faststart cgi_neutral_output.mp4
  处理完成后用新的视频文件替换原来的文件即可
• 确认你的视频文件放在laravel项目的public/videos目录下，避免静态资源被路由中间件拦截导致加载慢
• 如果加载速度还是异常，可以打开浏览器控制台的网络面板，查看视频资源的请求耗时，排查是否是本地开发服务的静态资源响应慢导致的问题

内容的提问来源于stack exchange，提问作者Artur Müller Romanov