DPlayer.js視頻播放插件簡單的使用
主要用到了實現了：視頻播放 、監聽開始、結束、暫停、播放時間、切換視頻
官方文檔：http://dplayer.js.org
效果圖：
**
注意：我是在本地起了個服務，用局域網連接到手機測試，其中蘋果手機中，視頻的跳轉視頻位置失效，安卓手機良好，目前沒解決…后續有時間會持續更新
**
代碼部分 html：
|
1
2
3
4
5
6
|
<link rel="stylesheet" href="css/dplayer.min.css"><script src="js/dplayer.min.js"></script> <div id="dplayer" style="font-size: 12px;"></div><button class="click1">切換視頻</button> |
js：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
$(function () { // 初始化視頻 const dplayer = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'video/001.mp4', //視頻路徑 pic: 'images/banner1.png', //視頻封面 thumbnails: 'images/banner2.png', //視頻縮略圖 type: 'auto' }, }); dplayer.seek('6.972618'); //跳轉到指定時間位置 // 點擊切換視頻 $('.click1').click(function () { switchVideos(); }) // 進行監聽 dplayer.on('play', function () { console.log("播放"); dplayer.seek('6.972618'); //跳轉到指定時間位置 }); dplayer.on('pause', function () { console.log("暫停"); console.log(dplayer.video.currentTime); //獲取當前播放時間 }); dplayer.on('ended', function () { console.log("播放結束"); }); dplayer.on('error', function () { console.log("播放異常"); }); }) function switchVideos() { // ajax發送請求 獲取所點擊的視頻數據 // ...... dplayer.switchVideo({ url: 'video/002.mp4', //賦值data中的視頻URL pic: 'images/banner2.png', //獲取封面圖片 thumbnails: 'images/banner2.png' //視頻縮略圖 })} |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_43193877/article/details/105768669
