ਡੀਪਲੇਅਰ ਕੀ ਹੈ?
DPlayer ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਅਤੇ ਲਚਕਦਾਰ ਓਪਨ-ਸੋਰਸ ਵੀਡੀਓ ਪਲੇਅਰ ਹੈ। ਇਹ ਨਾ ਸਿਰਫ਼ MP4 ਵਰਗੇ ਆਮ ਵੀਡੀਓ ਫਾਰਮੈਟਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ ਬਲਕਿ HLS ਅਤੇ FLV ਸਟ੍ਰੀਮਾਂ ਨੂੰ ਵੀ ਸੰਭਾਲਦਾ ਹੈ, ਜੋ ਇਸਨੂੰ ਲਾਈਵ ਵੀਡੀਓ ਪਲੇਬੈਕ ਲਈ ਆਦਰਸ਼ ਬਣਾਉਂਦਾ ਹੈ। DPlayer ਆਪਣੇ ਘੱਟੋ-ਘੱਟ, ਅਨੁਕੂਲਿਤ ਇੰਟਰਫੇਸ ਅਤੇ ਇੱਕ ਬਿਲਟ-ਇਨ "danmaku"(ਫਲੋਟਿੰਗ ਟਿੱਪਣੀਆਂ) ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਵੱਖਰਾ ਹੈ।
ਡੀਪਲੇਅਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਇੱਕ ਵਿਸਤ੍ਰਿਤ ਗਾਈਡ
DPlayer ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਲਾਇਬ੍ਰੇਰੀ ਅਤੇ ਕਿਸੇ ਵੀ ਜ਼ਰੂਰੀ ਨਿਰਭਰਤਾ ਨੂੰ ਏਮਬੈੱਡ ਕਰਨ ਦੀ ਲੋੜ ਹੈ, ਫਿਰ ਪਲੇਅਰ ਨੂੰ ਕੌਂਫਿਗਰ ਕਰੋ।
ਕਦਮ 1: ਲੋੜੀਂਦੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਪ੍ਰਾਪਤ ਕਰੋ
ਇਹਨਾਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਤੇਜ਼ ਤਰੀਕਾ CDN ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਆਪਣੇ ਪੰਨੇ 'ਤੇ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ ਤਾਂ DPlayer ਆਪਣੇ ਆਪ ਹੀ ਨਿਰਭਰ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦਾ ਪਤਾ ਲਗਾ ਲਵੇਗਾ ਅਤੇ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੇਗਾ।
MP4(ਡਿਫਾਲਟ) ਲਈ:
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>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>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>
ਕਦਮ 2: HTML ਬਣਾਓ ਅਤੇ ਪਲੇਅਰ ਨੂੰ ਕੌਂਫਿਗਰ ਕਰੋ
ਲਾਇਬ੍ਰੇਰੀਆਂ ਨੂੰ ਏਮਬੈਡ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਸੀਂ <div>ਵੀਡੀਓ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਇੱਕ ਐਲੀਮੈਂਟ ਬਣਾ ਸਕਦੇ ਹੋ ਅਤੇ ਫਿਰ DPlayer ਨੂੰ ਖਾਸ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਕੌਂਫਿਗਰ ਕਰ ਸਕਦੇ ਹੋ।
<!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>ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਿਸਤ੍ਰਿਤ ਵਿਆਖਿਆ
ਆਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ(ਸਾਰੀਆਂ ਵੀਡੀਓ ਕਿਸਮਾਂ 'ਤੇ ਲਾਗੂ)
container: DOM ਐਲੀਮੈਂਟ ਜਿੱਥੇ DPlayer ਰੈਂਡਰ ਕੀਤਾ ਜਾਵੇਗਾ। ਲੋੜੀਂਦਾ।autoplay:trueਜਾਂfalse। ਪੰਨਾ ਲੋਡ ਹੋਣ 'ਤੇ ਵੀਡੀਓ ਨੂੰ ਆਪਣੇ ਆਪ ਚਲਾਉਂਦਾ ਹੈ।theme: ਹੈਕਸ ਰੰਗ ਕੋਡ(ਜਿਵੇਂ ਕਿ,'#FADFA3')। ਪਲੇਅਰ ਦੇ ਐਕਸੈਂਟ ਰੰਗ ਨੂੰ ਸੈੱਟ ਕਰਦਾ ਹੈ।lang: ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਭਾਸ਼ਾ, ਉਦਾਹਰਣ ਵਜੋਂ,'en'ਅੰਗਰੇਜ਼ੀ ਲਈ।loop:trueਜਾਂfalse। ਵੀਡੀਓ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਬਾਅਦ ਇਸਨੂੰ ਲੂਪ ਕਰਦਾ ਹੈ।hotkey:trueਜਾਂfalse। ਕੀਬੋਰਡ ਸ਼ਾਰਟਕੱਟਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ(ਜਿਵੇਂ ਕਿ, ਚਲਾਉਣ/ਰੋਕਣ ਲਈ ਸਪੇਸਬਾਰ)।preload:'auto','metadata', ਜਾਂ'none'. ਬ੍ਰਾਊਜ਼ਰ ਵੀਡੀਓ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰੀਲੋਡ ਕਰਦਾ ਹੈ।'auto': ਪੂਰਾ ਵੀਡੀਓ ਪਹਿਲਾਂ ਤੋਂ ਲੋਡ ਕਰਦਾ ਹੈ।'metadata': ਸਿਰਫ਼ ਮੈਟਾਡੇਟਾ(ਅਵਧੀ, ਮਾਪ) ਪ੍ਰੀਲੋਡ ਕਰਦਾ ਹੈ।'none': ਕੁਝ ਵੀ ਪਹਿਲਾਂ ਤੋਂ ਲੋਡ ਨਹੀਂ ਕਰਦਾ।
screenshot:trueਜਾਂfalse। ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵੀਡੀਓ ਦੇ ਸਕ੍ਰੀਨਸ਼ਾਟ ਲੈਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।video.url: ਤੁਹਾਡੀ ਵੀਡੀਓ ਫਾਈਲ ਦਾ ਮਾਰਗ।video.pic: ਥੰਬਨੇਲ ਚਿੱਤਰ ਦਾ ਰਸਤਾ।video.thumbnails: ਸੀਕ ਬਾਰ ਲਈ ਥੰਬਨੇਲ ਸਪ੍ਰਾਈਟ ਦਾ ਰਸਤਾ।
HLS ਅਤੇ FLV ਲਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
ਇਹਨਾਂ ਵੀਡੀਓ ਕਿਸਮਾਂ ਨੂੰ ਕੰਮ ਕਰਨ ਲਈ ਬਾਹਰੀ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। DPlayer ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਆਪਣੇ ਆਪ ਕਰਦਾ ਹੈ, ਪਰ ਤੁਸੀਂ customTypeਪ੍ਰਾਪਰਟੀ ਰਾਹੀਂ ਉਹਨਾਂ ਦੇ ਵਿਵਹਾਰ ਨੂੰ ਵੀ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ।
video.type: ਵੀਡੀਓ ਕਿਸਮ ਦੱਸਦਾ ਹੈ।'mp4': ਡਿਫਾਲਟ, ਛੱਡਿਆ ਜਾ ਸਕਦਾ ਹੈ।'hls':.m3u8ਵੀਡੀਓਜ਼ ਲਈ।'flv':.flvਵੀਡੀਓਜ਼ ਲਈ।
video.customType: ਇੱਕ ਵਸਤੂ ਜੋ ਤੁਹਾਨੂੰ ਹਰੇਕ ਵੀਡੀਓ ਕਿਸਮ ਲਈ ਪ੍ਰੋਸੈਸਿੰਗ ਤਰਕ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦਿੰਦੀ ਹੈ।HLS ਦੇ ਨਾਲ ਉਦਾਹਰਣ: ਅੰਦਰਲਾ ਕੋਡ
customType.hlsਇੱਕHlsਉਦਾਹਰਣ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ DPlayer ਦੇ<video>ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਇਹ ਵਿਸ਼ੇਸ਼ ਮਾਮਲਿਆਂ ਨੂੰ ਸੰਭਾਲਣ ਜਾਂ HLS ਸਟ੍ਰੀਮ ਉੱਤੇ ਵਧੇਰੇ ਨਿਯੰਤਰਣ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਉਪਯੋਗੀ ਹੈ।FLV ਦੇ ਨਾਲ ਉਦਾਹਰਣ: ਇਸੇ ਤਰ੍ਹਾਂ, ਇਹ ਕੋਡ ਇੱਕ ਬਣਾਉਂਦਾ ਹੈ
flvPlayerਅਤੇ ਇਸਨੂੰ<video>FLV ਸਟ੍ਰੀਮ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਐਲੀਮੈਂਟ ਨਾਲ ਜੋੜਦਾ ਹੈ।
ਇਹਨਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਜ਼ਰੂਰਤ ਲਈ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਅਤੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਅਨੁਕੂਲਿਤ ਵੀਡੀਓ ਪਲੇਅਰ ਬਣਾ ਸਕਦੇ ਹੋ, ਸਧਾਰਨ ਵੀਡੀਓ ਤੋਂ ਲੈ ਕੇ ਲਾਈਵ ਸਟ੍ਰੀਮਾਂ ਤੱਕ।