Warum funktioniert die Vollbild-Schaltfläche bei Verwendung von video.js nicht in einem iframe?

8

Ich benutze video.js zum Abspielen von Videos. Wenn nicht einen iframe verwendet, funktioniert das Klicken auf den Vollbild-Button wie erwartet. Wenn Sie einen Iframe verwenden, funktioniert die Vollbild-Schaltfläche jedoch nicht. Warum ist das?

Die Startseite von video.js ist Ссылка

Der Code der iframe-Seite lautet:

%Vor%

Der Code der Seite sco01-m.htm lautet:

%Vor%

Die Seite sco01-m.htm kann die Vollbild-Schaltfläche verwenden, aber die Iframe-Seite kann nicht verwendet werden.

    
caizy20 04.01.2013, 06:01
quelle

3 Antworten

20

Laut W3 Spec "Nur eingebettete Inhalte, die über das allowfullscreen -Attribut des HTML-iframe-Elements ausdrücklich erlaubt sind, können im Vollbildmodus angezeigt werden. Dies verhindert, dass nicht vertrauenswürdiger Inhalt in den Vollbildmodus wechselt."

Obwohl die Unterstützung von Browsern für den Vollbildmodus immer noch experimentell ist, müssen Sie die Webkit- und Mozilla-spezifischen Attribute webkitallowfullscreen und mozallowfullscreen :

verwenden %Vor%

Bei Browsern, die die Vollbild-API nicht unterstützen (z. B. Internet Explorer 10 und niedriger ), Fullscreen funktioniert einfach nicht. Um den Vollbildmodus in diesen Browsern näher zu bestimmen, wird der video.js-Player so erweitert, dass er das Browserfenster ausfüllt. Wenn der Player jedoch in einem Iframe ist, kann er nicht größer als der Iframe werden.

Wenn mehrere verschachtelte Iframes vorhanden sind, benötigen auch alle übergeordneten iframes diese Attribute.

    
misterben 04.01.2013 08:36
quelle
2

Sie müssen Attribute für Webkit und Mozilla-spezifische Attribute verwenden, wenn Sie iframe verwenden.

%Vor%

Zum Beispiel:

%Vor%

Dies wird das Problem lösen:)

    
user3139583 26.02.2014 13:46
quelle
0

Ссылка Mit Iframe setzen Sie Ihr Video in einem Browser wie 640x315 in festen Grenzen. In einigen Browsern bleiben die Perimeter 640 x 360 Pixel. Es gibt einen Weg um dies auf allen Browsern, wenn Sie die Geduld haben, 2 HTML-Seiten für 1 Video zu erstellen. Erstellen Sie eine exakte doppelte HTML-Seite und nennen Sie sie sco01-mlargeplayer.html. In der großen Player-Seite legen Sie das Video mit größeren Breiten- und Höhenumfängen fest. Jetzt unter Ihrem originalen Seitenplayer-Code nach dem / video-Tag implementieren Sie einen externen Link-Button, der eine neue Seite mit etwas wie "Playergröße vergrößern" öffnet. Verwenden Sie das Attribut target="_ parent", um die neue Seite im selben Fenster zu öffnen, wenn Sie Personen der eingebetteten Videoseite nicht stören. Wenn Sie möchten, dass eine neue Seite geöffnet wird, lesen Sie die "Google Chrome Tab-Notiz" weiter unten auf der Seite. Denken Sie daran, auf der neu erstellten Seite "sco01-mlargeplayer.html" einen Link "Spielergröße verringern" hinzuzufügen, um zur ursprünglichen Videoseite zurückzukehren. Eine Zurück-Schaltfläche funktioniert gut.

%Vor%

Wenn Sie auf einer neuen Seite öffnen möchten, ist der Google Chrome-Browser knifflig. Ссылка -Das Problem mit "Google Chrome Tabs" spielt keine doppelten Videos in neuen Tabs. So erhalten Sie das gleiche Video auf zwei Google Chrome-Tabs, wenn die zweite Seite in einem neuen Tab geöffnet wird: Ändern Sie die Reihenfolge der Quellvideos auf der zweiten Seite sco01-mlargeplayer.html. Auf diese Weise erkennt Chrome das Video als neues Video.

%Vor%

Ich arbeite an einem Player-Kontrollsystem, das mit allen html5-Spielern verwendet werden kann, nur um die Videos auf meiner Seite zu starten. Sie können hier eine Demo einbetten, die aktualisiert wird, wenn ich daran arbeite Der Woggie-Spieler.

%Vor%     
aberrated 04.01.2013 22:13
quelle

Tags und Links