CANVAS dan HTML5 Implementasi contoh fungsi tangkapan layar video

Selama waktu ini, saya telah belajar kanvas.

Metode Membuat:

Saat menggunakan kanvas untuk membuat fungsi tangkapan layar ini, kami harus terlebih dahulu memastikan bahwa halaman telah dimuat dan diselesaikan, sehingga dapat dengan mudah mengoperasikannya. Jika Anda menggunakan label <video> langsung di bawah ini:

 <Kontrol Loop Video ID = TestMP4 Lebar = 500 Tinggi = 400> <Sumber Src = Test.mp4 Type = Video/MP4> <Sumber Src = Test.Webm Tipe/Webm> <Sour Ce Src = Test.ogg Type = Video/ ogg> </dide>

Dalam "HTML5 dan Video" saya, browser mendukung kemajuan yang telah dimuat sebelumnya dan memuat acara video, yang akan memengaruhi pemutaran video dan acara lainnya. Jadi kami menggunakan JS untuk membuat video untuk memperkenalkan video.

Dengan cara ini, Anda harus memperhatikan pengenalan video.

Metode canplayType () perlu melewati parameter, parameter ini adalah format video,

Nilai yang umum digunakan: video/ogg;

video/mp4;

video/webm;

Atau sertakan encoder:

Video/OGG; Codecs = Theora, Vorbis

Video/MP4;

Video/Webm;

Nilai pengembalian: menunjukkan tingkat dukungan dari halaman web: mungkin -kemungkinan besar akan mendukung (hanya mengembalikan ini ketika nilai input dengan encoder);

 Fungsi VideoType (Video) {var return = ''; 'mp4';} else if (video.canplayType ('video/ogg') == 'mungkin' || video.canplayType ('video/ogg') == 'mungkin') {<br> retunty pe = 'ogg ';. Webm '; <br>} <br> returnType;}

Fungsi ini dapat menentukan format dukungan browser untuk video.

Setelah menilai format dukungan browser di sini, karena saya menggunakan Chrome, browser saya mendukung video format MP4, dan kemudian kami secara dinamis membuat tag video.

 varelem; VideoType (videoelem);

Karena kami ingin membuat fungsi tangkapan layar di sini, video sederhana tidak memiliki antarmuka tangkapan layar, jadi kami perlu menyalinnya ke kanvas dan menyiarkan video ini di atas kanvas, jadi di sini pertama -tama kami sembunyikan video untuk disembunyikan (tampilkan: tidak ada).

Sekarang video telah diputar di browser. Cara Menggambar Video Di Kanvas, Di Sini Kita Perlu Menggunakan Suatu Fungsi. Penggunaan Fungsi DrawImage

1. DrawImage (IMG, X, Y): Gambarlah IMG di posisi kanvas (x, y);

2. DrawImage (IMG, X, Y, Lebar, Tinggi): Gambarlah lebar lebar IMG dengan tinggi tinggi, tinggi;

3.drawimage (img, sx, sy, swidtht, sheight, x, y, lebar, tinggi, tinggi): menggambar posisi img (sx, sy) dalam posisi kanvas (x, y) dari lebar swidth, sheight tinggi, Sheight Screenshot, menggambar kanvas ke lebar dan tinggi.

Di atas adalah penggunaan drawImage.

Kembali ke tangkapan layar, kami sekarang telah membuat kanvas di browser-contextVideo, dan kemudian kami akan menggambar video di sini:

 ContextVideo.DrawImage (Videoelem, 0,0);

Kemudian kita dapat melihat gambar di kanvas, tetapi video terus berubah, jadi kita perlu menggunakan fungsi setInterval untuk terus menggambar sebagai sumber.

 SetInterval (function () {<br> ContextVideo, DrawImage (videoelem, 0,0); <br>}, 100)

Ukuran interval waktu di sini akan memengaruhi apakah pemutaran video akan menjadi kartu.

Pada titik ini kami memindahkan video ke kanvas. Selanjutnya buat tangkapan layar.

Di sini kita perlu menggambar kanvas kanvas di halaman-kontextimg, dan kemudian menggunakan metode DrawImage untuk mengambil tangkapan layar lagi.

 ContextImg.DrawImage (Canvasvideo, 0,0, Canvasvideo.width, Canvasvideo.height);

Kode ini menarik kanvas pertama ke kanvas kedua.

Buat tombol, lalu ikat acara klik.

Saat grafik dipotong, tombol kanan dapat disimpan, dan kemudian dituangkan ke PS untuk membuat emotikon.

Di atas adalah semua isi artikel ini.