本文介绍dplayer的使用和简单的demo,deplayer基于HTML5语言嵌入网页(web)视频播放器。应用于各大视频网站。
工具/原料
1
web开发的基本专业知识
2
看懂dplayer官方文档
方法/步骤
2
第二步 引入所需要的第三方插件文件从官网下载如下文件并拷贝到项目文件加下如下图所示:
3
第三步 编辑html文件,在文件的头部引入如下文件,具体操作如下图所示:
4
第四步 编写脚本文件,在html文档中添加如下脚本:const dp = new DPlayer({ container: document.getElementById('dplayer'), screenshot: true, video: { url: 'demo.mp4', pic: 'demo.jpg', thumbnails: 'thumbnails.jpg' }, subtitle: { url: 'webvtt.vtt' }, danmaku: { id: 'demo', api: 'https://api.prprpr.me/dplayer/' } });
5
第五步 在浏览器中打开html文件即可看到视频播放效果:具体操作如下图所示:
6
进一步配置播放器选项,这步需要读者看懂官方API,API配置提供更多的功能和效果,可以进入官网:www.http://dplayer.js.org
注意事项
1
前端web开发的基本知识
2
看懂API接口配置文档
下一篇:春天让家生机勃发的软装设计技巧