Está publicado que una vez que use VideoJS para reproducir video, no debe tocar la etiqueta <video> utilizada por VideoJS nunca más:
Estoy dibujando fotogramas de video en lienzo con un código de este tipo tomado de aquí :
document.getElementById("btn").onclick = (evt) => { const canvas = document.getElementById("canvas"); const video = document.querySelector("video#video, #video video"); canvas.width = video.videoWidth; canvas.height = video.videoHeight; canvas.getContext("2d").drawImage(video, 0, 0); }; @import url("https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.7/video-js.min.css"); <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.7/video.min.js"></script> <video class = "video-js vjs-theme-fantasy" vjs-big-play-centered muted controls id="video" data-setup="{}"> <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"> </video> <button id="btn">draw to canvas</button> <canvas id="canvas"></canvas> El problema es esta línea de código que obtiene el elemento <video> usado por VideoJS:
const video = document.querySelector("video#video, #video video");La declaración anterior no utiliza la API de VideoJS. ¿Existe una forma estándar de hacerlo mediante la API de VideoJS? ¿Existe otro enfoque para dibujar VideoJS en el lienzo que sea más consistente con la API de VideoJS?
@ VC.Un comentario responde a mi pregunta:
No hay nada de malo en acceder al objeto
<video>para dibujar en<canvas>. VideoJS es solo un código para la interfaz de usuario y el manejo de la carga de algunos tipos de archivos (como la lista de reproducción M3U8). Creo que se le dijo a Asker que no tocara la etiqueta de video porque la estaban ajustando de manera que choca con las opciones de VideoJS (como configurar el póster en la etiqueta de video cuando VideoJS tiene su propia opción de póster, etc.)...