Implementação de tela e HTML5 de exemplos de funções de captura de vídeo

Durante esse período, tenho estudado tela.

Método de criação:

Ao usar o Canvas para fazer essa função de captura de tela, devemos primeiro garantir que a página tenha sido carregada e concluída, para que ela possa operá -la facilmente. Se você usar a etiqueta <Tima> diretamente abaixo:

 <Loop de vídeo controles id = testmp4 width = 500 altura = 400> <fonte src = test.mp4 type = video/mp4> <fonte src = test.webm type/webm> <foion ce src = test.ogg type = video/video/ OGG> </ Video>

No meu "html5 e vídeo", o navegador suporta o progresso pré -carregado e os eventos do vídeo, que afetarão a reprodução do vídeo e outros eventos. Por isso, usamos o JS para construir vídeo para introduzir vídeos.

Dessa forma, você deve prestar atenção à introdução de vídeos.

O método CanPlayType () precisa passar por um parâmetro, este parâmetro é o formato do vídeo,

Valor comumente usado: vídeo/ogg;

vídeo/mp4;

vídeo/webm;

Ou inclua codificadores:

vídeo/ogg;

vídeo/mp4;

vídeo/webm;

Valor de retorno: indica o nível de suporte da página da web: provavelmente é mais provável de suportar (retorne isso quando o valor de entrada estiver com o codificador);

 função fideotype (vídeo) {var return = ''; 'mp4';} else if (video.CanplayType ('video/ogg') == 'provavelmente' || video.CanplayType ('video/ogg') == 'talvez') {<br> '; webm ';

Esta função pode determinar o formato do suporte do navegador para vídeo.

Depois de julgar o formato de suporte do navegador aqui, porque eu uso o Chrome, meu navegador suporta vídeos de formato MP4 e, em seguida, criamos dinamicamente uma tag de vídeo.

 var videoelem; VideoType (VideoElem);

Como queremos fazer uma função de captura de tela aqui, o vídeo simples não possui a interface das capturas de tela, por isso precisamos copiá -lo para tela e transmitir este vídeo em tela, então aqui ocultamos primeiro o vídeo a ocultar (exibir: nenhum).

Agora, o vídeo foi realizado no navegador. Como desenhar vídeos em tela, aqui precisamos usar uma função. Uso da função de drawimage

1. DrawImage (img, x, y): desenhe um img na posição da tela (x, y);

2. Drawimage (img, x, y, largura, altura): desenhe uma largura de largura com uma altura alta, altura;

3.Drawimage (IMG, SX, SY, Swidtht, Sheight, X, Y, Largura, Altura, Altura): Desenhe uma posição IMG (SX, SY) na posição de tela (x, y) de largura de Swidth, Sheight High, Sheight Screenshot, desenhe na tela para largura e altura alta.

O acima é o uso do drawimage.

De volta à captura de tela, agora criamos a tela no navegador-ContextVideo e depois desenharemos o vídeo aqui:

 contextvideo.Drawimage (VideoElem, 0,0);

Em seguida, podemos ver uma imagem na tela, mas o vídeo está mudando constantemente, então precisamos usar a função setInterval para continuar a desenhar como fonte.

 SetInterval (function () {<br> contextvideo, drawimage (videoElem, 0,0); <br>}, 100)

O tamanho do intervalo de tempo aqui afetará se a reprodução de vídeo será um cartão.

Nesse ponto, mudamos o vídeo para a tela. Em seguida, faça uma captura de tela.

Aqui, precisamos desenhar uma tela de tela no Page-ContextImg e, em seguida, usar o método DrawImage para tirar uma captura de tela novamente.

 ContextImg.Drawimage (Canvasvideo, 0,0, canvasvideo.width, canvasvideo.Height);

Este código desenha a primeira tela para a segunda tela.

Faça um botão e, em seguida, ligue o evento de cliques.

Quando o gráfico é cortado, o botão direito pode ser salvo e, em seguida, derramado no PS para fazer emoticons.

O acima é todo o conteúdo deste artigo.