最简要的DPlayer样例

最新推荐文章于 2024-08-08 07:11:12 发布

py_free-物联智能

最新推荐文章于 2024-08-08 07:11:12 发布

阅读量2.1k

点赞数

分类专栏：产品化文章标签： DPlayer 视频播放器网页视频播放器 D播放器

本文为CSDN“py_free-物联智能”博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/py8105/article/details/112058705

版权

产品化专栏收录该内容

30 篇文章 1 订阅

订阅专栏

1）安装dplayer：
npm install dplayer --save 或 yarn add dplayer

2）创建index.html,添加
<!DOCTYPE HTML>
<html>
<body>
<div id="dplayer" class="dplayer" ></div>
</body>
</html>
3）在https://www.jsdelivr.com/网站查找dplayer

获取及引入DPlayer.min.js脚本，如：
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
填写到index.html 中
<!DOCTYPE HTML>
<html>
<body>
    <div id="dplayer" class="dplayer" ></div>
    <script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
</body>
</html>
4）添加视频播放，将如下样例的url设置视频源
<!DOCTYPE HTML>
<html>
<body>
    
    <div id="dplayer" class="dplayer" ></div>
    <script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
    <script>
        const dp = new DPlayer({
            container: document.getElementById('dplayer'),
            video: {
                quality: [
                    {
                        name: 'SD',
                        url: 'http://vipxz.bocai-zuida.com/2012/幸福三重奏第三季20201231.mp4',
                        type: 'normal',
                    },
                ],
                defaultQuality: 0,
                // pic: 'demo.png',
                // thumbnails: 'thumbnails.jpg',
            },
        });
    </script>
</body>
</html>