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验证表单大全
Nov 25 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
解决vue scoped html样式无效的问题
Oct 24 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多个文件上传到服务器实例
2014/10/29 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
php单例模式实现方法分析
2015/03/14 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
浅谈PDF.js使用心得
2018/06/07 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
python实现sublime3的less编译插件示例
2014/04/27 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
Django重设Admin密码过程解析
2020/02/10 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
python 错误处理 assert详解
2020/04/20 Python
python 读取.nii格式图像实例
2020/07/01 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
python实现xml转json文件的示例代码
2020/12/30 Python
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
民主生活会汇报材料
2014/12/15 职场文书
小学生通知书评语
2014/12/31 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
九年级语文教学反思
2016/03/03 职场文书
Python学习之包与模块详解
2022/03/19 Python