您现在的位置是:技术博客 > 前端前端 Dplayer播放器 Lucas2021-03-26 19:33【代码】931人已围观 简介Dplayer 是一个支持弹幕的 HTML5 视频播放器。 Dplayer 是一个支持弹幕的 HTML5 视频播放器。 以下是一个简单地案例,部分代码如下,完整代码<a href="https://www.mylucas.com.cn/download/share/dplayer.zip" target='_blank'>点此</a>下载。更多介绍和用法进入<a href="http://dplayer.js.org/zh/" target='_blank'>官网</a>查看。 #### HTML代码 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DPlayer示例</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css"> <link rel="stylesheet" href="index.css"> <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js"></script> <script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/pearplayer"></script> <script src="DPlayer.min.js"></script> </head> <body class="markdown-body"> <h2>在 dialog 中承载视频</h2> <h3 id="dplayer-dialog" class="show-dialog">Show Dialog</h3> <div id="float-dplayer" class="float-dplayer"> <div id="dplayer-container" class="dplayer-container"></div> <h3 id="close-dialog" class="close-dialog">X</h3> </div> <h2 id="quick-start">示例1:快速开始</h2> <div class="example"> <div id="dplayer1"></div> </div> <h2 id="options">示例2:按键操作</h2> <div class="example"> <button class="btn" onclick="switchDPlayer()">Switch Video</button> <button class="btn" onclick="dp2.notice('Notice演示')">notice</button> <button class="btn" onclick="dp2.seek(120)">seek</button> <button class="btn" onclick="dp2.volume(0.2)">volume</button> <button class="btn" onclick="dp2.toggle()">toggle</button> <button class="btn" onclick="dp2.destroy()">destroy</button> <button class="btn" onclick="dp2.danmaku.hide()">danmaku.hide</button> <button class="btn" onclick="dp2.danmaku.show()">danmaku.show</button> <div id="dplayer2"></div> <div id="events"></div> </div> <h2 id="quality-switching">示例3:切换画质</h2> <div class="example"> <button class="btn" onclick="dp3.switchQuality(1)">切换画质</button> <div id="dplayer3"></div> </div> <!-- Http Live Streaming --> <h2 id="hls-support">示例3:HLS协议支持</h2> <div class="example"> <div id="dplayer4"></div> </div> <!-- MPEG-DASH --> <h2 id="dash-support">示例8:MPEG-DASH格式支持</h2> <div class="example"> <div id="dplayer8"></div> </div> <h2 id="flv-support">示例5:FLV格式支持</h2> <div class="example"> <div id="dplayer5"></div> </div> <!-- bt种子播放工具 --> <h2 id="webtorrent">示例9:WebTorrent</h2> <div class="example"> <div id="dplayer9"></div> </div> <!-- 直播 --> <h2 id="live">示例6:Live</h2> <div class="example"> <button class="btn" onclick="dp6.danmaku.draw({text: '假装收到 WebSocket 弹幕', color: '#fff', type: 'right'})">假装收到 WebSocket 弹幕</button> <div id="dplayer6"></div> </div> <h2 id="custon-type">示例10:卡带类型</h2> <div class="example"> <div id="dplayer10"></div> </div> <script src="https://cdn.jsdelivr.net/npm/stats.js"></script> <script src="demo.js"></script> </body> </html> ``` #### demo.js代码 ``` // stats.js: JavaScript Performance Monitor const stats = new Stats(); stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom document.body.appendChild(stats.dom); function animate() { stats.begin(); // monitored code goes here stats.end(); requestAnimationFrame(animate); } requestAnimationFrame(animate); initPlayers(); handleEvent(); function handleEvent() { document.getElementById('dplayer-dialog').addEventListener('click', (e) => { const $clickDom = e.currentTarget; const isShowStatus = $clickDom.getAttribute('data-show'); if (isShowStatus) { document.getElementById('float-dplayer').style.display = 'none'; } else { $clickDom.setAttribute('data-show', 1); document.getElementById('float-dplayer').style.display = 'block'; } }); document.getElementById('close-dialog').addEventListener('click', () => { const $openDialogBtnDom = document.getElementById('dplayer-dialog'); console.log('触发关闭“弹框视频”的点击事件'); $openDialogBtnDom.setAttribute('data-show', ''); document.getElementById('float-dplayer').style.display = 'none'; }); } function initPlayers() { // dplayer-float window.dpFloat = new DPlayer({ // 播放器容器元素 container: document.getElementById('dplayer-container'), // 视频预加载,可选值: 'none', 'metadata', 'auto' preload: 'none', // 开启截图,如果开启,视频和视频封面需要允许跨域 screenshot: true, video: { // 视频地址 url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4', // 视频封面 pic: 'source0.mp4_092346633.jpg', // pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg', // 视频缩略图,可以使用 DPlayer-thumbnails (opens new window)生成 thumbnails: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg' }, // 外挂字幕 subtitle: { // 字幕链接 // url: 'subtitle test' }, // 弹幕库 danmaku: { id: '9E2E3368B56CDBB4', api: 'https://api.prprpr.me/dplayer/' } }); // dp1 window.dp1 = new DPlayer({ container: document.getElementById('dplayer1'), preload: 'none', screenshot: true, video: { url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4', pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png', thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg' }, subtitle: { url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt' }, danmaku: { id: '9E2E3368B56CDBB4', api: 'https://api.prprpr.me/dplayer/', addition: ['https://s-sh-17-dplayercdn.oss.dogecdn.com/1678963.json'] } }); // dp2 参数文档地址:http://dplayer.js.org/zh/guide.html#%E5%8F%82%E6%95%B0 window.dp2 = new DPlayer({ container: document.getElementById('dplayer2'), preload: 'none', // 视频自动播放 autoplay: true, // 主题色默认"#b7daff" theme: '#FADFA3', // 视频循环播放 loop: true, // 开启截图,如果开启,视频和视频封面需要允许跨域 screenshot: true, // 在 Safari 中开启 AirPlay airplay: true, // 开启热键,支持快进、快退、音量控制、播放暂停 hotkey: true, // 在左上角展示一个 logo,你可以通过 CSS 调整它的大小和位置 logo: 'https://i.loli.net/2019/06/06/5cf8c5d94521136430.png', // 默认音量,默认值 0.7,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效 volume: 0.2, // 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器,默认true mutex: true, video: { url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4', pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png', thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg', type: 'auto' }, subtitle: { url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt', type: 'webvtt', fontSize: '25px', bottom: '10%', color: '#b7daff' }, danmaku: { id: '9E2E3368B56CDBB4', api: 'https://api.prprpr.me/dplayer/', token: 'tokendemo', maximum: 3000, user: 'DIYgod', bottom: '15%', unlimited: true }, contextmenu: [ { text: 'custom contextmenu', link: 'https://github.com/MoePlayer/DPlayer' } ] }); const events = [ 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'mozaudioavailable', 'pause', 'play', 'playing', 'ratechange', 'seeked', 'seeking', 'stalled', 'volumechange', 'waiting', 'screenshot', 'thumbnails_show', 'thumbnails_hide', 'danmaku_show', 'danmaku_hide', 'danmaku_clear', 'danmaku_loaded', 'danmaku_send', 'danmaku_opacity', 'contextmenu_show', 'contextmenu_hide', 'notice_show', 'notice_hide', 'quality_start', 'quality_end', 'destroy', 'resize', 'fullscreen', 'fullscreen_cancel', 'webfullscreen', 'webfullscreen_cancel', 'subtitle_show', 'subtitle_hide', 'subtitle_change' ]; const eventsEle = document.getElementById('events'); for (let i = 0; i < events.length; i++) { dp2.on(events[i], (info) => { eventsEle.innerHTML += '<p>Event: ' + events[i] + '</p>'; eventsEle.scrollTop = eventsEle.scrollHeight; }); } // dp3 window.dp3 = new DPlayer({ container: document.getElementById('dplayer3'), preload: 'none', video: { quality: [{ // 高清画质参数 name: 'HD', url: 'https://m3u8.liuyue1234.com/20210311/ZgQHibg8/index.m3u8', // url: 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8', // url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.m3u8', type: 'hls' }, { // 标清画质参数 name: 'SD', url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4', type: 'normal' }], defaultQuality: 0, pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png' } }); // // dp4 window.dp4 = new DPlayer({ container: document.getElementById('dplayer4'), preload: 'none', video: { url: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8', type: 'hls' } }); // // dp5 window.dp5 = new DPlayer({ container: document.getElementById('dplayer5'), preload: 'none', video: { url: 'source2.flv', type: 'flv' } }); window.dp8 = new DPlayer({ container: document.getElementById('dplayer8'), preload: 'none', video: { url: 'https://moeplayer.b0.upaiyun.com/dplayer/dash/hikarunara.mpd', type: 'dash' } }); // window.dp9 = new DPlayer({ // container: document.getElementById('dplayer9'), // video: { // url: 'magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&dn=Sintel&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent', // type: 'webtorrent' // } // }); // window.dp6 = new DPlayer({ // container: document.getElementById('dplayer6'), // preload: 'none', // live: true, // danmaku: true, // apiBackend: { // read: function (endpoint, callback) { // console.log('假装 WebSocket 连接成功'); // callback(); // }, // send: function (endpoint, danmakuData, callback) { // console.log('假装通过 WebSocket 发送数据', danmakuData); // callback(); // } // }, // video: { // url: 'http://ivi.bupt.edu.cn/hls/cctv4.m3u8', // type: 'hls' // } // }); // window.dp10 = new DPlayer({ // container: document.getElementById('dplayer10'), // video: { // url: 'https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4', // type: 'pearplayer', // customType: { // 'pearplayer': function (video, player) { // new PearPlayer(video, { // src: video.src, // autoplay: player.options.autoplay // }); // } // } // } // }); } function clearPlayers() { for (let i = 0; i < 6; i++) { window['dp' + (i + 1)].pause(); document.getElementById('dplayer' + (i + 1)).innerHTML = ''; } } function switchDPlayer() { if (dp2.option.danmaku.id !== '5rGf5Y2X55qu6Z2p') { dp2.switchVideo({ url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4', pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg', type: 'auto', }, { id: '5rGf5Y2X55qu6Z2p', api: 'https://api.prprpr.me/dplayer/', maximum: 3000, user: 'DIYgod' }); } else { dp2.switchVideo({ url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4', pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png', thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg', type: 'auto' }, { id: '9E2E3368B56CDBB42', api: 'https://api.prprpr.me/dplayer/', maximum: 3000, user: 'DIYgod' }); } // const sourceList = [ // { name: 'cctv1', src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8' }, // { name: 'cctv2', src: 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8' }, // { name: 'CCTV3高清', src: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8' }, // { name: 'CCTV4高清', src: 'http://ivi.bupt.edu.cn/hls/cctv4.m3u8' }, // { name: 'CCTV5+高清', src: 'http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8' }, // { name: 'CCTV6高清', src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8' }, // { name: 'CCTV7高清', src: 'http://ivi.bupt.edu.cn/hls/cctv7.m3u8' }, // { name: 'CCTV-8高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8' }, // { name: 'CCTV-9高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv9.m3u8' }, // { name: 'CCTV-10高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv10.m3u8' }, // { name: 'CCTV-11高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv11.m3u8' }, // { name: 'CCTV-12高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv12.m3u8' }, // { name: 'CCTV-13高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv13.m3u8' }, // { name: 'CCTV-14高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv14.m3u8' }, // { name: 'CCTV-15高清 ', src: 'http://ivi.bupt.edu.cn/hls/cctv15.m3u8' }, // { name: 'CHC高清电影 ', src: 'http://ivi.bupt.edu.cn/hls/chchd.m3u8' }, // { name: '北京卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8' }, // { name: '北京文艺高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv2hd.m3u8' }, // { name: '湖南卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hunanhd.m3u8' }, // { name: '浙江卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/zjhd.m3u8' }, // { name: '江苏卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/jshd.m3u8' }, // { name: '东方卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/dfhd.m3u8' }, // { name: '安徽卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/ahhd.m3u8' }, // { name: '黑龙江卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hljhd.m3u8' }, // { name: '辽宁卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/lnhd.m3u8' }, // { name: '深圳卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/szhd.m3u8' }, // { name: '广东卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/gdhd.m3u8' }, // { name: '天津卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/tjhd.m3u8' }, // { name: '湖北卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/hbhd.m3u8' }, // { name: '东南卫视高清 ', src: 'http://ivi.bupt.edu.cn/hls/sdhd.m3u8' }, // { name: '北京纪实高清 ', src: 'http://ivi.bupt.edu.cn/hls/btv11hd.m3u8' }, // // // { name: '民视新闻台 ', src: 'https://6.mms.vlog.xuite.net/hls/ftvtv/index.m3u8' }, // // 上面为可用的 // ]; } ``` 转载:感谢您对Lucas个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源Lucas个人博客”。 很赞哦! ( 0 ) 上一篇:Node.js安装和使用 下一篇:layui使用小技巧 相关文章 ueditor工具栏浮动bug 有趣的js插件 动态DOM的事件绑定 推荐一个炫酷的背景插件 点击排行 生活不止眼前的苟且,还有诗和远方 十年一觉电影梦 奥地利基茨比厄尔 禅修治愈身心 自律成就自我 零边际成本社会 Modern PHP 鸟哥的Linux私房菜 本栏推荐 要技术,更要有创意 定时任务 Curl无法发送https请求 Lnmp环境搭建 常用的SQL函数 Windows的cmd指令 ueditor工具栏浮动bug 有趣的js插件 标签云 git laravel swoole javascript vue ajax html css sql linux docker flask django nginx apache thinkphp markdown sublime wechat layui photoshop nodejs mysql windows composer java maven springboot mybatis IDE 猜你喜欢 Swoole 基础篇一(初识) PHP进程管理器 正则的快速上手 Sublime代码格式化 Lnmp环境搭建 高并发库存防控超量 Linux之top命令 常用的SQL函数 站点信息 建站时间:2018-05-01 在线人数:1人 文章统计:263篇 总浏览量:222609次 统计数据:百度统计 个人信息:扫描二维码查看