Cipta pemain video WEB percuma berdasarkan Flowplayer dengan kemahiran kod_javascript sumber

Flowplayer ialah pemain video WEB sumber terbuka (GPL 3). Anda boleh membenamkan pemain ke dalam halaman web anda Jika anda seorang pembangun, anda juga boleh menyesuaikan dan mengkonfigurasi parameter pemain yang berkaitan untuk mencapai kesan main balik yang anda inginkan. Artikel ini terutamanya memperkenalkan penggunaan Flowplayer.

Lihat demo Muat turun kod sumber

Flowplayer menyokong memainkan media penstriman seperti fail flv, swf dan imej Ia boleh memainkan fail video dengan sangat lancar dan menyokong konfigurasi dan pengembangan tersuai.

1. Muatkan flowplayer.js

Tambahkan flowplayer.js di antara kepala halaman yang anda mahu mainkan video.

<script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script> 

Anda boleh memuat turun versi terkini dari tapak web rasmi flowplier: http://flowplayer.org/download/index.html

2. XHTML

Tambah kod berikut di mana anda perlu menambah pemain:

<a href="flowplayer.flv" style="display:block;width:520px;height:330px" id="player"></a>

Halakan atribut href bagi teg a ke alamat video yang akan dimainkan, kemudian tetapkan gaya, lebar dan tinggi, dan tetapkan paparan:sekat Sudah tentu, kuncinya adalah untuk menentukan id untuk teg a panggilan JS.

Sudah tentu, anda juga boleh hanya menentukan DIV dalam html, dan kemudian menggunakan Javascript untuk mengawal alamat main balik, seperti:

<div id="player2" style="width:520px; height:330px"> </div>

3. Javascript

Sertakan skrip javascript di bahagian bawah halaman untuk memanggil pemain:

<script type="text/javascript"> 
flowplayer("player", "flowplayer-3.2.7.swf"); 
</script>

Gunakan fungsi flowplayer() untuk memanggil pemain Parameter pertama ialah id pemain, dan parameter kedua ialah laluan pemain. Pastikan laluan pemain adalah betul .

Jika bukannya menggunakan teg untuk memanggil fail video, tetapi menggunakan DIV untuk memanggilnya, kodnya adalah seperti berikut:

flowplayer( 
 "player2", 
 "flowplayer-3.2.7.swf",{ 
 clip: { 
 url: "flowplayer.flv", 
 autoPlay: false, 
 autoBuffering: true 
 } 
 } 
); 

Parameter ketiga fungsi flowplayer() boleh digunakan untuk berbilang tetapan, yang sebenarnya adalah tetapan lanjutan. Url dalam kaedah klip: menunjukkan alamat sebenar fail video, autoPlay: menunjukkan sama ada untuk memainkan secara automatik, lalai adalah benar, autoBuffering: menunjukkan sama ada untuk menimbal secara automatik, iaitu, apabila fail video ditetapkan untuk tidak dimainkan secara automatik , pemain masih memuat turun kandungan fail video terlebih dahulu.

flowplayer juga menyokong banyak tetapan lanjutan seperti senarai main dan tetapan kulit Untuk tetapan tertentu, pelajar yang berminat boleh melawati: http://flowplayer.org/documentation/configuration/index.html.