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 相关文章推荐
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
react项目从新建到部署的实现示例
Feb 19 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
DOM XPATH获取img src值的query
2013/09/23 PHP
php防止sql注入代码实例
2013/12/18 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
python 内置函数filter
2017/06/01 Python
python中的计时器timeit的使用方法
2017/10/20 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
python switch 实现多分支选择功能
2020/12/21 Python
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
销售员岗位职责范本
2014/02/03 职场文书
客服部班长工作责任制
2014/02/25 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
庆元旦演讲稿
2014/09/15 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
车辆管理制度范本
2015/08/05 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python