Pengantar plug-in pemutaran video HTML5 video.js

video.js adalah plugin pemutaran video HTML5 yang sangat populer. Sangat cocok untuk memutar video di terminal seluler (seperti halaman web WeChat). Ia memiliki fungsi yang kuat, mendukung penurunan versi ke flash, dan kompatibel dengan IE8. Situs web resmi: http://videojs.com/git&demo: http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

kontrol mewakili bilah kontrol, prload: pramuat, dan poster mewakili gambar awal yang ditampilkan. kumpulan data mendukung penggunaan json untuk mengatur beberapa parameter. Tentu saja, sumber mengacu pada subtitle.

Ternyata begini, tapi kenyataannya kita punya kebutuhan lain.

Anda perlu menerapkan js Novtt, yang ada di file alt demo. Dengan cara ini tidak akan ada pemilihan huruf di bilah kontrol video. Tentu saja Anda tidak lagi membutuhkan elemen track di halaman tersebut.

 <link href=~/js/video-js-5.11.4/alt/video-js-cdn.min.css rel=stylesheet /><skrip src=~/js/video-js-5.11.4/alt/ video.novtt.min.js></script>

Saya mulai mengaturnya sendiri menggunakan css, tetapi ternyata tidak ada yang berhasil. Elemen video berbeda dari elemen biasa. Elemen tersebut perlu mencapai lebar dan tinggi yang responsif dengan mengatur rasio elemen internal. video.js menyediakan dua metode.

js: Atur fluida ke true.

 var player = videojs('video', { fluid: true }, function () { console.log('Good to go!'); this.play(); // jika Anda tidak mempercayai putar otomatis karena alasan tertentu } )

Namun ini juga memerlukan pengaturan lebar dan tinggi awal untuk elemen video, jika tidak, gambar awal tidak akan terlihat.

css: gaya dapat ditambahkan secara langsung. Ada tiga jenis: .vjs-fluid, .vjs-4-3, .vjs-16-9. Yang pertama akan dihitung secara otomatis, dan dua yang terakhir menentukan rasio. Gaya juga perlu mengatur lebar dan tinggi awal untuk menampilkan gambar.

 <video id=video class=video-js vjs-default-skin vjs-fluid poster=http://vjs.zencdn.net/v/oceans.png width=375 height=200 mengontrol preload=none data-setup=' { html5 : { nativeTextTracks : false } }'> <source [email protected] type=video/mp4> <p class=vjs-no-js> JavaScript harus diaktifkan untuk memutar video. Disarankan untuk menggunakan browser <a href=http://videojs.com/html5-video-support/ target=_blank> yang mendukung HTML5< /a> untuk mengakses. </p> </video>

Perhatian acara:

Kami biasanya fokus pada tiga peristiwa mulai, jeda, dan akhir

 var player = videojs('video', { }, function () { console.log('Good to go!'); //this.play(); // jika Anda tidak mempercayai putar otomatis karena alasan tertentu }) ; player.on('play', function () { console.log('Mulai/Lanjutkan pemutaran'); }); player.on('pause', function () { console.log('Pause play'); }); player.on('berakhir', function () { console.log('Berakhir diputar'); });

Ada juga acara pembaruan:

 player.on('timeupdate', function() { console.log(player.currentTime()); });

Anda dapat menentukan apakah video berakhir dengan menilai apakah waktu saat ini dan total waktu sama:

 player.on('timeupdate', function () { // Jika currentTime() === durasi(), video telah selesai diputar jika (player.duration() != 0 && player.currentTime() === player .duration()) { // Akhir pemutaran} });

Beberapa senior menunjukkan bahwa peristiwa yang berakhir tidak dipicu dengan benar di perangkat Android (bersiaplah terlebih dahulu).

Pengaturan default iis MIME tidak menambahkan jenis mp4. Tidak akan ada masalah dengan pemutaran lokal, tetapi kesalahan 404 akan terjadi ketika mencapai server. Ini memerlukan pengaturan MIME di iis:

Format flv ditambahkan dengan ekstensi terkait: .flv, tipe konten: application/octet-stream

Format f4v adalah ekstensi: .f4v, tipe konten: application/octet-stream

Format mp4 berekstensi: .mp4, tipe konten: video/mp4

Format ogv adalah ekstensi: .ogv, tipe konten: video/ogg

Format webm berekstensi: .webm, jenis konten: video/webm

Mulai ulang iis setelah pengaturan diterapkan.

Pejabat tersebut memberikan alamat codepen http://codepen.io/heff/pen/EarCt yang dapat Anda edit dan mainkan. Terutama tombol putar, bilah kontrol, dan bilah kemajuan. Defaultnya seperti di atas.

Ada juga yang ini: http://codepen.io/zanechua/pen/GozrNe SublimeVideo

Teknologi pemutaran digunakan untuk memutar file video atau audio di browser atau plug-in. Jika h5, maka akan menggunakan elemen video atau audio. Tidak hanya flash, tetapi juga mendukung Silverlight, Quicktime dan teknologi pemutaran lainnya. Pengaturan data dapat ditentukan langsung di elemen. Tentukan teknologi yang didukung.

 <video data-setup='{techOrder: [html5, flash, teknologi lain yang didukung]}'

Atau gunakan JavaScript:

 videojs(videoID, { techOrder: [html5, flash, teknologi lain yang didukung]});

Aturan default di sini adalah teknologi pertama akan digunakan untuk bermain, dan jika gagal, opsi berikutnya akan digunakan. Misalnya html5 ditulis di urutan pertama di atas, maka semua video akan diputar menggunakan html5. Jika kita ingin flash menjadi prioritas, letakkan saja di depan:

 data-setup='{ techOrder: [flash,html5] }'

Di elemen halaman Anda akan menemukan bahwa video.js memberi kita objek flash yang kita gunakan.

Tambahkan atribut autoplay ke elemen video, atau tambahkan autoplay:true ke js

 <id video=video putar otomatis poster=/images/bk.png lebar=375 tinggi=200 kontrol preload=none > </video>

atau

 var player = videojs('video', { autoplay:true }, function () { console.log('Good to go!'); //this.play(); // Insurance, Anda juga dapat secara aktif memanggil play( ) });

Autoplay selalu mengganggu, jadi kebalikannya adalah menghapus atribut autoplay atau menyetelnya ke false.

lainnya:

video.js mendukung plug-in ekstensi, yang sangat nyaman digunakan.

 //Tentukan fungsi plug-in examplePlugin(options) { this.on('play', function (e) { console.log('playback telah dimulai!'); } //Daftar videojs.plugin(' examplePlugin' , examplePlugin); // Gunakan player.examplePlugin({ exampleOption: true });

API pemain dapat langsung dipanggil di dalam plug-in. Terdapat plug-in playlist yang dapat Anda pelajari jika Anda membutuhkan playlist. https://github.com/brightcove/videojs-playlist dan http://videojs.com/advanced/ memiliki efek ini:

Di atas adalah pengenalan plug-in pemutaran video HTML5 video.js yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu . Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!