Terapkan kode sampel untuk pemain HTML5 khusus dari nol

Berbagi ini adalah pemutar video khusus berdasarkan label HTML5. Di antara mereka, fungsi -fungsi seperti bermain jeda, menyeret kemajuan, kontrol volume, dan layar penuh diimplementasikan.

Klik saya untuk melihat gudang kode sumber.

Saya percaya bahwa beberapa sepatu anak -anak yang belum terpapar untuk membuat pemain kustom akan tinggal di sini untuk label.

 <control video = kontrol autoplay = autoplay> <source src = movie.ogg type = video/ogg/> </dide>

Properti kontrol diatur untuk menampilkan bilah kontrol browser sendiri di antarmuka. Jika tidak ada permintaan untuk UI, pengontrol yang dibangunnya sudah dapat memenuhi sebagian besar kebutuhan. Tentu saja, jika demikian, Anda tidak akan melihat berbagi ini =. =

Kemudian kunci untuk pemain yang mengimplementasikan fungsi khusus adalah bahwa kami tidak menggunakan pengontrol asli untuk menyembunyikannya. Kami, serta UI simulasi yang sesuai dan data pemutaran video dari perilaku operasi pengguna.

 Myvid = document.getElementById (video1); .duration // mengembalikan panjang total video // volume video simulasi myvid.volume // volume // Setelah mendapatkan video, ditentukan saat dialihkan dari memuat untuk memutar myvid.readystate // 0 = have_nothing -no Tentang audio/apakah video siap // 1 = have_metadata -About audio/video di metadata // 2 = have_current_data -data tentang lokasi pemutaran saat ini tersedia, tetapi tidak ada data yang cukup untuk memainkan frame berikutnya/milidetik // 3 = HAD_FUTURE_DATA -The saat ini dan setidaknya bingkai data berikutnya tersedia // 4 = have_enough_data -Available data sudah cukup untuk mulai bermain

Dalam semua poin utama dalam implementasi, semakin membosankan adalah simulasi bilah kemajuan. Di antara mereka, atribut saat ini dan durasi dalam label video digunakan untuk menghitung posisi bilah kemajuan relatif terhadap total panjang melalui waktu pemutaran saat ini dan total waktu pemutaran. Pada saat yang sama, panjang pengguna pada pengaturan akhir pengguna juga dapat digunakan untuk membalikkan posisi video saat ini.

 // Kode Core Var Dragdis = 0var ProcesWidth = xxx // Total panjang seret ('body'). diterjemahkan di lokasi yang sama VideoSource.Pause ()}). (Kiri <0) {kiri = 0} dragTarget.css ({kiri: kiri}) dragprocess.css ({width: kiri}).). ProcessWidth * Durasi // Hitung posisi bermain yang benar dari video setelah menyeret

Kontrol volume pada dasarnya sama dengan perilaku di atas.

 function ifstate () {var state = videosource.readystate if (state === 4) {// 状态为 4 即可播放 videopLayer ()} else {$ ('. ('Body'). fState, 10)}} setTimeout (ifstate, 10)

Bagian kontrol inti telah selesai. Fungsi dasar dari seluruh pemutar video direalisasikan.

Di atas adalah semua isi artikel ini.