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

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

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

开始

安装依赖

npm install vue-dplayer -S

1，编写组件HelloWorld.vue

<template>
    <div class="hello">
      <d-player ref="player" @play="play" :logo="logo" :lang="lang" :video="video" :contextmenu="contextmenu"></d-player>
    </div>
</template>

<script>
import VueDPlayer from ‘./VueDPlayerHls’;
import logoImg from ‘@/assets/logo.png’;
export default {
name: ‘HelloWorld’,
data () {
return {
video: {
quality: [{
name: ‘240P’,
url: ‘https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8’,
},{
name: ‘360P’,
url: ‘https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8’,
},{
name: ‘720P’,
url: ‘https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8’,
}],
pic: ‘http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg’,
defaultQuality: 1,
thumbnails: logoImg,
type: ‘hls’
},
lang: ‘zh-cn’,
logo: logoImg,
autoplay: false,
player: null,
contextmenu: [
{
text: ‘博客园’,
link: ‘http://www.cnblogs.com/maqingyuan/’
},{
text: ‘博客园’,
link: ‘http://www.cnblogs.com/maqingyuan/’
},{
text: ‘博客园’,
link: ‘http://www.cnblogs.com/maqingyuan/’
}
]
}
},
components: {
‘d-player’: VueDPlayer
},
methods: {
play() {
// console.log(‘开始播放…’)
}
},
mounted() {
// this.player = this.$refs.player.dp;
// console.log(this.player);
// var hls = new Hls();
// hls.loadSource(‘https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8’);
// hls.attachMedia(this.player);
}
}
</script>

<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.hello{
width: 750px;
margin: 0 auto 50px;
}
@media only screen and (max-width: 640px){
.hello{
width: 100%;
}
}
</style>

2，引入hls.js （在main.js引入）

 

window.Hls = require('hls.js');

 

3，自定义一个组件VueDPlayerHls.vue

 

<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: false
},
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.KaTeX parse error: Expected 'EOF', got '#' at position 57: …kground-color: #̲f5f5f5; color: …emit(‘play’)
})
player.on(‘quality_start’, () => {
this.KaTeX parse error: Expected 'EOF', got '#' at position 44: …kground-color: #̲f5f5f5; color: …emit(‘pause’)
})
player.on(‘canplay’, () => {
this.KaTeX parse error: Expected 'EOF', got '#' at position 44: …kground-color: #̲f5f5f5; color: …emit(‘playing’)
})
player.on(‘ended’, () => {
this.KaTeX parse error: Expected 'EOF', got '#' at position 44: …kground-color: #̲f5f5f5; color: …emit(‘error’)
})
}
}
</script>
<style scoped>

</style>

 

4，实现播放（如下图） ：

最后

github地址:https://github.com/whiskyma/vue-dplayer

本文转自http://www.cnblogs.com/maqingyuan/p/9310467.html

注：视频播放本地摄像头画面

playDp() {

navigator.getUserMedia = navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia; // 获取媒体对象（这里指摄像头）

navigator.getUserMedia({

video: true

}, this.successFun, function(error) {

console.log(error.name || error);

});

},

successFun(stream) {

this.dp.video.srcObject = stream;// 将获取到的视频流对象转换为地址

console.log(this.videoAddress)

this.dp.play()

}