安装和使用Dplayer

看到这个框架时候感觉挺简单的，但确实挺简单的。

接下来是这个框架的安装和使用方法：

安装

（使用npm安装）

npm install dplayer --save

或

（使用Yarn安装）

yarn add dplayer

一、vue中使用

在安装好之后引入js和css文件

 <template><div id="dplayer" ref="dplayer"></div></template><script>import DPlayer from '../../../node_modules/dplayer/dist/DPlayer.min' //引入的js文件import "../../../node_modules/dplayer/dist/DPlayer.min.css"; //css文件export default {name:'PlayComponent', mounted(){const dp = new DPlayer({container:document.getElementById("dplayer"),video: {url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4'}})}}</script>

刚开始我在初始js的时候写的是created方法，然后就报错一下错误：

不知道怎么处理，然后在网上搜了一下，原因是没获取到元素，元素为null,突然间重获新生，哈哈。就把created改成mounted，然后视频就出来了。如下图：

二、原生中使用

和vue一样，引入js和css文件

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="node_modules/dplayer/dist/DPlayer.min.css">
</head>
<body>
<div id="dplayer"></div>
</body>
</html>
<script src="node_modules/dplayer/dist/DPlayer.min.js"></script>
<script>const dp = new DPlayer({container: document.getElementById('dplayer'),video: {url: 'demo.mp4'},});
</script>

完成，收工。如有问题欢迎留言指正，谢谢。

安装和使用Dplayer相关推荐

vue中安装和使用Dplayer视频播放器
1.下载 npm下载 npm install dplayer - s npm i hls.js -s yarn下载 yarn add dplayer yarn add hls.js 2.使用 < ...
uniapp使用Dplayer.js实现视频播放
1.通过npm方式安装 npm install dplayer --save 2.或者使用Yarn方式 yarn add dplayer 3.简单创建一个播放器 <div id="dp ...
【Dplayer视频播放器】一款好用的视频播放器
使用安装 npm install dplayer --save 使用 <div class="card"><div id="dplayer" ...
flask之REDIS+Dplayer消息队列实现电影弹幕
一.安装Redis 官网下载地址:https://redis.io/download Redis centos安装过程: yum -y install gcc gcc-c++ wget http:/ ...
uniapp H5 项目播放 m3u8格式视频
uniapp H5 项目播放 m3u8格式视频阐述在项目中,可能会获取一些直播流地址,比如最常见的就是.m3u8视频格式.在小程序可以直接使用video 标签就可以直接播放,因为小程序有自己的引 ...
宝塔linux面板 h5ai,宝塔面板丨Nginx环境下H5ai（Dplayer）完整安装使用教程及注意事项...
请注意,本文编写于 929 天前,最后修改于 123 天前,其中某些信息可能已经过时. 关于如何搭建 H5ai ,网上虽然有很多教程,但详细的却不多,有的也是比较模糊.本文将介绍一下如何在宝塔Ngin ...
caddy php h5ai,使用Docker快速安装H5ai网盘、内置HTML5视频播放器DPlayer
说明:本镜像由iLemonrain大佬制作,使用的是LOC冻猫大佬修改的H5ai源码,其内置了HTML5视频播放器DPlayer,这里说下安装方法. 安装本镜像使用环境为Apache 2.4.PHP ...
dplayer安装php_DPlayer for Z-BlogPHP
// 插件兼容新版 Z-BlogPHP 1.5+ 博客使用 // 效果截图 2017年06月14日更新: * 修复低版本PHP(5.2) 兼容问题 2017年05月29日更新: * ...
DPlayer快速上手实验
本次演示是在Linux上进行首先安装 dplayer 1.CentOS安装Yarn wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.rep ...

安装和使用Dplayer

安装和使用Dplayer相关推荐

最新文章

热门文章