安装和使用Dplayer

看到这个框架时候感觉挺简单的，但确实挺简单的。接下来是这个框架的安装和使用方法：安装（使用npm安装）npm install dplayer --save或（使用Yarn安装）yarn add dplayer一、vue中使用在安装好之后引入js和css文件<template><div id="dplayer" ref="dplayer">&...

看他笑

23092人浏览 · 2019-07-26 15:50:33

看他笑 · 2019-07-26 15:50:33 发布

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

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

安装

（使用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>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^