So verwenden Sie den Vue-Video-Player für eine Live-Übertragung

CDN-Methode, fügen Sie die Datei direkt in den HTML-Dateiheader ein:
  <link rel="stylesheet" href="Pfad/zu/video.js/dist/video-js.css"/>
  <script type="text/javascript" src="Pfad/zu/video.min.js"></script>
  <script type="text/javascript" src="Pfad/zu/vue.min.js"></script>
  <script type="text/javascript" src="Pfad/zu/Dist/vue-video-player.js">
  </Skript>
    <script type="text/javascript"> Vue.use(Fenster.VueVideoPlayer)
  </Skript>

NMP-Installations-Plugin:
  npm installiere vue-video-player --save
    npm installiere videojs-contrib-hls --save

Führen Sie die grundlegende Stildatei in main.js ein:
// VideoPlayer-Stil importieren importiere 'video.js/dist/video-js.css'
    

Import auf Anfrage:
importiere 'videojs-contrib-hls'
importiere { videoPlayer } von 'vue-video-player'

Komponenten:
    VideoPlayer
},    
 
Weltweiter Import:
Vue von „vue“ importieren
Importieren Sie VueVideoPlayer von „vue-video-player“. 
// Importieren Sie benutzerdefinierte Stile und fügen Sie den entsprechenden Klassennamen in <video-player> hinzu, z. B. video-player-custom
// importiere „vue-video-player/src/custom-theme.css“
Vue.use(VueVideoPlayer, /* { 
 Optionen: globale Standardkonfiguration,
   Ereignisse: globale VideoJS-Ereignisse}*/)

<Vorlage>
  <!-- playsinline: Stellt den Player so ein, dass er auf Mobilgeräten nicht im Vollbildmodus angezeigt wird [ Boolean, Standard: false ] -->
  <!-- customEventName: benutzerdefinierter Statusänderungsereignisname [String, Standard: „statechanged“] -->
    <Videoplayer
    Klasse = "Videoplayer-Benutzerdefiniert"
        ref="Videoplayer"
        :Optionen="Spieleroptionen"
        :playsinline="wahr"
        customEventName="benutzerdefinierterStateChangeEventName"
        @play="beiPlayerPlay"
        @pause="beiPlayerPause"
        @ended="beiSpielerende"
        @ready="Spieler bereit"
        @statechanged="Spielerstatus geändert"
        @playing="beimSpielerspielen"
        @waiting="beimWarten auf den Spieler"
        @loadeddata="aufSpielerLoadeddata"
        @timeupdate="Zeitupdate"
        @canplay="aufSpielerKannplay"
        @canplaythrough="aufSpielerKannplaythrough">
    </Videoplayer>
