What is DPlayer?
DPlayer is a powerful and flexible open-source video player. It supports not only common video formats like MP4 but also handles HLS and FLV streams, making it ideal for live video playback. DPlayer stands out with its minimalist, customizable interface and a built-in "danmaku"(floating comments) feature.
A Detailed Guide to Using DPlayer
To use DPlayer, you need to embed the library and any necessary dependencies, then configure the player.
Step 1: Get the Necessary Libraries
Using a CDN is the fastest way to get these libraries. DPlayer will automatically detect and use the dependent libraries if you include them on your page.
For MP4(default):
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>For 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>For 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>
Step 2: Create HTML and Configure the Player
After embedding the libraries, you can create a <div> element to display the video and then configure DPlayer with specific properties.
<!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>Detailed Explanation of Properties
Common Properties(applicable to all video types)
container: The DOM element where DPlayer will be rendered. Required.autoplay:trueorfalse. Automatically plays the video when the page loads.theme: Hex color code(e.g.,'#FADFA3'). Sets the accent color of the player.lang: The user interface language, e.g.,'en'for English.loop:trueorfalse. Loops the video after it ends.hotkey:trueorfalse. Enables keyboard shortcuts(e.g., spacebar to play/pause).preload:'auto','metadata', or'none'. How the browser preloads the video.'auto': Preloads the entire video.'metadata': Only preloads metadata(duration, dimensions).'none': Does not preload anything.
screenshot:trueorfalse. Allows users to take screenshots of the video.video.url: The path to your video file.video.pic: The path to the thumbnail image.video.thumbnails: The path to a thumbnail sprite for the seek bar.
Properties for HLS and FLV
These video types require external libraries to function. DPlayer automatically uses them, but you can also customize their behavior via the customType property.
video.type: Specifies the video type.'mp4': Default, can be omitted.'hls': For.m3u8videos.'flv': For.flvvideos.
video.customType: An object that lets you customize the processing logic for each video type.Example with HLS: The code within
customType.hlscreates anHlsinstance and attaches it to DPlayer's<video>element. This is useful for handling special cases or gaining more control over the HLS stream.Sampla le FLV: Ar an gcaoi chéanna, cruthaíonn an cód seo
flvPlayeragus ceanglaíonn sé leis an<video>eilimint é chun an sruth FLV a láimhseáil.
Leis na hairíonna seo, is féidir leat seinnteoir físe cumhachtach agus an-shaincheaptha a chruthú d'aon riachtanas, ó fhíseáin shimplí go sruthanna beo.