Le projet vue utilise vue-video-player pour implémenter la fonction de diffusion vidéo en direct

Language 2023-10-05 08:17:27 views: null

Annuaire d'articles

introduction

Avec le développement rapide d’Internet, la vidéo en direct est devenue un média de plus en plus populaire. Lors du développement d’un site Web ou d’une application doté d’une fonctionnalité de vidéo en direct, il est très important de choisir un cadre technique approprié. Vue.js, en tant que framework frontal js populaire, est très approprié pour créer des interfaces utilisateur hautement interactives. L'utilisation du plug-in vue-video-player dans le projet Vue peut grandement simplifier le processus de mise en œuvre de la fonction de diffusion vidéo en direct. Cet article explique et résume comment utiliser vue-video-player pour implémenter la fonction de diffusion vidéo en direct dans le projet Vue.

1. Utilisation de base

1. lire mp4

Vue Video Playerest une Vue.jsbibliothèque de lecteurs vidéo basée sur . Voici Vue Video Playerquelques précautions et méthodes d’utilisation :

  1. Installation et introduction : Tout d'abord, utilisez npm pour installer Vue Video Player.
npm install vue-video-player@5 --save

需要注意的是如果你使用的是vue2，这里安装时要使用5以下的版本，目前最新的6.0.0版本只支持vue3.
Insérer la description de l'image ici
Ensuite, introduisez Vue Video Player dans votre projet.

import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'

// 引入样式
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

// 使用组件
Vue.use(VueVideoPlayer)
  1. Utilisation de composants : dans les composants Vue, vous pouvez utiliser <video-player>les composants fournis par Vue Video Player pour lire des vidéos.
<template>
  <div>
    <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"></video-player>
  </div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      playerOptions: {
      
      
        // 视频 url
        sources: [{
      
      
          src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
          type: 'video/mp4'
        }],
        // 其他设置项
        autoplay: true,
        controls: true,
        poster: 'http://path/to/poster.jpg',
      }
    }
  },
  mounted() {
      
      
    // 通过 ref 访问 videoPlayer 组件实例
    this.$refs.videoPlayer.play()
  }
}
</script>
  1. Précautions:
  • Vue Video Player utilise la bibliothèque Video.js pour implémenter la lecture vidéo, vous devez donc introduire le fichier de style Video.js avant utilisation video-player标签的class必须设置成“video-player vjs-custom-skin”，你引入的样式才能起作用.
  • Vue Video Player utilise des styles de thème personnalisés par défaut. Si vous avez besoin de styles personnalisés, vous pouvez remplacer les styles par défaut en introduisant des fichiers CSS personnalisés.
  • Vous pouvez playerOptionsconfigurer le comportement du lecteur en modifiant l'objet, comme définir la lecture automatique, afficher ou non la barre de contrôle, etc.
  • Vous pouvez accéder à l'instance du composant videoPlayer via this.$refs.videoPlayer et appeler les méthodes qu'elle fournit, telles que la lecture, la pause, etc.
  • Prend en charge l'ajout de plusieurs <source>éléments pour prendre en charge les fichiers vidéo dans différents formats.

Voici Vue Video Player quelques considérations de base sur l’utilisation et la manière de l’utiliser. Pour une configuration et des fonctions plus détaillées, veuillez vous référer à Vue Video Player la documentation officielle.

2. Attributs des options couramment utilisés

Vue Video PlayerLes optionsoptions ont les propriétés suivantes :

  1. autoplay: Lorsqu'il est défini sur true, la vidéo sera automatiquement lue une fois le chargement terminé ; la valeur par défaut est false.
<vue-video-player :options="{ autoplay: true }"></vue-video-player>
  1. controls: Lorsqu'il est défini sur true, la barre de contrôle (commandes lecture/pause, volume, barre de progression, etc.) sera affichée ; la valeur par défaut est true.
<vue-video-player :options="{ controls: true }"></vue-video-player>
  1. muted: Lorsqu'il est défini sur true, la vidéo sera lue en mode muet ; la valeur par défaut est false.
<vue-video-player :options="{ muted: true }"></vue-video-player>
  1. loop: Lorsqu'il est défini sur true, la vidéo sera lue en boucle ; la valeur par défaut est false.
<vue-video-player :options="{ loop: true }"></vue-video-player>
  1. playbackRates: Définissez le taux de lecture disponible, vous pouvez passer dans un tableau, chaque élément représente un taux ; la valeur par défaut est [0.5, 1, 1.5, 2].
