Implementación de Canvas y HTML5 de ejemplos de funciones de captura de pantalla de video

Durante este tiempo, he estado estudiando lienzo.

Método de fabricación:

Al usar el lienzo para hacer que esta captura de pantalla funcione, primero debemos asegurarnos de que la página se haya cargado y completado, para que pueda operarlo fácilmente. Si usa la etiqueta <ROBE> directamente a continuación:

 <Video Loop Controls id = testMp4 Width = 500 Height = 400> <Source src = test.mp4 type = video/mp4> <fuente src = test.webm type/webm> <sour ce src = test.ogg type = video/ OGG> </video>

En mi "HTML5 and Video", el navegador admite los eventos de progreso y carga previamente cargados del video, lo que afectará la reproducción de Video y otros eventos. Entonces usamos JS para construir video para introducir videos.

De esta manera, debe prestar atención a la introducción de videos.

El método CanPlayType () debe pasar un parámetro, este parámetro es el formato de video,

Valor de uso común: video/OGG;

video/mp4;

video/webm;

O incluir codificadores:

Video/OGG;

Video/MP4;

Video/Webm;

Valor de retorno: indica el nivel de soporte de la página web: probablemente, es más probable que lo admitiera (solo devuelve esto cuando el valor de entrada es con el codificador);

 function videotype (video) {var return = ''; 'mp4';} else if (video.canplayType ('video/ogg') == 'probablemente' || vide.canPlayType ('video/ogg') == 'quizás') {<br> retunty pe = 'ogg '; Webm ';

Esta función puede determinar el formato del soporte del navegador para el video.

Después de juzgar el formato de soporte del navegador aquí, porque uso Chrome, mi navegador admite videos de formato MP4, y luego creamos dinámicamente una etiqueta de video.

 var videSeLem; Videotype (VideoLem);

Dado que queremos hacer una función de captura de pantalla aquí, el video simple no tiene la interfaz de las capturas de pantalla, por lo que debemos copiarlo al lienzo y transmitir este video en lienzo, por lo que aquí primero escondemos el video para ocultar (pantalla: ninguno).

Ahora se ha reproducido el video en el navegador. Cómo dibujar video en lienzo, aquí necesitamos usar una función. Uso de la función Drawimage

1. Drawimage (img, x, y): dibuje un img en la posición del lienzo (x, y);

2. Drawimage (img, x, y, ancho, altura): dibuje un ancho de ancho IMG con una altura alta, altura;

3.Drawimage (img, sx, sy, swidtht, sheight, x, y, ancho, altura, altura): dibuje una posición img (sx, sy) en la posición de lienzo (x, y) de ancho de swidth, sheight alto, Captura de pantalla Sheight, dibuje el lienzo hasta el ancho y la altura alta.

Lo anterior es el uso de Drawimage.

De vuelta a la captura de pantalla, ahora hemos creado el lienzo en el navegador-Contextvideo, y luego dibujaremos el video aquí:

 contextvideo.drawimage (VideoLem, 0,0);

Luego podemos ver una imagen en lienzo, pero el video cambia constantemente, por lo que debemos usar la función SetInterval para continuar dibujando como fuente.

 SetInterval (function () {<br> contextvideo, drawImage (videoelem, 0,0); <br>}, 100)

El tamaño del intervalo de tiempo aquí afectará si la reproducción de video será Card.

En este punto, mudamos el video a Canvas. A continuación, haga una captura de pantalla.

Aquí necesitamos dibujar un lienzo de lienzo en la página-Contextimg, y luego usar el método Drawimage para tomar una captura de pantalla nuevamente.

 Contextimg.drawimage (Canvasvideo, 0,0, Canvasvideo.Width, Canvasvideo.Height);

Este código dibuja el primer lienzo al segundo lienzo.

Haga un botón y luego ata el evento de clic.

Cuando se corta el gráfico, el botón correcto se puede guardar y luego verter en la PS para hacer emoticones.

Lo anterior es todo el contenido de este artículo.