<!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>Quiero modificar el siguiente código que cuando el usuario ingresa cualquier URL de transmisión de video en vivo y hace clic en el botón Unirse para que se muestre ese canal en el reproductor de video. He intentado con js pero sin suerte. ¿Alguien podría compartir algo que pueda ser útil?
Use el método src del reproductor para cargar un nuevo video.
player.src({ src: document.querySelector('input').value, type: 'application/x-mpegURL' });NB: no necesita incluir el script de transmisión http, ya que está incluido en el script dist 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"> <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>¡Lo probé desactivando la política cors de Chrome y funcionó!