Estoy tratando de reproducir un canal de televisión en vivo con videojs. Lo intenté de varias maneras, pero siempre obtengo "No se encontró una fuente compatible para este medio". error. Otros videos se están reproduciendo bien.
La URL funciona bien en VLC y el códec muestra la transmisión como "MPEG-H Part2/HEVC (H.265) (hevc)".
También probé en una variedad de navegadores, Chrome, Firefox, Safari y Edge.
Este es el esqueleto del código. ¿Hay alguna forma de jugarlo?
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" /> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script src="https://unpkg.com/videojs-contrib-dash/dist/videojs-dash.js"></script> <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> <video id='live-video' class='video-js vjs-default-skin' controls> </video> <script> var player = videojs('live-video'); player.src({ src:'https://www.example.com/play.php?OTUxE2NDUN', type:'application/x-mpegurl'}); player.play(); </script>Aquí hay un método más simple para reproducir videos en su página web. Puede personalizarlo a su gusto agregando parámetros y código de la guía del sitio web video.js.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>UN Web TV</title> <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> <script src="https://unpkg.com/video.js/dist/video.js"></script> <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js </script> </head> <body> <video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" data-setup='{}'> <source src="https://cdnapi.kaltura.com/p/2503451/sp/250345100/playManifest/entryId/1_gb6tjmle/protocol/https/format/applehttp/a.m3u8" type="application/x-mpegURL"> </video> <script> var player = videojs('my_video_1'); player.play(); </script> </body> </html>Llegué a la conclusión de que no hay nada de malo en la codificación que muestra en su publicación base (pregunta). Especulo que la URL de origen REAL que estaba utilizando NO es una transmisión HLS válida y, por lo tanto, la causa de su error declarado. (Es posible que sea una transmisión DASH válida, pero estoy razonablemente seguro de que su código NO funcionará con una transmisión DASH).
Aquí hay un código de trabajo que es equivalente al suyo, excepto que usa la interfaz de usuario/API más nueva (recomendada), mencionada en el tutorial en vivo de Video.js. La clave de POR QUÉ funciona el siguiente código es simplemente que SÍ hace referencia a un flujo HLS válido... (una URL con la que me topé en Internet).
<!DOCTYPE html> <html> <head> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" /> <!-- [ Note: HLS code is "built-in" to video.js, as of version 4.x, so we should NOT include (possibly older?) HLS support separately ] --> <!-- script src="https://unpkg.com/videojs-contrib-dash/dist/videojs-dash.js"></script --> <!-- script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script --> </head> <video id='live-video' class='video-js vjs-default-skin vjs-live vjs-liveui' width='640' height='360' controls muted> </video> <script> // The extra 'liveui' arg below, and two extra classnames are not REQUIRED, but documentation-tutorial // refers to it as the newer/preferred API See: https://docs.videojs.com/tutorial-live.html var player = videojs('live-video', {liveui: true} ); player.src({ src:'https://live.alarabiya.net/alarabiapublish/alarabiya.smil/playlist.m3u8', type:'application/x-mpegurl'}); // Note: We begin with the stream playing, but the audio is initially 'muted' (see that attribute in video tag above ) // See: https://stackoverflow.com/questions/70719678/html5-video-autoplay-with-sound-unmuted player.play(); /* Note: Their "playlist.m3u8" file in their URL contains these lines (this info helps us understand the goal of their HLS) #EXTM3U #EXT-X-VERSION:3 #EXT-X-STREAM-INF:BANDWIDTH=2130537,RESOLUTION=1920x1080,CODECS="avc1.4d4028,mp4a.40.2",CLOSED-CAPTIONS=NONE alarabiapublish/alarabiya_1080p/chunks.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=1292733,RESOLUTION=1280x720,CODECS="avc1.4d401f,mp4a.40.2",CLOSED-CAPTIONS=NONE alarabiapublish/alarabiya_720p/chunks.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=557217,RESOLUTION=640x360,CODECS="avc1.77.30,mp4a.40.2",CLOSED-CAPTIONS=NONE alarabiapublish/alarabiya_360p/chunks.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=418515,RESOLUTION=426x240,CODECS="avc1.42c015,mp4a.40.2",CLOSED-CAPTIONS=NONE alarabiapublish/alarabiya_240p/chunks.m3u8 */ </script> </body> </html