</Vorlage>
<Skript>
importiere 'videojs-contrib-hls'
importiere { videoPlayer } von 'vue-video-player'
Standard exportieren {
   Komponenten:
        Videoplayer
    },
  Daten() { 
    zurückkehren {
       Spieleroptionen: { 
         // Ist es stummgeschaltet: true,
                  // Die Standardeinstellung ist Englisch, auf Chinesisch eingestellt: 'zh-CN',
                  // Wiedergabegeschwindigkeit. Nachdem Sie diese angegeben haben, zeigt Video.js ein Steuerelement (ein Steuerelement der Klasse vjs-playback-rate) an, mit dem der Benutzer die Wiedergabegeschwindigkeit auswählen kann playbackRates: [0,5, 1,0, 1,5, 2,0],
                  // Setzen Sie den Player in den Smooth-Modus und verwenden Sie diesen Wert bei der Berechnung der dynamischen Größe des Players, wobei das Seitenverhältnis aspectRatio angegeben wird: '4:3',
             // Kompatibilitätsreihenfolge, der Standardwert ist ['html5'], andere registrierte Technologien werden nach dieser Technologie in der Reihenfolge hinzugefügt, in der sie registriert wurden.
                  techOrder: ['html5'],
                  // Entspricht einer Reihe von <source>-Untertags im nativen <video>-Tag, wodurch eine sanfte Herabstufung erreicht werden kann; das Typattribut gibt den MIME-Typ der Medienressourcenquellen an: [
                        //{
                    	  //Typ: "video/mp4",
                    	  //Quelle: ""
                  	//},
                        //{
                    	  //Typ: "rtmp/flv",
                    	  //Quelle: ""
                  	//},
                   	{
                     	  Typ: "application/x-mpegURL",
                     	  Quelle: "https://live.cgtn.com/1000/prog_index.m3u8"
                   	},
                   ],
                  // Video-Coverposter: require('./icon/cover.jpg'),　
      }
    }
  },
  berechnet: { 
    	//Plugin-Knoten wird verwendet, um benutzerdefinierte Schaltflächenereignisse hinzuzufügen player() { 
      gib dies zurück.$refs.videoPlayer.player 
    }
  },
    montiert() {},
    Methoden: {
        // Rückruf abspielen onPlayerPlay(player) {
        },
        // Rückruf anhalten onPlayerPause(player) {
          //konsole.log(Spieler)
        },
        //Videowiedergabe beendet callback onPlayerEnded(player) {
          //konsole.log(Spieler)
        },
        // Änderungen des readyState am DOM-Element führen dazu, dass die Wiedergabe gestoppt wird onPlayerWaiting(player) {
          //konsole.log(Spieler)
        },
        // Die Wiedergabe hat begonnen callback onPlayerPlaying(player) {
          //konsole.log(Spieler)
        },
        // Wenn der Player an der aktuellen Wiedergabeposition Daten herunterlädt, wird onPlayerLoadeddata($event) ausgelöst {
          //Konsole.log($Ereignis)
        },
        // Wird ausgelöst, wenn sich die aktuelle Wiedergabeposition ändert.
        beiPlayerTimeupdate($event) {
          //Konsole.log($Ereignis)
        },
        //Der readyState des Mediums ist HAVE_FUTURE_DATA oder höher onPlayerCanplay($event) {
          //Konsole.log($Ereignis)
        },
        // Der ReadyState des Mediums ist HAVE_ENOUGH_DATA oder höher. Dies bedeutet, dass die gesamte Mediendatei ohne Pufferung abgespielt werden kann.
        beiSpielerKannDurchspielen($event) {
          //Konsole.log($Ereignis)
        },
        //Rückruf zur Änderung des Wiedergabestatus playerStateChanged($event) {
          //Konsole.log($Ereignis)
        },
        //Binden Sie einen Listener an den Bereitschaftszustand der Komponente. Der Unterschied bei Ereignis-Listenern besteht darin, dass die Funktion sofort ausgelöst wird, wenn das Ready-Ereignis bereits aufgetreten ist. .
        SpielerReadied($event) {
          //Konsole.log($Ereignis)
        },
    }
}
</Skript>
<style lang="scss" scoped>
.video-player-custom{
    Breite: 100 %;
    Höhe: 180px;
    // vidoeUI schreibt /deep/ .video-js{ neu
        Breite: 100 %;
        Höhe: 100%;
        Polsterung: 0;
        Überlauf: versteckt;
        // Spieler.vjs-tech{
          Objekt-Passung: Abdeckung;
        }
        // Wiedergabetaste.vjs-big-play-button {
            Position: absolut;
            oben: 50 %;
            links: 50%;
            Breite: 2em;
            Höhe: 2em;
            Rand oben: -1em;
            Rand links: -1em;
            Schriftgröße: 2em;
            Zeilenhöhe: 2em;
            Randradius: 50 %;
            Hintergrundfarbe: rgba(0,0,0,0,45);
            Gliederung: keine;
        }
        // Cover.vjs-poster{
            Breite: 100 %;
            Höhe: 100%;
            Hintergrundgröße: Abdeckung;
        }
    }
}  
</Stil>