Maison > Article > interface Web > Explication détaillée des étapes pour implémenter la lecture hls avec vue-dplayer
Cette fois, je vais vous donner une explication détaillée des étapes pour implémenter la lecture hls avec vue-dplayer Quelles sont les précautions pour que vue-dplayer implémente la lecture hls. jetons un coup d'oeil.
Cause
J'ai déjà écrit un article "vue2.0+vue-video-player implémente la lecture hls", qui mentionnait qu'avant d'utiliser vue-video-player, j'avais essayé d'utiliser vue-dplayer pour implémenter la lecture hls, mais le temps était compté à l'époque et je ne peux toujours pas. Si ce n'est pas terminé, le plan sera modifié. Prenez le temps de le compléter dès maintenant.
Démarrer
Installer les dépendances
npm install vue-dplayer -S
Composant d'écriture HelloWorld.vue
<template> <p> <d-player></d-player> </p> </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> </style>
Présentez hls.js
À l'origine, il a été introduit via l'importation, mais une erreur a été signalée lors de l'exécution. Alors introduisez-le d’abord en utilisant la balise script dans index.html.
nbsp;html> <meta> <meta> <title>vue-dplayer-hls</title> <p></p> <!-- built files will be auto injected --> <script></script>
Remarque :
Selon le code de la page de démonstration DPlayer, si vous souhaitez prendre en charge hls, vous devez définir video.type sur "hls", mais après l'avoir modifié, j'ai constaté qu'il ne pouvait pas être lu. J'ai donc regardé le code source et j'ai trouvé cet endroit dans le code source :
En d'autres termes, peu importe ce que vous remplissez dans votre composant, vous utilisez en réalité « normal » pour créer une nouvelle instance de Dplayer.
Modifier le code source
Personnalisez un composant VueDPlayerHls.vue, puis copiez le code source et modifiez le problème en : tapez : this.video.type
<template> <p></p> </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>
Importez le nouveau composant
import VueDPlayer from './VueDPlayerHls';
dans le composant d'origine (HelloWorld.vue) Réaliser la lecture
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois php !
Lecture recommandée :
Graphique de données d'affectation dynamique ajax
composant React Quoi sont les aspects de l'optimisation des performances
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!