<!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>
I want to modify the following code that when user enter any url of live streaming video and click on join button so it should show that channel in video player. I have tried with js but no luck. Could anyone please share any thing which can be helpful
Use the player's src method to load a new video.
player.src({
src: document.querySelector('input').value,
type: 'application/x-mpegURL'
});
NB you don't need to include the http-streaming script, as it is included in the video.js dist script.
<!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>
I tested it by disabling cors policy of chrome and it worked !