Home > Developer > JavaScript
Vue2.0 + vue-dplayer for hls playback, vue2.0hls
Cause
I wrote an article vue2.0 + vue-video-player for hls playback, which mentioned that before using vue-video-player, I tried to use vue-dplayer to implement hls playback, but it was time-consuming and I had not finished it yet. I changed the solution. Now take the time to complete it.
Start
Install dependency
npm install vue-dplayer -S
Compile 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>
Introduce hls. js
It was originally introduced using import, but an error was reported during execution. First, use the script tag in index.html.
<!DOCTYPE html>Note:
According to the DPlayer Demo Page code, to support hls, you need to set video. type to "hls". However, after modification, the video cannot be played. So I went to the source code and found that the source code contains the following:
That is to say, no matter what you fill in your components, you actually use the 'normal' to create a new Dplayer instance.
Modify source code
Customizes a component VueDPlayerHls. vue, and then copies the source code. The problem is changed to: 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>Import new components in the original component (HelloWorld. vue)
import VueDPlayer from './VueDPlayerHls';Playback
Last
Github address: https://github.com/PhillCheng/vue-dplayer-hls
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
