DPlayer快速上手实验
【摘要】
本次演示是在Linux上进行
首先安装 dplayer
1.CentOS安装Yarn
wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.re...
本次演示是在Linux上进行
首先安装 dplayer
1.CentOS安装Yarn
wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -
yum install yarn
- 1
- 2
- 3
2.安装dplayer
yarn add dplayer
- 1
3.创建html文件并添加dplayer(如下所示)
注：在jsdeliver中可以找到Dplayer, DPlayer.main.js
链接 https://www.jsdelivr.com/package/npm/dplayer?path=dist
<!DOCTYPE HTML>
<html>
<head>
<title>VideoPlay</title>
</head>
<body>
<div id="dplayer" class="dplayer" ></div>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
<style>
#dplayer {
max-width: 960px;
height: 620px;
margin: 0 auto;
}
</style>
<script>
const dp = new DPlayer({
container: document.getElementById('dplayer'),
screenshot: true,
video: {
quality: [
{
name: 'HD',
url: '123.mp4',
type: 'normal'
},
{
name: 'SD',
url: '123.mp4',
type: 'normal',
},
],
defaultQuality: 0,
// pic: 'demo.png',
// thumbnails: 'thumbnails.jpg',
},
});
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
最后启动httpd服务后，直接打开浏览器访问即可
文章来源: blog.csdn.net，作者：指剑，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/fly1574/article/details/120365739
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）