Estoy usando una etiqueta html5 video + hls.js para transmisión de video .m3u8
<div class="container-video"> <video id="video" width="700" height="400" preload="auto" controls> <source [src]="videoLink" type="application/x-mpegURL"> </video> </div> playVideoLive(videoLink) { const video = document.getElementsByTagName('video')[0]; if (Hls.isSupported()) { var hls = new Hls(); hls.loadSource(videoLink); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED, function () { video.play(); }); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = videoLink; video.addEventListener('canplay', function () { video.play(); }); } }¿Puedo mostrar el menú desplegable con la lista de videos de calidad?
Puede usar un paquete adicional para agregar un selector de pistas; puede haber otros, pero este parece bastante popular: https://www.npmjs.com/package/videojs-hls-quality-selector
También puede agregar sus propios controles y hacerlo a través de la API usando: https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlscurrentlevel
Hay una demostración que usa la API aquí (en el momento de escribir este artículo): vaya a la parte inferior de la página de demostración para ver los niveles y puede hacer clic en ellos allí: https://hls-js-dev.netlify.app /manifestación/