DPlayer.js視頻播放插件使用方法
DPlayer.js視頻播放插件簡(jiǎn)單的使用
主要用到了實(shí)現(xiàn)了:視頻播放 、監(jiān)聽(tīng)開(kāi)始、結(jié)束、暫停、播放時(shí)間、切換視頻
官方文檔:http://dplayer.js.org
效果圖:

**
注意:我是在本地起了個(gè)服務(wù),用局域網(wǎng)連接到手機(jī)測(cè)試,其中蘋果手機(jī)中,視頻的跳轉(zhuǎn)視頻位置失效,安卓手機(jī)良好,目前沒(méi)解決…后續(xù)有時(shí)間會(huì)持續(xù)更新
**
代碼部分 html:
<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:
$(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'); //跳轉(zhuǎn)到指定時(shí)間位置
// 點(diǎn)擊切換視頻
$('.click1').click(function () {
switchVideos();
})
// 進(jìn)行監(jiān)聽(tīng)
dplayer.on('play', function () {
console.log("播放");
dplayer.seek('6.972618'); //跳轉(zhuǎn)到指定時(shí)間位置
});
dplayer.on('pause', function () {
console.log("暫停");
console.log(dplayer.video.currentTime); //獲取當(dāng)前播放時(shí)間
});
dplayer.on('ended', function () {
console.log("播放結(jié)束");
});
dplayer.on('error', function () {
console.log("播放異常");
});
})
function switchVideos() {
// ajax發(fā)送請(qǐng)求 獲取所點(diǎn)擊的視頻數(shù)據(jù)
// ......
dplayer.switchVideo({
url: 'video/002.mp4', //賦值data中的視頻URL
pic: 'images/banner2.png', //獲取封面圖片
thumbnails: 'images/banner2.png' //視頻縮略圖
})
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue3使用videojs播放m3u8格式視頻教程
- vue+video.js實(shí)現(xiàn)視頻播放列表
- JS實(shí)現(xiàn)簡(jiǎn)單控制視頻播放倍速的實(shí)例代碼
- 如何在vue中使用video.js播放m3u8格式的視頻
- Js視頻播放器插件Video.js使用方法詳解
- vue使用video.js進(jìn)行視頻播放功能
- vue + typescript + video.js實(shí)現(xiàn) 流媒體播放 視頻監(jiān)控功能
- video.js 一個(gè)頁(yè)面同時(shí)播放多個(gè)視頻的實(shí)例代碼
- Javascript實(shí)現(xiàn)視頻文件播放功能(示例詳解)
相關(guān)文章
詳細(xì)聊聊TypeScript中unknown與any的區(qū)別
unknown類型比較謙虛,就和他本身的意思一樣,他從不禍害到其他的變量,但是any類型就是那種惡霸,屬于什么都不管,誰(shuí)也不敢管的類型,這篇文章主要給大家介紹了關(guān)于TypeScript中unknown與any區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-10-10
JS實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10
jQuery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析
這篇文章主要介紹了jquery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析,本文給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
JScript中使用ADODB.Stream判斷文件編碼的代碼
在實(shí)現(xiàn)TextStraem的時(shí)候,找到判斷文件編碼的代碼是VBS的,但是在JScript中是沒(méi)有ASC等函數(shù)的,也不能對(duì)二進(jìn)制數(shù)據(jù)進(jìn)行處理,因此需要通過(guò)一個(gè)特別的方法來(lái)獲取文件開(kāi)關(guān)的編碼標(biāo)識(shí)。2008-06-06
javascript中export?和export?default的區(qū)別
本文主要介紹了javascript中export?和export?default的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
JS拖動(dòng)技術(shù) 關(guān)于setCapture使用
JavaScript實(shí)現(xiàn)篩選數(shù)組
微信小程序開(kāi)發(fā)之map地圖實(shí)現(xiàn)教程

