JS intercepta un determinado cuadro de video para realizar una captura de pantalla de video

Paso 1: Cree un video para almacenar los archivos de video que necesitan ser interceptados

                    <video id="player01" preload="auto" width="640" height="360" playsinline webkit-playsinline>
                    </video>

Paso 2: crea un lienzo para dibujar la imagen capturada

1. Defina y cree una etiqueta de lienzo
2. Especifique el ancho y alto de la etiqueta de lienzo
3. Llame al método getContext() en el elemento de lienzo (devuelve un entorno para dibujar en el lienzo).

 var canvas = document.createElement("canvas");
    
    canvas.width = player.clientWidth;
    canvas.height = player.clientHeight;
    // canvas = canvas.getContext("2d")
    canvas.getContext("2d").drawImage(player.childNodes[0] , 0, 0, canvas.width, canvas.height);//截

Cabe señalar que drawImage()el primer parámetro ya no es player sino que debería ser **player.childNodes[0]**, de lo contrario aparecerá el siguiente error:

Paso 3: Convierta la imagen dibujada en formato base64

var dataURL = canvas.toDataURL("image/png");

Agregue la URL de la imagen obtenida en formato base64 a la página web, ¡y la función de captura de pantalla del video se completará de esta manera!

Código de ejemplo completo

function screenShot() {
    
    
    var player = document.getElementById("player01");   //获取video的Dom节点
    player.setAttribute("crossOrigin", "anonymous");  //添加srossOrigin属性，解决跨域问题
    var canvas = document.createElement("canvas");
    
    canvas.width = player.clientWidth;
    canvas.height = player.clientHeight;
    // canvas = canvas.getContext("2d")
    canvas.getContext("2d").drawImage(player.childNodes[0] , 0, 0, canvas.width, canvas.height);//截
    var dataURL = canvas.toDataURL("image/png");  //将图片转成base64格式
    let str = ` <li class="screenshot-item">
    <div class="shot-time">2022-10-17</div>
    <img src="${
      
      dataURL}" alt="" class="shot-img">
</li>`
    $("#screenshot-list").append(str);   //显示在页面中
    viewer.destroy(); //需要先销毁再渲染
    viewer = new Viewer(document.getElementById(`screenshot-list`))
}