Detaillierte Erläuterung des Beispiels zum Einbetten von Videos in eine HTML-Seite und zum Umschalten von Videos mit JS-Steuerung

Detaillierte Erläuterung des Beispiels zum Einbetten von Videos in eine HTML-Seite und zum Umschalten von Videos mit JS-Steuerung
Zunächst lautet der HTML-Code zum Einbetten des Videos in die Seite:

Code kopieren
Der Code lautet wie folgt:

<div id="duku" Klasse="duku">
<Objekt-ID="obx" Name="obx" Breite="290" Höhe="260">
<param name="Film" value="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="immer"></param>
<param name="wmode" value="opaque"></param>
<embed src="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf" Typ="Anwendung/x-shockwave-flash" allowscriptaccess="immer" allowfullscreen="true" wmode="undurchsichtig" Breite="290" Höhe="260"></embed>
</Objekt>
</div>

Die Objekt- und Einbettungs-Tags werden zusammen verwendet, um mit mehreren Browsern kompatibel zu sein. Achten Sie jedoch darauf, dass die gleichen Attributwerte unter den beiden Tags konsistent bleiben.
PS: Eine Einführung und Verwendung der Tags <object> und <embed> und ihrer Attribute finden Sie im Artikel OBJECT- und EMBED-Tags.

Lassen Sie uns anschließend darüber sprechen, wie Sie mit JS die Adresse des eingebetteten Videos dynamisch ändern können, um das nächste Video abzuspielen.
Zu diesem Zeitpunkt können viele Leute sofort daran denken, den Tag-Namen oder die DOM-Methode zu verwenden, um das Werteattribut des obigen Param-Knotens und das Src-Attribut des eingebetteten Knotens zu finden und die dynamische JS-Zuweisung zu verwenden, um die Adresse zu ändern. Der Test ergab jedoch, dass trotz des Austauschs der Videoadresse das auf der Seite angezeigte Video dasselbe blieb, was rätselhaft war.

Es zeigt sich, dass beim Laden der Seite alle Parameter des eingebetteten Objekts initialisiert werden. Erst durch erneutes Laden kann das nächste Video zur Wiedergabe geschaltet werden. Das einfache Ändern des Adressattributwertes funktioniert nicht. Genauso wie bei einem Mitarbeiter in der Firma hat sich zwar seine Adresse geändert (er ist umgezogen), aber er ist immer noch derselbe Mitarbeiter und nicht jemand anderes.
Zum Neuladen verwende ich häufig zwei Möglichkeiten (am Beispiel des obigen Codes):
①Verwenden Sie die obj.innerHTML-Methode von JS, um das Objekt als Ganzes zurückzusetzen.

Code kopieren
Der Code lautet wie folgt:

/*Funktion: Video dynamisch umschalten*/
Funktion setvideo(url){
var youku = document.getElementById("youku");
var htmlstr = "<Objekt-ID='obx' Name='obx' Breite='290' Höhe='260'>";
htmlstr += "<param name='Film' value='"+url+"'></param>";
htmlstr += "<param name='allowFullScreen' value='true'></param>";
htmlstr += "<param name='allowscriptaccess' value='always'></param>";
htmlstr += "<param name='wmode' value='opaque'></param>";
htmlstr += "<embed src='"+url+"' Typ='Anwendung/x-shockwave-flash' allowscriptaccess='immer' allowfullscreen='true' wmode='undurchsichtig' Breite='290' Höhe='260'></embed>";
htmlstr += "</object>";
youku.innerHTML = htmlstr;
}

② Platzieren Sie ein Iframe im Div-Container, damit Sie die Seite im Iframe dynamisch aktualisieren können, ohne die aktuelle übergeordnete Seite zu beeinträchtigen.
Ich werde den spezifischen Code nicht schreiben, aber die allgemeine Idee ist:
1. Verwenden Sie eine URL, um den Wert zu übergeben.
2. Die übergeordnete oder untergeordnete Seite erstellt eine versteckte Domäne, um die Adresse dynamisch zu speichern, die die untergeordnete Seite abrufen kann.
3. Verwenden Sie Methode ①, um das Objekt auf der Unterseite zurückzusetzen.
4. Andere Methoden wie window.open sind umständlich und nicht zu empfehlen.
Bisher wurden die Einbettung und Steuerung der Videoumschaltung erfolgreich durchgeführt. Aber zufällig entdeckte ich ein Problem:
Wenn Sie nach dem Wechsel zu einem neuen Video die Seite auf irgendeine Weise aktualisieren, z. B. durch Klicken auf „Aktualisieren“ oder Drücken von F5, wird ein Skriptfehler „Fehlendes Objekt“ angezeigt. Habe den Fehlercode gefunden und festgestellt, dass es sich um einen internen Skriptfehler von Flash handelt:

Funktion __flash__removeCallback(Instanz, Name) {
Instanz[Name] = null;
}

Wenn auf der Seite Flash verwendet wird und die Methode flash.external.ExternalInterface.addCallback in Flash verwendet wird, wird beim Aktualisieren der Seite ein JS-Fehler von __flash__removeCallback gemeldet: Objekt fehlt (Zeile 53), (Jscript-Skriptblock). Diese Funktion wird aufgerufen von:

__flash__removeCallback(document.getElementById(""), "dewprev");

Offensichtlich gibt document.getElementById("") null zurück, was dazu führt, dass __flash__removeCallback einen Fehler meldet. Ich denke, die integrierte Methode von Flash sollte folgendermaßen geschrieben werden:

Funktion __flash__removeCallback(Instanz, Name) {
if (Instanz != null) { Instanz[Name] = null; }
}

