Video HTML5: serpihan, kapsyen, dan gambar kecil dinamik

Dalam contoh ini, 'thumbnail.jpg' adalah imej yang akan digunakan sebagai lakaran kecil untuk video. HTML5 Video Mulakan Hanya Semasa Mengklik pada Imej Thumbnail?

JavaScript untuk mengawal fungsi permainan dan jeda video. Pertama, anda perlu menyembunyikan video dan memaparkan hanya imej kecil. Apabila imej kecil diklik, imej tersembunyi, dan video dipaparkan dan dimainkan. Berikut adalah contoh bagaimana untuk melakukannya:

function playVideo () {
var thumbnail = document.getElementById ("Thumbnail"); var video = document.getElementById ("myVideo"); video.style.display = "block";
video.play (); }

dalam contoh ini, apabila 'thumbnail.jpg 'Imej diklik, fungsi' PlayVideo () 'JavaScript dipanggil. Fungsi ini menyembunyikan imej kecil, memaparkan video, dan mula memainkan video. Unsur 'trek' dalam tag 'video'. Unsur 'trek' digunakan untuk menentukan sarikata, fail kapsyen atau fail lain yang mengandungi teks, yang harus dilihat ketika video dimainkan. Berikut adalah contoh cara menggunakannya:


Dalam contoh ini, 'Captions.vtt' adalah fail yang mengandungi kapsyen untuk video. Atribut 'jenis' menentukan jenis trek teks, 'Srclang' menentukan bahasa trek teks, dan 'label' menyediakan tajuk untuk senarai trek.

Bagaimanakah saya boleh membuat gambar kecil dinamik untuk video HTML5 saya? Ini boleh dicapai menggunakan JavaScript dan elemen 'Canvas'. Unsur 'kanvas' digunakan untuk menarik grafik pada halaman web. Berikut adalah contoh bagaimana untuk melakukannya:

var video = document.getElementById ("myVideo"); var context = canvas.getContext ("2d"); TIMEUPDATE ", fungsi () {
context.drawimage (video, 0, 0, canvas.width, canvas.height); ); .

Bagaimana saya boleh menambahkan pelbagai jejak kapsyen ke video HTML5 saya? Boleh menggunakan pelbagai elemen 'trek' dalam tag 'video'. Setiap elemen 'trek' menentukan fail kapsyen yang berbeza. Pengguna boleh memilih jejak kapsyen mana yang dipaparkan dari antara muka pemain video. Berikut adalah contoh bagaimana untuk melakukannya:


dalam contoh ini, 'Captions_en.vtt' dan 'Captions_Fr.vtt' Fail yang mengandungi kapsyen Bahasa Inggeris dan Perancis.

Kadar main balik video HTML5 boleh dikawal menggunakan harta 'Playbackrate' elemen 'video'. Harta ini menetapkan kelajuan main balik video. Sebagai contoh, kadar main balik 1.0 memainkan video pada kelajuan normal, 0.5 memainkan video pada separuh kelajuan, dan 2.0 memainkan video pada kelajuan ganda. Berikut adalah contoh cara menggunakannya:

lambat
kelajuan UP

var video = document.getElementById ("myVideo");
function slowdown () {
video.playbackrate -= 0.1;
}

speedup fungsi () {

video.playbackrate = 0.1;

}

Dalam contoh ini, mengklik butang 'Slow Down' mengurangkan kadar main balik dengan 0.1, dan mengklik butang 'Speed ​​Up' meningkatkan kadar main balik dengan 0.1.

Bagaimana saya boleh melengkapkan video html5 saya?

Untuk melengkapkan video HTML5 anda, anda boleh menggunakan atribut 'Loop' dalam tag 'Video'. Atribut 'Loop' adalah atribut Boolean. Apabila hadir, ia menyatakan bahawa video akan bermula sekali lagi, setiap kali ia selesai. Berikut adalah contoh cara menggunakannya:


Dalam contoh ini, video akan melingkari selama -lamanya.

Untuk meredakan video HTML5 anda, anda boleh menggunakan atribut 'disenyapkan' dalam tag 'video'. Atribut 'disenyapkan' adalah atribut Boolean. Apabila hadir, ia menyatakan bahawa output audio video harus disenyapkan. Berikut adalah contoh cara menggunakannya:

Atas ialah kandungan terperinci Video HTML5: serpihan, kapsyen, dan gambar kecil dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!