webentwicklung-frage-antwort-db.com.de

Benutzerdefinierte Steuerelemente für HTML 5-Videos

Wie viele Webentwickler freue ich mich auf das Streaming von Videos, die das neue HTML 5 <video>-Tag verwenden. Die Browser-Unterstützung ist definitiv noch nicht breit genug, daher ist die Verwendung eines Flash/SWF-Fallbacks ein Muss.

Das brachte mich zum Nachdenken: In Flash ist es möglich, die Steuerelemente für die Wiedergabe (Pause, Wiedergabe, Stopp, Suchen, Lautstärke usw.) in HTML 5 stark anzupassen. Welche Optionen gibt es, um die Glyphen, Symbole und Farben von Videosteuerelementen anzupassen? Ist Javascript erforderlich? Auf der folgenden Seite werden beispielsweise abhängig vom Browser, der mit FF3.5, Chrome und Safari getestet wurde, verschiedene Steuerelemente dargestellt:

http://henriksjokvist.net/examples/html5-video/

Es wäre wirklich toll, Steuerelemente in allen Browsern anzupassen und zu standardisieren und sogar die Flash-Steuerelemente von älteren Browsern anzupassen. 

24
leepowers

In der HTML5-Spezifikation gibt es ein controlsattribute für <video>.

Lesen Sie auch diesen Artikel: Video im Internet - Tauchen Sie in HTML5 . Es erklärt:

Standardmäßig macht das Element keinerlei Player-Steuerelemente verfügbar. Sie können Ihre eigenen Steuerelemente mit einfachem alten HTML, CSS und JavaScript erstellen. Das Element verfügt über Methoden wie play () und pause () und eine Lese-/Schreibeigenschaft namens currentTime. Es gibt auch Lese- und Schreibvolumen und stummgeschaltete Eigenschaften. So haben Sie wirklich alles, was Sie brauchen, um Ihre eigene Schnittstelle aufzubauen.

Wenn Sie keine eigene Benutzeroberfläche erstellen möchten, können Sie den Browser anweisen, eingebaute Steuerelemente anzuzeigen. Fügen Sie dazu einfach das Steuerelementattribut in Ihr Tag ein.

27
Philip Morton

YouTube führt derzeit eine HTML5-Beta durch. Sie können es aktivieren, indem Sie http://www.youtube.com/html5 besuchen. Derzeit werden nach der Aktivierung der Beta nicht alle Videos in HTML5 angezeigt. In HTML5 angezeigte Videos erhalten eine andere Lade-Animation, sodass Sie sie identifizieren können (wie diese http://www.youtube.com/watch?v=KT1wdjlbyFc ).

Wie Sie sehen, sieht der Videoplayer genauso aus wie die Flash-Version.

3
Flatlin3

Wenn Sie sich für einen tollen Browserübergreifenden HTML5-Videoplayer interessieren, schauen Sie sich an, was Vimeo ( http://vimeo.com ) tut. Besuchen Sie ein beliebiges Video mit einem HTML5-fähigen Browser (funktioniert mindestens mit Safari, Chrome und IE9) und wählen Sie "Zu HTML5-Player wechseln".

Sie haben benutzerdefinierte HTML-Steuerelemente implementiert, die ihr Flash-Player-Erscheinungsbild vollständig replizieren. Die Steuerelemente sehen in allen Browsern identisch aus.

Die beste browserübergreifende Implementierung, die ich bisher gesehen habe. Sie verwenden sogar ein <canvas>-Element, um den Volume-Selektor zu animieren.

2
Todd

Ich vermute, dass das Erscheinungsbild der Steuerelemente vom Browser abhängt (und daher nicht sehr anpassbar ist). Sie können sehen, wie Ihre Testseite in allen Browsern aussieht, indem Sie sie an Litmus senden.

1
Richard Inglis

Hier ist ein schöner Artikel, wie Sie Ihre eigenen benutzerdefinierten Steuerelemente erstellen können https://sproutvideo.com/blog/quick-and-dirty-custom-player-using-jquery-ui.html

Der Code sieht einfach aus:

<body>
        <div class="player">
            <div class="video">
                <iframe class='sproutvideo-player' type='text/html' src='https://videos.sproutvideo.com/embed/709adcb31f19e5c6f8/cd8cf2e796aa69d3?noBigPlay=true&showcontrols=false' width='100%' height='100%' frameborder='0'></iframe>
            </div>
            <div class="toolbar">
                <div class="control play-pause"><a href="#"><i class="icon-play"></i></a></div>
                <div class="progress-container">
                    <div class="progress"></div>
                </div>
                <div class="control fullscreen"><a href="#"><i class="icon-fullscreen"></i></a></div>
                <div class="control volume"><a href="#"><i class="icon-volume-up"></i></a></div>
            </div>
        </div>
    </body>
0
john ktejik