web-dev-qa-db-fra.com

Commandes personnalisées vidéo HTML 5

Comme de nombreux développeurs Web, je suis impatient de diffuser de la vidéo en utilisant la nouvelle balise HTML 5 <video>. La prise en charge des navigateurs n’est certainement pas encore assez large, il est donc indispensable d’utiliser un repli Flash/SWF .

Cela m'a fait réfléchir: en Flash, il est possible de personnaliser fortement les commandes de lecture (pause, lecture, arrêt, recherche, volume, etc.) en HTML 5 ?. Quelles options existe-t-il pour personnaliser les glyphes, les icônes et les couleurs des contrôles vidéo? Est-ce que Javascript est requis? Par exemple, la page suivante rend différents contrôles en fonction du navigateur - testés avec FF3.5, Chrome et Safari:

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

Ce serait vraiment génial de personnaliser et de normaliser les contrôles sur les navigateurs et même de les faire correspondre aux contrôles Flash utilisés par les navigateurs plus anciens. 

htmlvideohtml5
24
leepowers

Dans la spécification HTML5, il existe un controlsattribut pour <video>.

Consultez également cet article: Vidéo sur le Web - Plongez dans HTML5 . Cela explique:

Par défaut, l'élément n'exposera aucun type de contrôle de lecteur. Vous pouvez créer vos propres contrôles avec HTML, CSS et JavaScript classiques. L'élément possède des méthodes telles que play () et pause (), ainsi qu'une propriété en lecture/écriture appelée currentTime. Il existe également des propriétés de lecture/écriture de volume et de mise en sourdine. Donc, vous avez vraiment tout ce dont vous avez besoin pour construire votre propre interface.

Si vous ne voulez pas créer votre propre interface, vous pouvez indiquer au navigateur d’afficher un ensemble de contrôles intégré. Pour ce faire, il suffit d'inclure l'attribut controls dans votre balise.

27
Philip Morton

YouTube exécute actuellement une version bêta de HTML5. Vous pouvez l'activer en visitant http://www.youtube.com/html5 . Actuellement, toutes les vidéos ne sont pas affichées en HTML5 après l'activation de la version bêta. Les vidéos affichées en HTML5 ont une animation de chargement différente afin que vous puissiez les identifier (comme celle-ci http://www.youtube.com/watch?v=KT1wdjlbyFc ).

Comme vous pouvez le voir, leur lecteur vidéo est identique à la version flash.

3
Flatlin3

Pour ceux qui s'intéressent à un excellent lecteur vidéo HTML5 multi-navigateurs, découvrez ce que fait Vimeo ( http://vimeo.com ). Visitez n'importe quelle vidéo avec un navigateur compatible HTML5 (fonctionne avec au moins Safari, Chrome et IE9) et choisissez "Basculer vers le lecteur HTML5".

Ils ont mis en place des contrôles HTML personnalisés qui répliquent intégralement l'apparence et la convivialité de leur lecteur Flash. Les contrôles ont la même apparence sur tous les navigateurs.

Meilleure implémentation multi-navigateurs que j'ai vue à ce jour. Ils utilisent même un élément <canvas> pour animer le sélecteur de volume.

2
Todd

À mon avis, l'apparence des contrôles dépend du navigateur (et n'est donc pas très personnalisable). Vous pouvez voir à quoi ressemble votre page de test dans tous les navigateurs en la soumettant à Litmus .

1
Richard Inglis

Voici un article de Nice sur la création de vos propres contrôles personnalisés . https://sproutvideo.com/blog/quick-and-dirty-custom-player-using-jquery-ui.html

Le code a l'air simple:

<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