Jemand hat Tests durchgeführt und festgestellt, dass document.getElementById("") verwendet wird, um das ID/Name-Attribut des Flash-Control-Objekts abzurufen. Der Grund für diesen Fehler ist, dass das ID/Name-Attribut für das Objekt nicht festgelegt ist. Nach dem Festlegen tritt kein Fehler auf. Da meine Objekte jedoch alle über ID-/Name-Attribute verfügen, stimme ich dieser Begründung nicht zu. Daraus lässt sich erkennen, dass diese Methode zum Hinzufügen von ID/Name das Problem für manche Benutzer lösen kann und dass dies nicht der einzige Grund ist, der dieses Problem verursacht.

Danach habe ich lange gesucht und schließlich auf einer ausländischen Website eine Lösung gefunden. Sie wurde von einem Mann namens Dave Smith geschrieben. Basierend auf seinem Code habe ich einige Verbesserungen vorgenommen, um den Druck der Seite zu verringern, die ständig Code ausführt. Der von ihm bereitgestellte Code lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<Skripttyp="text/javascript">
(Funktion(){
var setRemoveCallback = Funktion(){
__flash__removeCallback = Funktion(Instanz, Name){
wenn (Instanz){
Instanz[Name] =null;
}
};
window.setTimeout(setRemoveCallback, 10);
};
setRemoveCallback();
})();
</Skript>

Er meinte: Das Neuschreiben des Skripts in Flash kann das aktuelle Problem lösen, aber irgendwann, nachdem das Objekt geladen wurde, wird das Skript in Flash die von Ihnen neu geschriebene Funktion überschreiben. Daher gibt es keine Garantie, dass der Player Ihre überschriebene Funktion zum gegebenen Zeitpunkt aufruft. Um dieses Ziel zu erreichen, stellte er die Funktion so ein, dass alle 10 Millisekunden die im Flash bereitgestellte Funktion überschrieben wird. Dadurch wird das Problem gelöst. Gleichzeitig vereinfachte er diesen Code, um die folgenden zwei „Versionen“ zu bilden:
Vereinfachte Version 1: Etwas einfacher

Code kopieren
Der Code lautet wie folgt:

<Skripttyp="text/javascript">
var setRemoveCallback = Funktion() {
__flash__removeCallback = Funktion(Instanz, Name) {
wenn(Instanz) {
Instanz[Name] = null;
}
};
window.setTimeout(setRemoveCallback, 10);
};
setRemoveCallback();
</Skript>

Vereinfachte Version 2: Super einfach

Code kopieren
Der Code lautet wie folgt:

<script type="text/javascript">(Funktion(){var s=Funktion(){__flash__removeCallback=Funktion(i,n){wenn(i)i[n]=null;};window.setTimeout(s,10);};s();})();</script>

Ich habe eine Weile darüber nachgedacht und meine Gedanken geordnet:
Dieser Fehler tritt beim Aktualisieren der Seite auf. Beim Aktualisieren der Seite wird die alte Seite gelöscht und die neue Seite neu geladen. Theoretisch sollte es kein Problem sein, die neue Seite neu zu laden, sodass der Fehler während der „Nacharbeit“ auftritt, bevor die alte Seite verschwindet. Ich kann dasselbe Ziel erreichen, indem ich die Rückruffunktion im Flash neu schreibe, bevor die Seite verschwindet. Der Code lautet wie folgt und der Test ist erfolgreich.

Code kopieren
Der Code lautet wie folgt:

/*Beheben Sie den internen Skriptfehler beim Video-Umschalten*/
<Skripttyp="text/javascript">
Funktion endcall(){var s=Funktion(){__flash__removeCallback=Funktion(i,n){wenn(i)i[n]=null;};window.setTimeout(s,10);};s();}
Fenster.beforeunload = Anruf beenden;
</Skript>

<<:  So erstellen Sie ein responsives Säulendiagramm mit dem CSS-Rasterlayout

>>:  Empfohlene 20 besten kostenlosen englischen Handschrift-Schriftarten

Artikel empfehlen

Wir zeigen Ihnen einen Trick, um einen Textvergleich unter Linux durchzuführen

Vorwort Während des Schreibens des Codes werden w...

MySQL-Abfrageoptimierung mit benutzerdefinierten Variablen

Inhaltsverzeichnis Optimieren von Sortierabfragen...

Zusammenfassung von 28 gängigen JavaScript-String-Methoden und Verwendungstipps

Inhaltsverzeichnis Vorwort 1. Ermitteln Sie die L...

Einführung in den Aufbau von NFS-Diensten unter Centos7

Inhaltsverzeichnis 1. Server 2. Kunde 3. Testdien...

Beschreiben Sie kurz den Unterschied zwischen MySQL und Oracle

1. Oracle ist eine große Datenbank, während MySQL...

Mysql-Timeline-Daten, um die ersten drei Daten desselben Tages zu erhalten

Erstellen von Tabellendaten CREATE TABLE `praise_...

Detaillierte Erläuterung der Verwendung des gcc-Befehls unter Linux

Inhaltsverzeichnis 1. Vorverarbeitung 2. Zusammen...

So migrieren Sie MySQL-Daten richtig nach Oracle

In der MySQL-Datenbank gibt es eine Tabelle Stude...

Centos7-Installation und Konfiguration von Mysql5.7

Schritt 1: Holen Sie sich die MySQL YUM-Quelle Ge...

Einige Fragen zu Hyperlinks

<br />Ich freue mich sehr, an dieser Folge d...

So legen Sie MySQL-Berechtigungen mit phpmyadmin fest

Inhaltsverzeichnis Schritt 1: Melden Sie sich als...

So verwenden Sie Umgebungsvariablen in der Nginx-Konfigurationsdatei

Vorwort Nginx ist ein auf Leistung ausgelegter HT...