HTML 从文本字段附加值时视频播放器不工作

Question

<!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">
   <button type="submit">
   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/browse/@videojs/http-streaming@1.13.3/dist/videojs-http-streaming.min.js"></script>
   <script>
    var player = videojs('my_video_1');
   </script>
  </body>
</html>

我想修改以下代码，当用户输入任何 url 直播视频并点击加入按钮时，它应该在视频播放器中显示该频道。我试过 js 但没有运气。谁能分享任何有用的东西

Answer 1

使用播放器的src方法加载新视频。

player.src({
  src: document.querySelector('input').value,
  type: 'application/x-mpegURL'
});

注意您不需要包含 http-streaming 脚本，因为它包含在 video.js dist 脚本中。

Answer 2

<!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">
   <button type="submit" onclick="loadVideo()">
   JOIN
   </button>
   <video-js autoplay muted id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="" type="application/x-mpegURL">
   </video-js>
    <script>
    function loadVideo(){
    var player = videojs('my_video_1');
    player.src({
  src: document.querySelector('input').value,
  type: 'application/x-mpegURL'
});
}
   </script>
     <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>

  </body>
</html>

我通过禁用 chrome 的 cors 策略对其进行了测试并且它有效！

HTML 从文本字段附加值时视频播放器不工作

HTML video player not working when appending value from text field

html

javascript

web-development-server

video-streaming

video.js