vue2.0+vue-dplayer实现hls播放的示例


Posted in Javascript onMarch 02, 2018

起因

之前写了一篇《 vue2.0+vue-video-player实现hls播放》,里边有提到在用vue-video-player之前,我尝试着使用vue-dplayer实现hls播放,但是当时时间紧迫,还没有完成,就换方案了。现在抽时间把它补齐吧。

开始

安装依赖

npm install vue-dplayer -S

编写组件HelloWorld.vue

<template>
 <div class="hello">
  <d-player ref="player" @play="play" :video="video" :contextmenu="contextmenu"></d-player>
 </div>
</template>

<script>
import VueDPlayer from './VueDPlayerHls';
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App',
   video: {
     url: 'https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/chunklist_w630020335.m3u8',
     pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg',
     type: 'hls'
    },
    autoplay: false,
    player: null,
    contextmenu: [
      {
        text: 'GitHub',
        link: 'https://github.com/MoePlayer/vue-dplayer'
      }
    ]
  }
 },
 components: {
  'd-player': VueDPlayer
 },
 methods: {
  play() {
    console.log('play callback')
   }
 },
 mounted() {
  this.player = this.$refs.player.dp;
  // console.log(this.player);
  var hls = new Hls();
  hls.loadSource('https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/chunklist_w630020335.m3u8');
  hls.attachMedia(this.player);
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

引入hls.js

本来是使用import引入,可是执行报错。所以就先在index.html内用script标签引入进来。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>vue-dplayer-hls</title>
 </head>
 <body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 </body>
</html>

注意:

根据DPlayer Demo页面代码,想支持hls,需要将video.type 设置为”hls”,但是我修改之后发现无法播放。于是去看了源码,发现源码内有这样一处:

vue2.0+vue-dplayer实现hls播放的示例

也就是说不论你在自己的组件内填写的是什么,其实都是使用的'normal'来new的Dplayer实例。

修改源码

自定义一个组件VueDPlayerHls.vue,然后copy源代码,问题处修改为: type: this.video.type

<template>
 <div class="dplayer"></div>
</template>

<script>
 require('../../node_modules/dplayer/dist/DPlayer.min.css');
 import DPlayer from 'DPlayer'
 export default {
  props: {
   autoplay: {
    type: Boolean,
    default: false
   },
   theme: {
    type: String,
    default: '#FADFA3'
   },
   loop: {
    type: Boolean,
    default: true
   },
   lang: {
    type: String,
    default: 'zh'
   },
   screenshot: {
    type: Boolean,
    default: false
   },
   hotkey: {
    type: Boolean,
    default: true
   },
   preload: {
    type: String,
    default: 'auto'
   },
   contextmenu: {
    type: Array
   },
   logo: {
    type: String
   },
   video: {
    type: Object,
    required: true,
    validator(value) {
     return typeof value.url === 'string'
    }
   }
  },
  data() {
   return {
    dp: null
   }
  },
  mounted() {
   const player = this.dp = new DPlayer({
    element: this.$el,
    autoplay: this.autoplay,
    theme: this.theme,
    loop: this.loop,
    lang: this.lang,
    screenshot: this.screenshot,
    hotkey: this.hotkey,
    preload: this.preload,
    contextmenu: this.contextmenu,
    logo: this.logo,
    video: {
     url: this.video.url,
     pic: this.video.pic,
     type: this.video.type
    }
   })
   player.on('play', () => {
    this.$emit('play')
   })
   player.on('pause', () => {
    this.$emit('pause')
   })
   player.on('canplay', () => {
    this.$emit('canplay')
   })
   player.on('playing', () => {
    this.$emit('playing')
   })
   player.on('ended', () => {
    this.$emit('ended')
   })
   player.on('error', () => {
    this.$emit('error')
   })
  }
 }
</script>

在原组件(HelloWorld.vue)内import新组件

import VueDPlayer from './VueDPlayerHls';

实现播放

vue2.0+vue-dplayer实现hls播放的示例

最后

github地址:https://github.com/PhillCheng/vue-dplayer-hls

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 #Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 #Javascript
浅谈FastClick 填坑及源码解析
Mar 02 #Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 #Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 #Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 #Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 #Javascript
You might like
PHP文件下载类
2006/12/06 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
React组件生命周期详解
2017/07/03 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
Python正则表达式介绍
2012/08/06 Python
python中List的sort方法指南
2014/09/01 Python
Python字符串详细介绍
2015/05/09 Python
Python入门之modf()方法的使用
2015/05/15 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
学生会主席竞聘书
2014/03/31 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
英文慰问信范文
2015/03/24 职场文书
幼儿园六一主持词
2015/06/30 职场文书
2016国培学习心得体会
2016/01/08 职场文书
Python Pandas 删除列操作
2022/03/16 Python