Detaillierte Erläuterung der Live-Übertragungsfunktion von Vue
|
Vor kurzem hat das Unternehmen zufällig Live-Übertragungen durchgeführt, deshalb werde ich heute die Fallstricke aufzeichnen, auf die ich gestoßen bin. Der Server des Unternehmens verwendet Amazon AWS, Sie können sich also einfach die offizielle API ansehen. Die offizielle Adresse von AWS lautet AWS Live Broadcast API.
Gemäß der ausgereiften Methode im Internet wird video.js verwendet, und dann erstellt AWS eine Kapselungsschicht, sodass wir sie direkt verwenden. Hier verwenden wir die Vue-Version von Vue-Video-Player Installieren Sie zuerst die relevanten Pakete npm installiere vue-video-player --save Importieren Sie vue-video-player in main.js
// Der erste ist der Stil von videoJs und der zweite ist der Stil von vue-video-player. Da auch andere Geschäftskomponenten die Videowiedergabe verwenden können, werden sie in main.js require('video.js/dist/video-js.css') platziert.
erfordern('vue-video-player/src/custom-theme.css')
/*Videowiedergabekomponente importieren*/
VideoPlayer von „vue-video-player“ importieren
Vue.use(VideoPlayer)
Komponenten importieren und Konfigurationsparameter ändern
<Videoplayer
Klasse = "Videoplayer vjs-custom-skin"
ref="Videoplayer"
:Optionen="Spieleroptionen"
@play="beiPlayerPlay($event)"
@pause="beiPlayerPause($event)"
@statechanged="SpielerStateChanged($event)"
></Videoplayer>
Parameter ändern und src hinzufügen
Spieleroptionen: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //Wiedergabegeschwindigkeit autoplay: false, //Wenn wahr, startet der Browser die Wiedergabe, wenn sie bereit ist.
Steuerung: true, //Steuerleiste vorladen: „auto“, //Video vorladen stummgeschaltet: true, //Jeglicher Ton wird standardmäßig eliminiert.
loop: false, // Bewirkt, dass das Video neu gestartet wird, sobald es endet.
Sprache: "zh-CN",
aspectRatio: „16:9“, // Setzen Sie den Player in den Flüssigkeitsmodus und verwenden Sie diesen Wert bei der Berechnung der dynamischen Größe des Players. Der Wert sollte ein Verhältnis darstellen – zwei durch einen Doppelpunkt getrennte Zahlen (z. B. „16:9“ oder „4:3“).
fluid: true, // Wenn wahr, hat der Video.js-Player eine flüssige Größe. Mit anderen Worten: Es wird proportional skaliert, um in den Container zu passen.
Quellen:
{
mit Anmeldeinformationen: false,
Typ: "application/x-mpegURL",
//src: diese.liveSrc
Quelle:
„https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8“
}
],
Poster: this.image, //Ihre Titeladresse//Breite: 200 || document.documentElement.clientWidth,
notSupportedMessage: „Dieses Video kann momentan nicht abgespielt werden. Bitte versuchen Sie es später erneut.“ // Ermöglicht Ihnen, die Standardmeldung zu überschreiben, die angezeigt wird, wenn Video.js die Medienquelle nicht wiedergeben kann.
Kontrollleiste: {
timeDivider: true, // Trennzeichen zwischen aktueller Zeit und Dauer durationDisplay: true, // Dauer anzeigen remainderTimeDisplay: false, // ob die verbleibende Zeit angezeigt werden soll Funktion fullscreenToggle: true // ob die Schaltfläche „Vollbild“ angezeigt werden soll }
},
Beachten Sie, dass Sie zuerst testen müssen, ob die Live-Übertragungsquelle erfolgreich abgespielt werden kann, da sonst diese Fehler gemeldet werden
Dann bauen wir einen lokalen Live-Source-Test nach den offiziellen Erstellen Sie zuerst die HTML-Schnittstelle. Achten Sie darauf, verwandte JS-Bibliotheken und -Dateien einzuführen. Ich verwende hier hbuilder, da die Verwendung bequemer ist und der Vorschaumodus dem Öffnen eines Ports ähnelt. Über die get-Methode wird ein lokaler Dienst zurückgegeben, anstatt direkt auf die HTML-Datei zu doppelklicken, um sie lokal zu öffnen und auf die statische Datei zuzugreifen ~~~~
<!doctype html>
<html lang="de">
<Kopf>
<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>
</Kopf>
<Text>
<div Klasse="Video-Container">
<video id="amazon-ivs-videojs" class="video-js vjs-4-3 vjs-big-play-centered" steuert die automatische Wiedergabe von „playsinline“></video>
</div>
<Stil>
Körper {
Rand: 0;
}
.video-container {
Breite: 640px;
Höhe: 480px;
Rand: 15px;
}
</Stil>
<Skript>
(Funktion abspielen() {
// Wiedergabe-URL von der Amazon IVS-API abrufen
//var PLAYBACK_URL = 'https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8';
var PLAYBACK_URL = 'https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8'
// Amazon IVS als Wiedergabetechnologie für Video.js registrieren
registriereIVSTech(videojs);
//Player initialisieren
var player = videojs('amazon-ivs-videojs', {
techOrder: ["AmazonIVS"]
}, () => {
console.log('Player ist einsatzbereit!');
// Stream abspielen
player.src(WIEDERGABE_URL);
});
})();
</Skript>
</body>
</html>
Zugang über den Hafen,
Später stellte ich fest, dass die Online-Live-Quellenwiedergabe auch über lokale statische Dateien erfolgen kann
ps: Wenn Sie keinen eigenen lokalen Servicetest erstellen möchten, können Sie auch den von awd bereitgestellten Onlinetest direkt verwenden
Sie können es selbst herausfinden. Ändern Sie input.value in die Live-Quelladresse und starten Sie es dann in der Shell-Konsole auf der rechten Seite. npm installieren und npm ausführen starten Der Effekt ist wie folgt, was genau das gleiche ist
Ändern Sie einfach die Ladeadresse in Ihr eigenes Live-Quellformat m3u8. Hier ist die Online-Live-Quelle, die ich bereits eingerichtet habe.
Nachdem die Live-Quelle in Ordnung ist, fahren Sie mit dem Schreiben des Projektcodes fort
<Vorlage>
<div Klasse='Demo'>
<Videoplayer-Klasse = "Videoplayer vjs-custom-skin"
ref="Videoplayer"
:playsinline="wahr"
:Optionen="Spieleroptionen"
@play="beiPlayerPlay($event)"
@pause="beiPlayerPause($event)"
@ended="beiPlayerEnded($event)"
@waiting="beimWarten auf den Spieler($event)"
@spielen="beimSpielerSpielen($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="beiPlayerTimeupdate($event)"
@canplay="beiPlayerCanplay($event)"
@canplaythrough="beiPlayerCanplaythrough($event)"
@statechanged="SpielerStateChanged($event)"
@ready="Spieler bereit"
>
</Videoplayer>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Methoden: {
// Rückruf abspielen onPlayerPlay(player) {
console.log('Spieler spielen!', Spieler)
},
// Rückruf anhalten onPlayerPause(player) {
console.log('Spieler pausieren!', Spieler)
},
// Rückruf, wenn die Wiedergabe des Videos beendet ist onPlayerEnded($event) {
konsole.log(Spieler)
},
// Änderungen des readyState am DOM-Element führen dazu, dass die Wiedergabe gestoppt wird onPlayerWaiting($event) {
konsole.log(Spieler)
},
// Die Wiedergabe hat begonnen callback onPlayerPlaying($event) {
konsole.log(Spieler)
},
// Wenn der Player an der aktuellen Wiedergabeposition Daten herunterlädt, wird onPlayerLoadeddata($event) ausgelöst {
konsole.log(Spieler)
},
// Wird ausgelöst, wenn sich die aktuelle Wiedergabeposition ändert.
beiPlayerTimeupdate($event) {
konsole.log(Spieler)
},
//Der readyState des Mediums ist HAVE_FUTURE_DATA oder höher onPlayerCanplay(player) {
// console.log('Spieler kann spielen!', Spieler)
},
// Der ReadyState des Mediums ist HAVE_ENOUGH_DATA oder höher. Dies bedeutet, dass die gesamte Mediendatei ohne Pufferung abgespielt werden kann.
beiSpielerKannDurchspielen(Spieler) {
// console.log('Spieler kann durchspielen!', Spieler)
},
//Rückruf zur Änderung des Wiedergabestatus playerStateChanged(playerCurrentState) {
console.log('aktueller Updatestatus des Spielers', playerCurrentState)
},
//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(Spieler) {
console.log('Beispiel: Spieler 1 bereit', Spieler);
}
},
}
</Skript>
Definieren Sie zugehörige Überwachungsfunktionen, die je nach Bedarf hinzugefügt werden können. Die folgenden werden häufig verwendet
beiPlayerPlay(Spieler) {
console.log("onPlayerPlay", Spieler);
},
beiPlayerPause(Spieler) {
console.log("onPlayerPause", Spieler);
},
SpielerStateChanged(Spieler) {
console.log("playerStateChanged", Spieler);
},
Starten Sie dann den Dienst npm ausführen starten Ich habe einen Fehler gefunden und konnte das entsprechende Video nicht finden. Ich habe also festgestellt, dass die entsprechende Bibliothek fehlte. Ich musste die AWS-Bibliothek hinzufügen, bevor ich die folgende Bibliotheksunterstützungsdatei zur index.html des gesamten Projekts hinzufügen konnte. <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>
Endlich ist der komplette Effekt da
Notiz: Fügen Sie hls.js-Unterstützung hinzu, daher müssen Sie Abhängigkeiten wie folgt installieren: npm install --save videojs-contrib-hls Hier ist das offizielle Lager von AWS, Sie müssen es selbst abholen Hinzufügen: Wenn es direkt auf der Seite implementiert ist, wird es möglicherweise nicht direkt abgespielt, und es wird ein Fehler gemeldet, dass das Video nicht abgespielt werden kann. Ich vermute, es kann zwei Gründe geben, siehe Screenshot
1: Es dauert eine gewisse Zeit, die vom Hintergrund zurückgegebene Streaming-Adresse asynchron abzurufen. Während dieser Zeit wurde die Live-Komponente initialisiert, aber die Live-Quelladresse wurde nicht abgerufen. Daher wird ein Fehler gemeldet, dass die Live-Adresse nicht gefunden werden kann.
Der Effekt ist der gleiche und kann auch für andere Komponenten bequem aufgerufen werden
Abschließend biete ich der Einfachheit halber alle endgültigen Codes mit beiden Händen an.
// Der erste ist der Stil von videoJs und der zweite ist der Stil von vue-video-player. Da auch andere Geschäftskomponenten die Videowiedergabe verwenden können, werden sie in main.js require('video.js/dist/video-js.css') platziert.
erfordern('vue-video-player/src/custom-theme.css')
/*Videowiedergabekomponente importieren*/
VideoPlayer von „vue-video-player“ importieren
Vue.use(VideoPlayer)
2: videoPlayer.vue
<Vorlage>
<Videoplayer
Klasse = "Videoplayer vjs-custom-skin"
ref="Videoplayer"
:Optionen="Spieleroptionen"
@play="beiPlayerPlay($event)"
@pause="beiPlayerPause($event)"
@statechanged="SpielerStateChanged($event)"
></Videoplayer>
</Vorlage>
<Skript>
//importiere { registerIVSTech } von "amazon-ivs-player";
Standard exportieren {
Name: "",
Requisiten: ["Quelle", "Bild"],
Daten() {
zurückkehren {
// liveQuelle:
// "https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8",
Spieleroptionen: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //Wiedergabegeschwindigkeit autoplay: false, //Wenn wahr, startet der Browser die Wiedergabe, wenn sie bereit ist.
Steuerung: „true“, //Steuerleiste vorladen: „auto“, //Video vorladen stummgeschaltet: „false“, //Jeglicher Ton wird standardmäßig eliminiert.
loop: false, // Bewirkt, dass das Video neu gestartet wird, sobald es endet.
Sprache: "zh-CN",
aspectRatio: „16:9“, // Setzen Sie den Player in den Flüssigkeitsmodus und verwenden Sie diesen Wert bei der Berechnung der dynamischen Größe des Players. Der Wert sollte ein Verhältnis darstellen – zwei durch einen Doppelpunkt getrennte Zahlen (z. B. „16:9“ oder „4:3“).
fluid: true, // Wenn wahr, hat der Video.js-Player eine flüssige Größe. Mit anderen Worten: Es wird proportional skaliert, um in den Container zu passen.
Quellen:
{
mit Anmeldeinformationen: false,
Typ: "application/x-mpegURL",
Quelle: diese.src
// "https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8"
}
],
Poster: this.image, //Ihre Titeladresse//Breite: 200 || document.documentElement.clientWidth,
notSupportedMessage: „Dieses Video kann momentan nicht abgespielt werden. Bitte versuchen Sie es später erneut.“ // Ermöglicht Ihnen, die Standardmeldung zu überschreiben, die angezeigt wird, wenn Video.js die Medienquelle nicht wiedergeben kann.
Kontrollleiste: {
timeDivider: true, // Trennzeichen zwischen aktueller Zeit und Dauer durationDisplay: true, // Dauer anzeigen remainderTimeDisplay: false, // ob die verbleibende Zeit angezeigt werden soll Funktion fullscreenToggle: true // ob die Schaltfläche „Vollbild“ angezeigt werden soll }
}
};
},
// livePlays() {
// diese.playerOptions.sources[0].src = diese.liveSrc;
// var obj = {};
// obj.mitCredentials = false;
// obj.Typ = "Anwendung/x-mpegURL";
// obj.src = diese.pullUrl;
// dies.playerOptions.sources.append(obj);
// },
berechnet: {
Spieler() {
gib dies zurück.$refs.videoPlayer.player;
}
},
berechnet: {
Spieler() {
gib dies zurück.$refs.videoPlayer.player;
}
},
Methoden: {
beiPlayerPlay(Spieler) {
console.log("onPlayerPlay", Spieler);
},
beiPlayerPause(Spieler) {
console.log("onPlayerPause", Spieler);
},
SpielerStateChanged(Spieler) {
console.log("playerStateChanged", Spieler);
}
}
};
</Skript>
3:detail.vue übergeordnete Komponente
<Vorlage>
<d2-Behälter>
<div>
<div class="webTitle">Liveübertragungsverwaltung> Große Liveübertragung> Details</div>
<el-table :data="Liste" Rahmenstreifen>
<el-table-column align="center" label="Live-ID">
<template slot-scope="Umfang">
<span>{{ Umfang.Zeilen-ID }}</span>
</Vorlage>
</el-Tabellenspalte>
<el-table-column align="center" label="Live-Titel">
<template slot-scope="Umfang">
<span>{{ Umfang.Zeile.Titel }}</span>
</Vorlage>
</el-Tabellenspalte>
<el-table-column align="center" label="Konto">
<template slot-scope="Umfang">
<span>{{ Umfang.Zeilenname }}</span>
</Vorlage>
</el-Tabellenspalte>
<el-table-column align="center" label="Startzeit der Live-Übertragung">
<template slot-scope="Umfang">
<span>{{ scope.row.liveStart | timestampFormat }}</span>
</Vorlage>
</el-Tabellenspalte>
<el-table-column align="center" label="Anzahl der Zuschauer">
<template slot-scope="Umfang">
<span>{{ Umfang.Zeile.Uhrnummer }}</span>
</Vorlage>
</el-Tabellenspalte>
<el-table-column align="center" label="Anzahl der Kommentare">
<template slot-scope="Umfang">
<span>{{ Umfang.Zeile.ReserveNummer }}</span>
</Vorlage>
</el-Tabellenspalte>
<el-table-column align="center" label="Ticketkaufbetrag (GP)">
<template slot-scope="Umfang">
<span>{{scope.row.preSaleType == 1 ? scope.row.preSaleBalance*1 + scope.row.preSaleDeposit *1+ scope.row.fullPayment*1 : scope.row.fullPayment}}</span>
</Vorlage>
</el-Tabellenspalte>
<el-table-column align="center" label="Geschenkbetrag">
<template slot-scope="Umfang">
<span>{{ Umfang.Zeile.ReserveNummer }}</span>
</Vorlage>
</el-Tabellenspalte>
</el-Tabelle>
<div Klasse="playWrap">
<div Klasse="Livebild">
<vueVideoPlayers :src="src" :image="bild" />
</div>
<div Klasse="liveCommet"></div>
</div>
<div Klasse="playWrap">
<div Klasse="Links abspielen">
<p>Grundlegende Informationen</p>
<ul Klasse="leftInfo">
<li Klasse="Spielelement">
<span class="playTitle">Kategorie</span>
<span class="playContent">{{typeName}}</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Vorverkaufstyp</span>
<span class="playContent">{{formData.preSaleType == 1 ? "Vorverkauf" : "Kein Vorverkauf"}}</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Ob aufgezeichnet werden soll oder nicht</span>
<span class="playContent">{{formData.isRecordedBroadcast ==1 ? "Aufgezeichnete Sendung" : "Nicht aufgezeichnete Sendung"}}</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Liste der Schauspieler</span>
<span class="playContent">{{formData.actor}}</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Einführung zur Live-Übertragung</span>
<span class="playContent">{{formData.liveIntroduce}}</span>
</li>
</ul>
<p>Informationen zum Vorverkauf</p>
<ul Klasse="leftInfo">
<li Klasse="Spielelement">
<span class="playTitle">Vorverkaufszeitraum</span>
<span class="playContent">
{{formData.preSaleStart}}
<span style="color:#333;margin:0 5px">-</span>
{{formData.preSaleEnd}}
</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Anzahl der gebildeten Personen</span>
<span class="playContent">{{formData.formingNum ? formData.formingNum : 0}}</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Formzustand</span>
<span
Klasse="Wiedergabeinhalt"
>{{formData.reserveNumber > formData.reserveNumber ? "geformt":"nicht geformt" }}</span>
</li>
</ul>
<p>Informationen außerhalb des Vorverkaufs</p>
<ul Klasse="leftInfo">
<li Klasse="Spielelement">
<span class="playTitle">Startzeit des Ticketverkaufs</span>
<span class="playContent">{{formData.ticketingStart}}</span>
</li>
</ul>
Ticketpreise
<ul Klasse="leftInfo">
<li Klasse="Spielelement">
<span class="playTitle">Anzahlung im Vorverkauf</span>
<span class="playContent">{{formData.preSaleDeposit ? formData.preSaleDeposit : 0}}</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Vorverkaufsguthaben</span>
<span class="playContent">{{formData.preSaleBalance ? formData.preSaleBalance : 0}}</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Voller Preis</span>
<span class="playContent">{{formData.fullPayment ? formData.fullPayment : 0}}</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Wiedergabepreis</span>
<span class="playContent">{{formData.playbackPreis ? formData.playbackPreis : 0}}</span>
</li>
</ul>
</div>
<div Klasse="Rechts abspielen">
<p>Bilddaten</p>
<ul Klasse="leftInfo">
<li Klasse="Spielelement">
<span class="playTitle">Werbevideo</span>
<span class="playContent">
<Bild
v-if="formData.propagandaVideoUrl"
:src="videoPng"
Klasse="Bild abspielen"
@click="showVideo(formData.propagandaVideoUrl,true)"
/>
<span v-else style="color:#cfcfcf">Kein Video</span>
</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Video erneut ansehen</span>
<span class="playContent">
<Bild
v-if="formData.aufgezeichneteBroadcastUrl"
:src="videoPng"
Klasse="Bild abspielen"
@click="showVideo(formData.recordedBroadcastUrl,false)"
/>
<span v-else style="color:#cfcfcf">Kein Video</span>
</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Poster teilen</span>
<span class="playContent">
<el-Bild
Klasse="matchImg"
:src="formData.shareImage"
:Vorschau-Quellenliste="[formData.shareImage]"
/>
</span>
</li>
<li Klasse="Spielelement">
<span class="playTitle">Titelbild</span>
<span class="playContent">
<el-Bild
Klasse="matchImg"
v-for="(Element, Index) in JSON.parse(formData.coverImage)"
:src="Artikel"
:Schlüssel="Index"
:Vorschau-Quellenliste="[Element]"
/>
</span>
</li>
</ul>
<!-- <p>Bilddaten</p>
<ul Klasse="leftInfo"></ul>-->
</div>
</div>
</div>
<el-button @click="backPage">Zurück</el-button>
<el-dialog title="Ansicht" :visible.sync="videoVisible" width="850px">
<div v-if="video">
<video :src="tempSrc" controls="controls" width="800" height="600">Ihr Browser unterstützt das Video-Tag nicht. </video>
</div>
<div v-sonst>
<vueVideoPlayers :src="tempSrc" :image="Bild" />
</div>
</el-dialog>
</d2-container>
</Vorlage>
<Skript>
importiere { getLiveDetail, getLiveSellDetail } von "@/api/3d/liveApi";
importiere videoPng aus "@/assets/img/video.jpg";
importiere { Zeitstempelformat } aus "@/common/filters";
//importiere { registerIVSTech } von "amazon-ivs-player";
importiere vueVideoPlayers aus "./videoPlayer";
Standard exportieren {
Name: "",
Daten() {
zurückkehren {
src: "", //Live-Quellvideobild: "",
videoPng: videoPng,
Video: stimmt,
videoVisible: false,
// videoSrc: "", //Werbevideo// recordedBroadcastUrl:'', //Wiedergabevideo tempSrc: "",
Liste: [],
Ausweis: "",
Typname: "",
pullUrl: "",
formData: {
Ausweis: "",
pullUrl: "",
pushUrl: "",
Titel: "",
liveIntroduce: "",
Schauspieler: "",
Typ-ID: "",
isRecordedBroadcast: 2,
Titelbild: "",
propagandaVideoUrl: "",
Formierungsnummer: "",
preSaleDeposit: "", //Anzahlungspreis im Vorverkauf preSaleBalance: "", //Restpreis im Vorverkauf fullPayment: "", //Vollzahlpreis playbackPrice: "", //Wiedergabepreis preSale: [], //Zeitpunkt im Vorverkauf preSaleStart: "",
preSaleEnd: "",
liveStart: "", //Startzeit der Live-Übertragung istSpeak: 1,
Priorität: "",
Bild teilen: ""
}
};
},
erstellt() {
dies.getLiveSell();
dies.getData();
},
montiert() {},
Komponenten:
vueVideoPlayers
},
Methoden: {
zurückSeite() {
dies.$router.push("/liveMange/largeBrand");
},
//Ticketverkaufsstatus getLiveSell() {
var id = diese.$route.params.id;
getLiveSellDetail(id).then(res => {
const Ergebnis = res.data;
});
},
//Öffne das Popup-Fenster, um das Video anzusehen showVideo(playSrc, mark) {
dieses.videoVisible = true;
dieses.video = mark;
dies.tempSrc = Wiedergabequelle;
},
getData() {
var id = diese.$route.params.id;
diese.id = ID;
//var localMatchTypeId=localStorage.getItem('matchTypeId')
//var localPriority = localStorage.getItem('Priorität')
// var data = { id, Seite: 1, Limit: 10 };
getLiveDetail(id).then(res => {
const Ergebnis = res.data;
//Keine Kategorie-ID, lokal nehmen // if (!result.matchTypeId) {
// result.matchTypeId = localMatchTypeId
// }
// wenn(!result.priority){
// Ergebnis.Priorität = lokalePriorität
// }
this.formData = Ergebnis;
let { pullUrl, pushUrl, coverImage } = Ergebnis;
diese.src = pullUrl;
dieses.Bild = JSON.parse(CoverImage)[0];
Konstante {
Ausweis,
Titel,
liveStart,
TicketingStart,
WiedergabePreis,
Vorverkaufskaution,
vorVerkaufsbilanz,
Vollzahlung
} = Ergebnis;
const objData = {
Ausweis,
Titel,
Name: "admin",
liveStart,
Uhrnummer: localStorage.getItem("Uhrnummer") | 0,
Reservenummer: localStorage.getItem("Reservenummer") | 0,
Vorverkaufskaution,
vorVerkaufsbilanz,
volleZahlung,
TicketingStart,
WiedergabePreis
};
diese.Liste.push(objData);
// this.formData.registrationStart=result.registrationStart + ''
// this.formData.registrationEnd = result.registrationEnd + ''
// this.formData.voteStart = result.voteStart + ''
// this.formData.voteEnd = result.voteEnd + ''
//Abstimmungszeitraum// var preSaleStart = moment(parseInt(result.preSaleStart)).format(
// "JJJJ-MM-TT hh:mm:ss:SSS"
// );
// var preSaleEnd = Moment(parseInt(result.preSaleEnd)).format(
// "JJJJ-MM-TT hh:mm:ss:SSS"
// );
//Das Ende des Ereignisses // this.formData.liveStart = new Date(result.liveStart);
//diese.formData.registration.push(starten)
//diese.formData.registration.push(Ende)
//Manuelle Zuweisung// this.$set(this.formData, "preSale", [preSaleStart, preSaleEnd]);
//dies.$set(dies.formData, "Abstimmung", [AbstimmungStart, AbstimmungEnd]);
//Datumsformatierung //Vorverkaufszeitraum this.formData.preSaleStart = result.preSaleStart
? ZeitstempelFormat(Ergebnis.preSaleStart)
: "";
this.formData.preSaleEnd = result.preSaleEnd
? ZeitstempelFormat(Ergebnis.preSaleEnd)
: "";
//Startzeit des Ticketverkaufs ohne Vorverkauf this.formData.ticketingStart = result.ticketingStart
? ZeitstempelFormat(Ergebnis.TicketingStart)
: "";
this.typeName = localStorage.getItem("typeName") || "";
});
}
}
};
</Skript>
<Stilbereich>
.playWrap {
Anzeige: Flex;
Hintergrund: #fff;
Rand oben: 20px;
}
.leftInfo {
Listenstil: keiner;
Rand: 1px durchgezogen #cfcfcf;
}
.playLeft {
Breite: 48%;
/* Rahmen: 1px durchgezogen #f5f5f5; */
}
.Rechts abspielen {
Breite: 48 %;
Rand links: 2 %;
}
.playItem {
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Polsterung: 10px 0;
Rahmen unten: 1px durchgezogen #cfcfcf;
}
.playItem:letztes-Kind {
Rahmen unten: keiner;
}
.playContent {
Rand links: 20px;
Farbe: #999;
}
.matchImg {
Breite: 80px;
Höhe: 80px;
Rand rechts: 10px;
}
.playImage {
Breite: 80px;
Höhe: 80px;
}
.playWrap {
Anzeige: Flex;
}
.liveBild {
Breite: 40%;
Höhe: 400px;
}
</Stil>
3: Denken Sie daran, den folgenden Code zu index.html hinzuzufügen <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> Ende Dies ist das Ende dieses Artikels über die Live-Übertragungsfunktion von Vue. Weitere relevante Inhalte zu Live-Übertragungen von Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Warum wird UTF-8 in MySQL nicht empfohlen?
>>: Stil-Trigger-Effekt des Webseiten-Eingabefelds
Artikel empfehlen
8 leistungsstarke Techniken zum Erstellen von HTML-Webseiten
<br />Es gibt zwar viele Tools zum Erstellen...
Eine detaillierte Erklärung, wie React Fiber funktioniert
Inhaltsverzeichnis Was ist React Fiber? Warum Rea...
Verwenden Sie in JS nicht mehr überall Operatoren für absolute Gleichheit.
Inhaltsverzeichnis Überblick 1. Test auf Nullwert...
Detaillierte Erläuterung zum Einrichten des Ressourcencaches in Nginx
Ich wollte schon immer etwas über Caching lernen....
Eine kurze Erläuterung der Rolle und Funktionsweise von Schlüsseln in Vue3
Welche Funktion hat dieses Schlüsselattribut? Sch...
Verwenden Sie CSS- und Bootstrap-Symbole, um einen auf und ab springenden Indikatorpfeil-Animationseffekt zu erstellen
Manchmal ist die Seite sehr lang und benötigt ein...
Layout im Vue.js-Stil Allgemeine Fähigkeiten zur Flutter-Geschäftsentwicklung
Korrespondenz zwischen Flutter und CSS im Shadow-...
Implementierung eines verschachtelten Sprungs der Vue-Routing-Ansicht Router-Ansicht
Inhaltsverzeichnis 1. Ändern Sie die app.vue-Seit...
Beispielcode mit Vue-Router in HTML
Einführung in Vue und Vue-Router <script src=&...
Installieren Sie das Linux-System automatisch basierend auf Cobbler
1. Komponenten installieren yum install epel-rpm-...
Detaillierte Erläuterung der Idee des MySQL-Triggers zur Echtzeiterkennung einer Anweisung zum Sichern und Löschen
Problembeschreibung: Der Benutzer hat die Anforde...
Nginx übernimmt die Analyse des Implementierungsprozesses für HTTP-Anforderungen
Nginx entscheidet zunächst, welcher Serverblock i...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18 unter MacOS
Dieser Artikel dokumentiert die Installation von ...
Beispielcode für die Verwendung von CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs beim Scrollen
Wenn Sie den Datumswähler kapseln, müssen Sie die...
Detaillierte Erläuterung zum Kopieren und Einfügen unter Linux in einer virtuellen VMware-Maschine
1. Linux unter VMware Workstation: 1. Quelle aktu...