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 动态添加表格行
Jun 22 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
js 作用域和变量详解
Feb 16 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
js实现无缝轮播图
Mar 09 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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
python删除服务器文件代码示例
2018/02/09 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Python requests库用法实例详解
2018/08/14 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python实现邮件自动发送
2019/08/10 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
喝酒检查书范文
2014/02/23 职场文书
出纳担保书范文
2014/04/02 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
应急处置方案
2014/06/16 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
高中学生自我评价范文
2014/09/23 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
答谢酒会主持词
2015/07/02 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
python如何利用cv2模块读取显示保存图片
2021/06/04 Python