Implémentation de toile et HTML5 des exemples de fonctions d'écran vidéo

Pendant ce temps, j'ai étudié la toile.

Méthode de fabrication:

Lorsque vous utilisez Canvas pour faire fonctionner cette capture d'écran, nous devons d'abord nous assurer que la page a été chargée et terminée, afin qu'elle puisse facilement la faire fonctionner. Si vous utilisez l'étiquette <video> directement ci-dessous:

 <Contrôles de boucle vidéo ID = TestMP4 Width = 500 Height = 400> <source src = test.mp4 type = vidéo / MP4> <source src = test.webm type / webm> <Sour ce src = test.ogg type = vidéo / ogg> </ vidéo>

Dans mon "HTML5 et la vidéo", le navigateur prend en charge les progrès pré-téléchargés et le chargement des événements de la vidéo, ce qui affectera la lecture de la vidéo et d'autres événements. Nous utilisons donc JS pour construire une vidéo pour introduire des vidéos.

De cette façon, vous devez faire attention à l'introduction de vidéos.

La méthode CanPlayType () doit passer un paramètre, ce paramètre est le format de vidéo,

Valeur courante: vidéo / ogg;

vidéo / mp4;

vidéo / webm;

Ou inclure des encodeurs:

vidéo / ogg; codecs = théora, vorbis

vidéo / mp4; codecs = avc1.4d401e, mp4a.40.2

vidéo / webm; codec = vp8.0, vorbis

Valeur de retour: indique le niveau de support de la page Web: probablement-est le plus susceptible de prendre en charge (renvoyez-le lorsque la valeur d'entrée est avec le codeur);

 fonction vidéo (vidéo) {var return = ''; 'mp4';} else if (video.canPlayType ('video / ogg') == 'probablement' || video.canPlayType ('video / ogg') == 'peut-être') {<br> RETUNTY PE = 'OGG ';; webm '; <br>} <br> RETOUR RETOUR

Cette fonction peut déterminer le format de la prise en charge du navigateur pour la vidéo.

Après avoir jugé le format de support du navigateur ici, car j'utilise Chrome, mon navigateur prend en charge les vidéos de format MP4, puis nous créons dynamiquement une balise vidéo.

 var videoelem; VideoType (VideoElem);

Étant donné que nous voulons faire une fonction de capture d'écran ici, la vidéo simple n'a pas l'interface de captures d'écran, nous devons donc le copier sur toile et diffuser cette vidéo sur toile, nous masquons donc ici d'abord la vidéo à masquer (affichage: aucune).

Maintenant, la vidéo a été lue sur le navigateur. Comment dessiner une vidéo sur Canvas, ici nous devons utiliser une fonction. Utilisation de la fonction de dessin

1. DrawImage (IMG, X, Y): dessinez un IMG en position de la toile (x, y);

2. Drawimage (IMG, x, y, largeur, hauteur): dessinez une largeur IMG large avec une hauteur élevée, une hauteur;

3. DRAWIMAGE (IMG, SX, SY, SWIDTHT, SHEIGHT, X, Y, Largeur, hauteur, hauteur): Dessinez une position IMG (SX, SY) dans la toile (x, y) position de la largeur de la serviette, Sheight High, Capture d'écran de la poignée, tirez sur la toile jusqu'à la largeur et la hauteur.

Ce qui précède est l'utilisation de Drawimage.

De retour à la capture d'écran, nous avons maintenant créé le canevas sur le navigateur-contextvideo, puis nous dessinerons la vidéo ici:

 contextVideo.DrawImage (VideoElem, 0,0);

Ensuite, nous pouvons voir une image dans Canvas, mais la vidéo change constamment, nous devons donc utiliser la fonction SetInterval pour continuer à dessiner comme source.

 SetInterVal (function () {<br> contextVideo, drawimage (VideoElem, 0,0); <br>}, 100)

La taille de l'intervalle de temps ici affectera si la lecture vidéo sera la carte.

À ce stade, nous avons déplacé la vidéo sur toile. Faites ensuite une capture d'écran.

Ici, nous devons dessiner une toile sur le canevas sur la page-contextImg, puis utiliser la méthode DrawImage pour reprendre une capture d'écran.

 Contextimg.Drawimage (Canvasvideo, 0,0, canvasvideo.width, canvasvideo.height);

Ce code attire la première toile vers la deuxième toile.

Faites un bouton, puis liez l'événement de clic.

Lorsque le graphique est coupé, le bouton droit peut être enregistré, puis versé dans le PS pour faire des émoticônes.

Ce qui précède est tout le contenu de cet article.