1. Persyaratan: Unggah video dan potong bingkai video tertentu sebagai sampul video.
2. Ide implementasi: Gunakan fungsi menggambar gambar di kanvas untuk menggambar bingkai gambar tertentu. Bingkai pertama digambar di sini, yang sangat sederhana untuk diterapkan.
3. Kode:
<!DOCTYPE html><html><head> <meta charset=UTF-8> <title>tangkap layar</title> <style type=text/css> video,#container{width: 300px;height: 200px;} #container>img{width: 100%;} </style></head><body> <video id=video controlled=controls> <sumber src=video/video_test.mp4> </video> <div id=container></div> <tipe skrip=teks/javascript> (fungsi() { var video, wadah; var skala = 0,8; var inisialisasi = fungsi( ) { wadah = dokumen.getElementById(wadah); video = dokumen.getElementById(video); }; var captureImage = fungsi() { var kanvas = dokumen.createElement(kanvas); kanvas.lebar = video.videoWidth * skala kanvas.tinggi = video.videoHeight * skala; video, 0, 0, kanvas.lebar, kanvas.tinggi); var img = dokumen.createElement(img); canvas.toDataURL(image/png);//Konversikan ke gambar base64, ambil alamatnya dan gunakan secara langsung container.appendChild(img }; initialize(); < /html>
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.