<!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，但运气不好。有谁能分享一些有用的东西吗?
使用播放器的src方法加载新视频
player.src({
src: document.querySelector('input').value,
type: 'application/x-mpegURL'
});
注意，你不需要包含http流脚本，因为它包含在video.js的dist脚本中。
<!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策略测试了它，它工作了!