关闭

DPlayer简单用法

时间: 2019-12-19阅读: 18630标签: 视频

DPlayer 是一个支持弹幕的 html5 视频播放器。支持 Bilibili 视频和 danmaku,实时视频(HTTP Live Streaming,M3U8格式)以及 FLV 格式。 

用法

html

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="dist/DPlayer.min.js"></script>

选项

var dp = new DPlayer({
    element: document.getElementById('player1'),                       // 可选,player元素
    autoplay: false,                                                   // 可选,自动播放视频,不支持移动浏览器
    theme: '#FADFA3',                                                  // 可选,主题颜色,默认: #b7daff
    loop: true,                                                        // 可选,循环播放音乐,默认:true
    lang: 'zh',                                                        // 可选,语言,`zh'用于中文,`en'用于英语,默认:Navigator 
                                                                          language
    screenshot: true,                                                  // 可选,启用截图功能,默认值:false,注意:如果设置为
                                                                          true,视频和视频截图必须启用跨域
    hotkey: true,                                                      // 可选,绑定热键,包括左右键和空格,默认值:true
    preload: 'auto',                                                   // 可选,预加载的方式可以是'none''metadata''auto',默认
                                                                          值:'auto'
    video: {                                                           // 必需,视频信息
        url: '若能绽放光芒.mp4',                                         // 必填,视频网址
        pic: '若能绽放光芒.png'                                          // 可选,视频截图
    },
    danmaku: {                                                         // 可选,显示弹幕,忽略此选项以隐藏弹幕
        id: '9E2E3368B56CDBB4',                                        // 必需,弹幕 id,注意:它必须是唯一的,不能在你的新播放器
                                                                          中使用这些: `https://api.prprpr.me/dplayer/list`
        api: 'https://api.prprpr.me/dplayer/',                             // 必需,弹幕 api
        token: 'tokendemo',                                            // 可选,api 的弹幕令牌
        maximum: 1000,                                                 // 可选,最大数量的弹幕
        addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142']   // 可选的,额外的弹幕,参见:`Bilibili弹幕支持`
    }
});

事件绑定

dp.on(event, handler)事件:

play: DPlayer 开始播放时触发 
pause: DPlayer 暂停时触发 
canplay: 在有足够的数据可以播放时触发 
playing: DPlayer 播放时定期触发 
ended: DPlayer 结束时触发 error: 发生错误时触发

HLS支持(实时视频,M3U8格式)

它需要 hls.js 库,并且应该在 DPlayer.min.js 之前加载。实时弹幕尚不支持。

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/hls.min.js"></script>
<script src="dist/DPlayer.min.js"></script>

<script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.m3u8'
// ...
}
});
</script>

FLV支持

它需要 flv.js 库,并且应该在 DPlayer.min.js 之前加载。

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/flv.min.js"></script>
<script src="dist/DPlayer.min.js"></script>

<script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.flv'
// ...
}
});
</script>

使用bundler模块

var DPlayer = require('DPlayer'); 
var dp = new DPlayer(option);

其他类似工具:  DPlayer,  videos.js,  ckplayer,  vue-DPlayer,  vue-video-player


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6918

关闭

web视频播放

毫无疑问,现在是短视频、直播的时代。视频内容逐渐代替图文形式成为网友们获取新鲜事物以及展现自我的一大媒介。随着5G的到来,2020年属于直播短视频爆发式增长的一年,电商平台也都涌入直播营销的大风口

h5视频播放踩坑记录

随着抖音、快手这类的视频类app的火爆,移动端h5视频类应用也随之兴起,使用video播放的场景也越来越多,本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题

视频全屏弹幕实现

这个问题如果思路错了就是个死胡同。所以我在找问题的时候趟了很多坑。思路错在我不应该使用视频的全屏,敲黑板!划重点啦!不要使用视频的全屏!(解决了问题的时候才幡然醒悟)

优化 MP4 视频以便更快的网络串流

随着 Flash 的落寞 以及 移动设备的爆发性增长 ,越来越多的内容以 HTML5 视频的方式传递。在上一篇文章中你甚至能看到 使用 HTML5 视频替换 GIF 动图来优化网站访问速度 这样的技巧

如何将视频设置为网页背景【转】

有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同。需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放

使用 multipart/x-mixed-replace 实现 http 实时视频流

关于实时视频传输,业界已经有非常多成熟方案,分别应用在不同需求场景。本文介绍一种基于 HTTP ,非常简单、易理解的方案,实用性不强,但有助于理解 HTTP 协议。

video.js切换视频源问题

什么要再重新load一下什么替换一下src,没有啥作用,简单粗暴又有效的方法,video的问题,单单替换source的src是不行的,简单明了重新替换整个video标签,将video用js重新替换一遍,更改src

Bideo.js实现全屏视频背景

想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览。那么我告诉你有一款Javascript库正合你意,它就是Bideo.js。

HTML5 向网页嵌入视频和音频

现在很多网站上都会使用到视频和音频,HTML5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用 <video> 标签,而嵌入音频可以使用 <audio> 标签

js获取上传音视频的时长

获取上传视频路径,将该路径放入video标签,获取视频时长。方式一:隐藏一个音频标签,播放获取。方式二;通过new Audio的方式获取。上传之前限制一下视频的时长

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!