更换视频src后如何更新Video.js播放器？

核心问题：直接修改video标签的src属性无效，必须用Video.js官方API操作 #

• 别直接改<video>元素的src，Video.js有自己的媒体源管理机制，正确步骤：
  1. 获取已初始化的播放器实例：const player = videojs('my-video');
  2. 暂停当前播放（可选但推荐）：player.pause();
  3. 用src()方法设置新源，注意要指定格式类型：

     // 切换m3u8
     player.src({
       src: 'new-video.m3u8',
       type: 'application/x-mpegURL'
     });
     // 切换mpd
     player.src({
       src: 'new-video.mpd',
       type: 'application/dash+xml'
     });
     

  4. 加载并播放新源：player.load(); player.play();

格式支持的必要前提 #

• 播放m3u8需要Video.js的HLS插件，播放mpd需要Dash插件，确保初始化时已引入：
  • 如果你用的是CDN版本，要同时引入对应插件的脚本，比如：

    <!-- Video.js核心 -->
    <link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
    <!-- HLS/DASH插件 -->
    <script src="https://cdn.jsdelivr.net/npm/@videojs/http-streaming@3.10.0/dist/videojs-http-streaming.min.js"></script>
    

  • 初始化播放器时，可以指定techOrder确保优先使用对应技术：

    const player = videojs('my-video', {
      techOrder: ['html5', 'hls', 'dash']
    });
    

错误排查技巧 #

• 打开浏览器控制台（F12），查看是否有报错：
  • 若出现跨域错误，需要在视频服务器配置CORS允许你的网站域名访问
  • 若提示插件未找到，检查插件脚本是否正确引入
  • 若提示视频加载失败，直接在浏览器地址栏打开视频源地址，确认地址有效且能正常加载

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />
</head>
<body>
  <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264">
    <source src="initial-video.m3u8" type="application/x-mpegURL">
  </video>

  <button onclick="switchToM3U8()">切换到HLS视频</button>
  <button onclick="switchToMPD()">切换到DASH视频</button>

  <script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@videojs/http-streaming@3.10.0/dist/videojs-http-streaming.min.js"></script>
  <script>
    const player = videojs('my-video');

    function switchToM3U8() {
      player.pause();
      player.src({
        src: 'new-hls-video.m3u8',
        type: 'application/x-mpegURL'
      });
      player.load();
      player.play();
    }

    function switchToMPD() {
      player.pause();
      player.src({
        src: 'new-dash-video.mpd',
        type: 'application/dash+xml'
      });
      player.load();
      player.play();
    }
  </script>
</body>
</html>

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