最简要的DPlayer样例

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>

5）双击 index.html打开观看视频

最简要的DPlayer样例相关推荐

Android NDK基础样例
Android NDK基础样例 NDK(Native Development Kit),用C/C++封装一些东西?好像就这么理解好了== 一.环境准备这个好讨厌==!因为我环境都已经搭了很久了. 已 ...
（性能测试压箱底知识点）LR性能测试---结果（样例）分析
LR性能测试结果样例分析测试结果分析 LoadRunner性能测试结果分析是个复杂的过程,通常可以从结果摘要.并发数.平均事务响应时间.每秒点击数.业务成功率.系统资源.网页细分图.Web服务器资源 ...
[LoadRunner]LR性能测试结果样例分析
LR性能测试结果样例分析测试结果分析 LoadRunner性能测试结果分析是个复杂的过程,通常可以从结果摘要.并发数.平均事务响应时间.每秒点击数.业务成功率.系统资源.网页细分图.Web服务器资源 ...
计算机系统软件和应用软件图,样例_计算机软件及应用_IT计算机_专业资料
样例_计算机软件及应用_IT计算机_专业资料 (11页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 14.9 积分实验一系统响应及系统稳定性实验目的:学 ...
需求分析说明书、详细设计说明书、概要设计说明书样例
以下是需求分析说明书.详细设计说明书.概要设计说明书样例需要详细资料的去 http://bbs.csai.cn/BBS/view.asp?ID={CA9329C0-93C5-4417-9170-45 ...
AWStats简介：Apache/Windows IIS的日志分析工具的下载，安装，配置样例和使用
http://www.chedong.com/tech/awstats.html 你完全不必耐心看完所有内容:简要安装说明如下安装 http://sourceforge.net/projects/a ...
AWStats简介：Apache/Windows IIS的日志分析工具的下载，安装，配置样例和使用（含6.9中文定义补丁）...
你完全不必耐心看完所有内容:简要安装说明如下安装 http://sourceforge.net/projects/awstats/ 下载安装包后: GNU/Linux:tar zxf awstats ...
AWStats简介：Apache/Windows IIS的日志分析工具的下载，安装，配置样例和使用（含6.9中文定义补丁）
你完全不必耐心看完所有内容:简要安装说明如下安装 http://sourceforge.net/projects/awstats/ 下载安装包后: GNU/Linux:tar zxf awstats ...
【计算机原理与接口技术(UNIX)⑰】——微型计算机系统的串行通信 [ 8250 + 具体样例 + 上机实验]
✅ 通过对 [计算机与UNIX汇编原理 ① ~ ⑫]的学习,我们已经大致掌握了汇编程序设计的相关知识接下来,我将其分栏名改为 [计算机原理与接口技术(UNIX) ],重点将放在 "计算机原 ...

最简要的DPlayer样例

最简要的DPlayer样例相关推荐

最新文章

热门文章