<vue-video-player :options="{ playbackRates: [0.5, 1, 1.5, 2] }"></vue-video-player>
  1. poster: Définissez la couverture vidéo, vous pouvez transmettre l'adresse de l'image ; la valeur par défaut est vide.
<vue-video-player :options="{ poster: 'path/to/poster.jpg' }"></vue-video-player>
  1. sources: Définissez la source vidéo, vous pouvez passer dans un tableau, chaque élément contient une adresse et un type de source (comme mp4 ou webm) ; la valeur par défaut est vide.
<vue-video-player :options="{ sources: [{ src: 'path/to/video.mp4', type: 'video/mp4' }] }"></vue-video-player>
  1. language: Définissez la langue du contrôle ; la valeur par défaut est "en", les valeurs facultatives incluent "en", "zh-CN", etc.
<vue-video-player :options="{ language: 'zh-CN' }"></vue-video-player>
  1. playbackRates: Définissez le taux de lecture disponible, vous pouvez passer dans un tableau, chaque élément représente un taux ; la valeur par défaut est [0.5, 1, 1.5, 2].
<vue-video-player :options="{ playbackRates: [0.5, 1, 1.5, 2] }"></vue-video-player>
  1. aspectRatio: Définissez le rapport hauteur/largeur du lecteur, vous pouvez passer une chaîne (sous la forme de '16:9') ou une décimale (le rapport largeur divisée par hauteur); la valeur par défaut est vide.
<vue-video-player :options="{ aspectRatio: '16:9' }"></vue-video-player>

Ci-dessus sont quelques attributs d'options couramment utilisés, qui peuvent être configurés selon les besoins pour obtenir différentes fonctions et effets.

3. Événements communs

vue-video-playerLes événements courants pour les plug-ins incluent :

  1. ready: Déclenché lorsque le lecteur vidéo est prêt. Vous pouvez effectuer certaines opérations d'initialisation dans cet événement, telles que le réglage de la source vidéo, le réglage du volume, etc.

    Exemple:

    <video-player @ready="handleReady"></video-player>

    methods: {
      
      
  handleReady(player) {
      
      
    player.src = 'http://example.com/video.mp4';
    player.volume = 0.5;
  }
}

  2. start: Déclenché lorsque la lecture de la vidéo commence. Vous pouvez effectuer certaines opérations liées au démarrage de la lecture dans cet événement, telles que l'affichage du bouton de lecture, le masquage de l'image de couverture, etc.

    Exemple:

    <video-player @start="handleStart"></video-player>

    methods: {
      
      
  handleStart() {
      
      
    console.log('视频开始播放');
    // 执行其他操作
  }
}

  3. play: Déclenché lors de la lecture de la vidéo. Vous pouvez effectuer certaines opérations liées à la lecture dans cet événement, telles que l'affichage d'un bouton pause, la mise à jour de la progression de la lecture, etc.

    Exemple:

    <video-player @play="handlePlay"></video-player>

    methods: {
      
      
  handlePlay() {
      
      
    console.log('视频正在播放');
    // 执行其他操作
  }
}

  4. pause: Déclenché lorsque la vidéo est en pause. Vous pouvez effectuer certaines opérations liées à la pause dans cet événement, telles que l'affichage du bouton de lecture, la mise en pause de la progression de la lecture, etc.

    Exemple:

    <video-player @pause="handlePause"></video-player>

    methods: {
      
      
  handlePause() {
      
      
    console.log('视频已暂停');
    // 执行其他操作
  }
}

  5. ended: Déclenché à la fin de la lecture vidéo. Vous pouvez effectuer certaines opérations liées à la fin de la lecture dans cet événement, comme afficher un bouton de relecture, passer à la vidéo suivante, etc.

    Exemple:

    <video-player @ended="handleEnded"></video-player>

    methods: {
      
      
  handleEnded() {
      
      
    console.log('视频播放结束');
    // 执行其他操作
  }
}

  6. error: Déclenché lorsqu'il y a une erreur dans la vidéo. Les erreurs peuvent être gérées dans cet événement, comme l'affichage d'invites d'erreur, le rechargement de vidéos, etc.

    Exemple:

    <video-player @error="handleError"></video-player>

    methods: {
      
      
  handleError(e) {
      
      
    console.log('视频出错', e);
    // 执行其他操作
  }
}

  7. timeupdate: Déclenché lorsque la durée de lecture vidéo est mise à jour. Vous pouvez mettre à jour la progression de la lecture, afficher l'heure actuelle de la vidéo, etc. dans cet événement.

    Exemple:

    <video-player @timeupdate="handleTimeUpdate"></video-player>

    methods: {
      
      
  handleTimeUpdate(currentTime) {
      
      
    console.log('当前播放时间:', currentTime);
    // 执行其他操作
  }
}

  8. volumechange: Déclenché lorsque le volume vidéo change. Vous pouvez mettre à jour l'état du volume, afficher le volume actuel, etc. dans cet événement.

    Exemple:

    <video-player @volumechange="handleVolumeChange"></video-player>

    methods: {
      
      
  handleVolumeChange(volume) {
      
      
    console.log('当前音量:', volume);
    // 执行其他操作
  }
}

