配置视频URL: 在创建DPlayer实例时,通过video属性来配置视频的相关信息,包括视频URL。这个URL可以是一个静态的字符串,也可以动态获取。 动态获取视频URL: 如果需要在运行时动态获取视频URL,可以在DPlayer实例创建之前,通过AJAX请求或其他方式获取视频URL,然后再将其传递给DPlayer实例。 使用switchVideo方法: 如果需要在播放...
constdp=newDPlayer({container:document.getElementById('dplayer'),autoplay:false,theme:'#FADFA3',loop:true,lang:'zh-cn',screenshot:true,hotkey:true,preload:'auto',logo:'logo.png',volume:0.7,mutex:true,video:{url:'dplayer.mp4',pic:'dplayer.png',thumbnails:'thumbnails.jpg',type:'auto',}...
省略无关代码,初始化播放器 const dp = new DPlayer({ container: document.getElementById('video'), video: { url: 'https:///xxx.xxxx.mp4', // 视频地址 }, }); </script> 这就完成一个基础播放器了,非常简单。当然 DPlayer 支持的功能也很多,官网提供了中文文档,写得很详细,并且都配套了代码...
video.url - video url video.pic - video poster video.thumbnails - video thumbnails, generated by DPlayer-thumbnails (opens new window) video.type 'auto' values: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' or other custom type, see #MSE support video.customType - custom vide...
3 第三步 编辑html文件，在文件的头部引入如下文件，具体操作如下图所示：4 第四步 编写脚本文件,在html文档中添加如下脚本：const dp = new DPlayer({ container: document.getElementById('dplayer'), screenshot: true, video: { url: 'demo.mp4', pic: 'demo...
// 旧版本代码constplayer=newDPlayer({container:document.getElementById('dplayer'),video:{url:'your-video-url.mp4'}});// 新版本代码constplayer=newDPlayer({container:document.getElementById('dplayer'),video:{url:'your-video-url.mp4',type:'auto'}});</details>## 兼容性处理 ...
url: 'https://path/to/your/video.mp4', pic: 'https://path/to/your/thumbnail.jpg', thumbnails: 'https://path/to/your/thumbnails.jpg', }, }); }, }, }; </script> 四、更多配置选项 DPlayer提供了丰富的配置选项,你可以根据需求进行配置。以下是一些常用的配置选项: ...
})functionsw(){ dp.switchVideo({url:'video/背景.mp4',pic:'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',thumbnails:'https://moeplayer.b0.upaiyun.com/dplayer/hikarunara_thumbnails.jpg'}) }</script>
video: { //视频源 包含不同分辨率源 quality: [{ name: '普清', url: url1 },{ name: '高清', url: url2 }, { name: '超清', url: url3 }], defaultQuality: 0, pic: '', type: 'auto' } }); 4、事件: play, 播放时触发 ...
subtitle.url 字母链接 danmuku 弹幕配置 ... 可以通过调整Dplayer实例配置的方式,为其增加弹幕功能 newDplayer({//初始化视频对象container:videoRef.value,//指定视频容器节点video:{url:video.url,// 指定视频播放链接pic:video.cover// 指定视频封面图},danmuku:{addition:video.danmuurl//配置弹幕接口路径}})...