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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解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+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端. 实现效果 功能说明 支持回车添加事件 支持事件状态切换 添加事件 -> 进入未完成列表 未完成 -> 已完成(勾选checkbox) 未完成 -> 已取消(点击取消按钮) 已完成 -> 未完成(取消勾选checkbox) 已取消 -> 未完成(点击恢复按钮) 支持控制台打印所有事件数据 支持筛选事件 支持编辑事件 支持删除事件 支持清空所有事件
-
vue2.0之多页面的开发的示例
我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是.因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面.但是vue不止可以做单页面,它还可以做多页面,如果要做多页面的话需要对他的依赖,也就是webpack就是重新配置才可以.本文将详细讲webpack的配置. vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是
-
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实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果 需求分析: 类似于大多数音乐播放器中等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,拿到项目框架看到都是.vue文件, 不知道怎么用,以下是关于.vue文件的发现: 1.一个.vue文件是一个封装的组件,在.vue文件里可以写 html, css, js 其中template 中写html 代码,其实就是定义模板. 2.各个.vue之间样式不是独立的,同一选择器在不同的.vue里只要满足选中的条件就可以起作用.比如我在箭头1指的文件里定义了样式 .box{ width:200px; },如果在箭头2指的文件里也有 .box,
-
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. 准备组件的好数据