如何让Video.js播放器加载文本框输入的直播流地址并正常播放

核心改造点 #

• 给输入框新增唯一IDstreamUrl，用于获取用户输入的直播流地址
• 给JOIN按钮新增唯一IDjoinBtn，用于绑定点击触发事件
• 修正原代码中错误的http-streaming依赖地址，保证插件正常加载
• 新增点击事件逻辑：先校验输入地址非空，再调用Video.js内置方法更新播放源并自动加载播放

完整可运行代码 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>My Video</title>
  <link href="https://vjs.zencdn.net/7.7.6/video-js.css" rel="stylesheet" />
</head>
<body>
  <h1>Live Streaming</h1>
  <input type="text" id="streamUrl" placeholder="请输入HLS直播流地址">
  <button type="button" id="joinBtn">JOIN</button>
  <video-js autoplay muted id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="https://ap02.iqplay.tv:8082/iqb8002/3m9n/playlist.m3u8" type="application/x-mpegURL">
  </video-js>
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/@videojs/http-streaming@1.13.3/dist/videojs-http-streaming.min.js"></script>
  <script>
    var player = videojs('my_video_1');
    // 绑定JOIN按钮点击事件
    document.getElementById('joinBtn').addEventListener('click', function() {
      const inputUrl = document.getElementById('streamUrl').value.trim();
      // 空输入直接返回
      if (!inputUrl) return;
      // 更新播放器播放源
      player.src({
        src: inputUrl,
        type: 'application/x-mpegURL'
      });
      player.load();
      player.play();
    });
  </script>
</body>
</html>

注意事项 #

• 输入的HLS直播流地址需要符合application/x-mpegURL格式，且允许当前页面所在域名跨域访问，否则会因浏览器同源策略限制加载失败
• 部分浏览器的自动播放策略会限制非静音播放，代码中保留了原有的muted属性保证自动播放正常触发

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