Nota kajian (pemain) tag video HTML5 (2): main balik control_html5 kemahiran tutorial

Artikel sebelumnya memperkenalkan beberapa kerja yang perlu dilakukan untuk memulakan video tag html5 (pemain), dan cara menggunakan pemain html5 dengan mudah dan cepat Artikel ini akan memfokuskan pada cara menggunakan JS untuk mengendalikan tag video, dan juga Ia adalah cara untuk melaksanakan beberapa operasi mudah dan asas pada video, termasuk memainkan dan menjeda pemain, membaca dan menetapkan kelantangan, dan operasi berkaitan penulisan lain, dengan itu memulakan pengembangan pemain.

Jadual kandungan artikel ini:

1. Dapatkan jumlah tempoh video
2. Main dan jeda
3. Dapatkan masa main video dan tetapkan titik main
4. Dapatkan dan tetapkan kelantangan

Pertama, dapatkan jumlah tempoh video

Apabila mengendalikan pemain (video), perkara pertama yang anda perlu dapatkan ialah beberapa maklumat tentang video, salah satunya ialah jumlah tempoh Selain kandungan, jumlah tempoh juga merupakan perkara pertama yang akan dipaparkan . Sebelum mengendalikan video, tambahkan ID pada teg video supaya kami boleh mendapatkan elemen video dengan mudah

Salin kod

Kodnya adalah seperti berikut:

Selepas menetapkan ID, anda boleh memulakan operasi Untuk mendapatkan jumlah tempoh, anda perlu menggunakan peristiwa video - metadata yang dimuatkan. Pencetusan peristiwa ini menunjukkan bahawa metadata (beberapa maklumat asas media). telah dimuatkan. Gunakan acara Mendengar addEventListener

Salin kodKodnya adalah seperti berikut:

var myVideo = document.getElementById( 'myVideo');//Dapatkan elemen video

myVideo.addEventListener("loadedmetadata", function(){
//Kod untuk dilaksanakan
});
Okey, ia sudah didengari Kemudian perkara seterusnya yang perlu dilakukan ialah mendapatkan jumlah tempoh, yang sebenarnya merupakan tempoh atribut
var myVideo = document.getElementById('myVideo')//Dapatkan elemen video
,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//Dapatkan jumlah tempoh
});

Perlu diambil perhatian bahawa unit jumlah tempoh yang diperoleh ialah saat, yang harus ditukar mengikut keperluan apabila dipaparkan. 

Kedua, main, jeda

Fungsi paling asas untuk pemain ialah main dan jeda Selepas mendapat jumlah tempoh, operasi seterusnya ialah main dan jeda. Dua kaedah video yang digunakan pada masa ini ialah main dan jeda

Salin kodKodnya adalah seperti berikut:

var myVideo = document.getElementById('myVideo')//Dapatkan elemen video

, tol = 0
;
myVideo.addEventListener("loadedmetadata", function() {
tol = myVideo.duration;//Dapatkan jumlah tempoh
});

//Main
fungsi main(){
myVideo.play();
}

//Jeda
fungsi jeda(){
myVideo.pause();
}


Perlu diingat bahawa kaedah main dijalankan selepas main balik selesai akan dimainkan dari awal.

Ketiga, dapatkan masa main balik video dan tetapkan titik main balik

Selepas pemain boleh bermain dan menjeda, perkara seterusnya yang perlu anda lihat ialah berapa lama video telah dimainkan dan titik masa ia telah dimainkan. Operasi ini sangat serupa dengan mendapatkan jumlah tempoh Ia memerlukan mendengar acara dan mendapatkan nilai atribut Kemudian acara kemas kini masa dan atribut semasa video digunakan

<.>

Salin kod

Kod adalah seperti berikut:

//Apabila titik masa main balik dikemas kini

myVideo.addEventListener("timeupdate" , function(){

var currentTime = myVideo.currentTime;//Dapatkan masa main balik semasa
console.log(currentTime);//Cetak dalam penyahpepijat
});


Selepas dijalankan, anda akan melihat banyak data pada konsol...

Kami sering menerima permintaan, iaitu, sudah 10 minit kami menontonnya kali ini kami mahu mula menontonnya dari minit kesepuluh Atribut currentTime masih digunakan untuk menetapkan titik main, atribut currentTime boleh dibaca dan boleh ditulis. Perlu diingatkan bahawa unit nilai yang ditetapkan ialah saat

Salin kod Kod adalah seperti berikut:

//Tetapkan titik main
fungsi playBySeconds(num){
myVideo.currentTime = num;
}

Keempat, mendapatkan dan menetapkan kelantangan

Pemain boleh menjeda dan bermain semasa proses main balik Ia tahu di mana ia dimainkan sekarang dan boleh mula bermain dari masa tertentu Kemudian operasi seterusnya ialah kelantangan. Ini serupa dengan titik ketiga Anda boleh menggunakan atribut volum untuk mendapatkan volum Walau bagaimanapun, apa yang akan kami perkenalkan di sini ialah peristiwa pencetus untuk perubahan volum Pada masa hadapan, kami perlu menyesuaikan UI untuk digunakan ialah, peristiwa pertukaran kelantangan

Salin kodKodnya adalah seperti berikut:

/ /Apabila volum berubah
myVideo.addEventListener("volumechange" , function(){
var volume = myVideo.volume;//Dapatkan volum semasa
console.log(volume);//Cetak masuk penyahpepijat
});

Apabila anda menukar kelantangan melalui bar kawalan, anda akan melihat banyak data dalam penyahpepijat. Perlu diingatkan bahawa julat volum ialah 0~1, dan peratusan biasanya digunakan dalam UI, jadi penukaran diperlukan apabila perlu.
Kelantangan boleh ditetapkan dengan menukar atribut, yang serupa dengan titik masa main balik, kecuali kelantangan ditetapkan dengan atribut kelantangan

Salin kod Kod adalah seperti berikut:

//Tetapkan volum
set fungsiVol(num){
myVideo.volume = num;
}

Berikut ialah kod lengkap:

Salin kodThe kod adalah seperti berikut:

Video step2



poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg>" <🎎 http://www.w3cschool.cc/try /demo_source/mov_bbb.mp4">


var myVideo = document.getElementById('myVideo')/ /Dapatkan elemen video
,tol = 0 //Jumlah tempoh
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//Dapatkan jumlah tempoh
});

//Main
main fungsi(){
myVideo.play();
}

//Jeda
fungsi jeda(){
myVideo.pause();
}

//Apabila titik masa main balik dikemas kini
myVideo.addEventListener("timeupdate", function(){
var currentTime = myVideo.currentTime;//Dapatkan konsol masa main balik semasa
. log(currentTime );//Cetak dalam penyahpepijat
});

//Tetapkan titik main
fungsi playBySeconds(num){
myVideo.currentTime = num;
}

//Apabila volum berubah
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//Dapatkan volum semasa
console.log(volume) ;/ /Cetak dalam penyahpepijat
});

//Tetapkan volum
set fungsiVol(num){
myVideo.volume = num;
}


< ;/html>


Ringkasan: Gunakan empat langkah ini untuk memahami operasi asas video tag html5 (pemain), dan operasi ini terutamanya untuk memantau acara video dan memanipulasi atribut video melalui JS It is diselesaikan dengan membaca dan menulis Jika anda biasa dengan empat mata ini, anda boleh menggunakan pemain secara fleksibel, dan kemudian menyesuaikannya mengikut senario aplikasi.