安装和使用Dplayer

63 阅读 0 评论 42 点赞

我是靠谱客的博主激情铃铛，最近开发中收集的这篇文章主要介绍安装和使用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>

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