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

起因

之前写了一篇《 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”,但是我修改之后发现无法播放。于是去看了源码，发现源码内有这样一处：

也就是说不论你在自己的组件内填写的是什么，其实都是使用的'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';

实现播放

最后

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue2.0+vue-video-player实现hls播放全过程

    起因 最近公司想做一套视频点播服务,因为考虑到成本问题,领导希望一切都用开源系统来完成.基于这个出发点,那就肯定排除了各大云视频平台(腾讯云 音视频点播VOD.网易云视频.七牛云.阿里云 视频服务等).其实这里我还是建议购买云视频平台,因为自己造轮子肯定没有别人造的好(专门研发团队除外.以此业务为生的公司除外),再说,云视频平台服务商提供的都是一整套解决方案:收集.存储.转码.播放器等,并且在cdn和弹性扩容上都能得到最大保障. 准备 视频点播最少需要两样东西:流媒体服务.视频播放器. 因为这是

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

    起因 之前写了一篇< 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 re

  • 基于vue2.0+vuex+localStorage开发的本地记事本示例

    基于vue2.0+vuex+localStorage开发的本地记事本示例

    本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端. 实现效果 功能说明 支持回车添加事件 支持事件状态切换 添加事件 -> 进入未完成列表 未完成 -> 已完成(勾选checkbox) 未完成 -> 已取消(点击取消按钮) 已完成 -> 未完成(取消勾选checkbox) 已取消 -> 未完成(点击恢复按钮) 支持控制台打印所有事件数据 支持筛选事件 支持编辑事件 支持删除事件 支持清空所有事件

  • vue2.0之多页面的开发的示例

    我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是.因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面.但是vue不止可以做单页面,它还可以做多页面,如果要做多页面的话需要对他的依赖,也就是webpack就是重新配置才可以.本文将详细讲webpack的配置. vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是

  • vue2.0 better-scroll 实现移动端滑动的示例代码

    vue2.0 better-scroll 实现移动端滑动的示例代码

    写在前面的话: 上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧 效果:滑动右侧时,左侧也能有相应的变化:点击左侧时,右侧也能自动定位到相应的位置. 如下图所示界面,左侧为分栏,右侧为分栏详情. 滑动右边使左边联动的大概的思路: 1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中. 2)实现左边联动,则必须要监控 "scroll"事件,获取其高度 3)将scroll 的高度与右侧分栏的高度进行比较,获得其 index 值 4)左侧的分类中,使与 index 相应

  • vue2.0+ 从插件开发到npm发布的示例代码

    vue: V2.5.11 此篇尽量详细,清楚的讲解vue插件的开发到npm的发布,想想将你自己做的东西展示给广大"网民",心里还是有点小激动的...-^_^ 先上一下插件效果图------github传送门 下面我们就来说说详细做法: 1. 初始化项目 vue init webpack-simple vue-pay-keyboard 使用vue创建一个简单的项目,删除src中除了main.js和app.vue外的文件,清空app.vue中无用内容 整理完后项目目录 2.编写插件 vue

  • vue2.0+SVG实现音乐播放圆形进度条组件

    vue2.0+SVG实现音乐播放圆形进度条组件

    vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果 需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-circle.vue源码: <template> <div class="progress-circle"> <svg :width="radius" :height="radius" viewBox="0 0 10

  • vue学习笔记之vue1.0和vue2.0的区别介绍

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> VUE2.0:必须有根元素,包裹住所有的代码 <template id="aaa"> <div> <h3>我是组件</h3> <

  • vue2.0开发入门笔记之.vue文件的生成和使用

    vue2.0开发入门笔记之.vue文件的生成和使用

    这几天新项目用vue2.0开发,由于之前没用过vue,拿到项目框架看到都是.vue文件, 不知道怎么用,以下是关于.vue文件的发现: 1.一个.vue文件是一个封装的组件,在.vue文件里可以写 html, css, js 其中template 中写html 代码,其实就是定义模板. 2.各个.vue之间样式不是独立的,同一选择器在不同的.vue里只要满足选中的条件就可以起作用.比如我在箭头1指的文件里定义了样式 .box{ width:200px; },如果在箭头2指的文件里也有 .box,

  • vue2.0数据双向绑定与表单bootstrap+vue组件

    vue2.0数据双向绑定与表单bootstrap+vue组件

    最近一直在用vue,觉得确实是好用. 一,拿数据的双向绑定来说吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> </head> <body> <div id="app"> {{ name }} <input typ

  • vue2.0 自定义组件的方法（vue组件的封装）

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出.像 Mint-UI 等说实话很不错了,但是坑也是不少,而且很多功能也是仅凭这些实现不了,这需要我们去封装自己的可复用组件 二.封装组件的步骤 1. 建立组件的模板,先把架子搭起来,写写样式,考虑你的组件的基本逻辑. os:思考1小时,码码10分钟,程序猿的准则. 2. 准备组件的好数据

随机推荐