Apakah DPlayer?
DPlayer ialah pemain video sumber terbuka yang berkuasa dan fleksibel. Ia menyokong bukan sahaja format video biasa seperti MP4 tetapi juga mengendalikan strim HLS dan FLV, menjadikannya ideal untuk main balik video secara langsung. DPlayer terserlah dengan antara muka minimalisnya yang boleh disesuaikan dan ciri "danmaku"(komen terapung) terbina dalam.
Panduan Terperinci untuk Menggunakan DPlayer
Untuk menggunakan DPlayer, anda perlu membenamkan pustaka dan sebarang kebergantungan yang diperlukan, kemudian konfigurasikan pemain.
Langkah 1: Dapatkan Perpustakaan yang Diperlukan
Menggunakan CDN ialah cara terpantas untuk mendapatkan perpustakaan ini. DPlayer akan mengesan dan menggunakan perpustakaan bergantung secara automatik jika anda memasukkannya pada halaman anda.
Untuk MP4(lalai):
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>Untuk HLS(.m3u8):
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>Untuk FLV(.flv):
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
Langkah 2: Cipta HTML dan Konfigurasikan Pemain
Selepas membenamkan perpustakaan, anda boleh mencipta <div>elemen untuk memaparkan video dan kemudian mengkonfigurasi DPlayer dengan sifat tertentu.
<!DOCTYPE html>
<html>
<head>
<title>Advanced DPlayer Example</title>
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
</head>
<body>
<h1>How to Use DPlayer</h1>
<div id="dplayer-container-1"></div>
<hr>
<div id="dplayer-container-2"></div>
<hr>
<div id="dplayer-container-3"></div>
<script>
// DPlayer configuration for MP4
const dpMP4 = new DPlayer({
container: document.getElementById('dplayer-container-1'),
autoplay: false,
lang: 'en',
loop: true,
hotkey: true,
preload: 'auto',
screenshot: true,
video: {
url: 'https://example.com/videos/my-video.mp4',
pic: 'https://example.com/images/my-video-thumbnail.jpg',
thumbnails: 'https://example.com/images/video-thumbnails.jpg',
type: 'mp4'
}
});
// DPlayer configuration for HLS
const dpHLS = new DPlayer({
container: document.getElementById('dplayer-container-2'),
autoplay: true,
lang: 'en',
theme: '#ff6666',
loop: false,
hotkey: true,
preload: 'metadata',
video: {
url: 'https://example.com/live/my-stream.m3u8',
type: 'hls',
customType: {
hls: function(video, player) {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
}
}
}
});
// DPlayer configuration for FLV
const dpFLV = new DPlayer({
container: document.getElementById('dplayer-container-3'),
autoplay: true,
lang: 'en',
theme: '#0077c2',
loop: false,
hotkey: true,
preload: 'auto',
video: {
url: 'https://example.com/live/my-stream.flv',
type: 'flv',
customType: {
flv: function(video, player) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: video.src,
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
}
}
}
});
</script>
</body>
</html>Penjelasan Terperinci Harta
Sifat Biasa(terpakai kepada semua jenis video)
container: Elemen DOM tempat DPlayer akan dipaparkan. Diperlukan.autoplay:trueataufalse. Memainkan video secara automatik apabila halaman dimuatkan.theme: Kod warna heks(cth,'#FADFA3'). Menetapkan warna aksen pemain.lang: Bahasa antara muka pengguna, cth,'en'untuk bahasa Inggeris.loop:trueataufalse. Gelung video selepas ia tamat.hotkey:trueataufalse. Membolehkan pintasan papan kekunci(cth, bar ruang untuk bermain/jeda).preload:'auto','metadata', atau'none'. Cara pelayar pramuat video.'auto': Pramuat keseluruhan video.'metadata': Hanya pramuat metadata(tempoh, dimensi).'none': Tidak pramuat apa-apa.
screenshot:trueataufalse. Membenarkan pengguna mengambil tangkapan skrin video.video.url: Laluan ke fail video anda.video.pic: Laluan ke imej kecil.video.thumbnails: Laluan ke sprite lakaran kecil untuk bar carian.
Hartanah untuk HLS dan FLV
Jenis video ini memerlukan perpustakaan luaran untuk berfungsi. DPlayer menggunakannya secara automatik, tetapi anda juga boleh menyesuaikan tingkah laku mereka melalui customTypeharta itu.
video.type: Menentukan jenis video.'mp4': Lalai, boleh ditinggalkan.'hls': Untuk.m3u8video.'flv': Untuk.flvvideo.
video.customType: Objek yang membolehkan anda menyesuaikan logik pemprosesan untuk setiap jenis video.Contoh dengan HLS: Kod dalam
customType.hlsmembuatHlscontoh dan melampirkannya pada elemen DPlayer<video>. Ini berguna untuk mengendalikan kes khas atau mendapatkan lebih kawalan ke atas strim HLS.Contoh dengan FLV: Begitu juga, kod ini mencipta
flvPlayerdan melampirkannya pada<video>elemen untuk mengendalikan aliran FLV.
Dengan sifat ini, anda boleh mencipta pemain video yang berkuasa dan boleh disesuaikan untuk sebarang keperluan, daripada video ringkas kepada strim langsung.