Les événements répertoriés ici ne sont que vue-video-playerdes événements courants dans le plug-in. Vous pouvez choisir les événements correspondants à surveiller et à traiter en fonction des besoins réels.

2. Utilisez videojs-contrib-hls pour lire m3u8

Le lien de test m3u8 disponible fourni par le site officiel :https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8

  1. Introduit dans index.html
  <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video-js.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.4/video.min.js"></script>
  <script src="https://player.live-video.net/1.4.0/amazon-ivs-videojs-tech.min.js"></script>
  1. Installer videojs-contrib-hls

npm install --save videojs-contrib-hls

  1. Modifier les éléments de configuration source
    Insérer la description de l'image ici
 data() {
    
    
    return {
    
    
      playerOptions: {
    
    
        // 视频 url
        sources: [{
    
    
          withCredentials: false,
          type: "application/x-mpegURL", 
          src: "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
        }],
        // 其他设置项
        autoplay: true,
        controls: true,
        poster: 'http://path/to/poster.jpg',
      }
    }

  1. L'effet est le suivant :
    Insérer la description de l'image ici

  2. 注意事项：withCredentials 要设置为false
    Lorsque la propriété withCredentials est définie sur true, toutes les requêtes XHR adressées aux manifestes et aux fragments auront également withCredentials défini sur true. Cela permet aux cookies d'être stockés et livrés depuis le serveur sur lequel se trouvent le manifeste et le fragment. C'est correct CORS 有一些影响, car après le réglage, les informations d'en-tête Access-Control-Allow-Origin ne peuvent pas être définies sur *, et les informations d'en-tête de réponse doivent ajouter les informations d'en-tête Access-Control-Allow-Credentials et les définir sur true.

J'ai appris de ce grand gars : vue implémente la fonction de diffusion en direct

3. Outil de test de lien vidéo

Lorsque nous développons la fonction de diffusion en direct, parfois nous ne savons pas si l'adresse de la source de diffusion en direct est utile. Pour le moment, nous pouvons utiliser certains outils pour tester si le lien est valide. Ici, je recommande un outil appelé potplayer.

joueur de pot

Insérer la description de l'image ici
PotPlayer est un lecteur multimédia complet qui peut être utilisé pour lire divers formats audio et vidéo. Il prend en charge de nombreuses fonctionnalités avancées, notamment la prise en charge de plusieurs formats de sous-titres, des captures d'écran, du post-traitement vidéo, des ajustements des effets audio, etc. PotPlayer dispose également d'une interface conviviale et de touches de raccourci pour offrir une expérience de lecture fluide.
Lien de téléchargement : adresse de téléchargement de Potplayer

Insérer la description de l'image ici
Cliquez pour télécharger et installer.

Comment ça fonctionne :
Insérer la description de l'image ici
Insérer la description de l'image ici
Insérer la description de l'image ici
entrez l'adresse du lien ici et cliquez sur OK
Si le lien vidéo est disponible, il peut être lu normalement.
S'il n'est pas disponible, il vous demandera
Insérer la description de l'image ici
最后我尝试播放flv但是没有成功，有没有哪位大佬知道的，欢迎指点。

Je suppose que tu aimes

Origine blog.csdn.net/jieyucx/article/details/133030011
conseillé
Classement
du quotidien
Plus
2024-07-22(0)
2024-07-21(0)
2024-07-20(0)
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)

Code World

© 2018 codetd.com