Événements audio et vidéo essentiels pour HTML5

Explication détaillée des événements clés dans l'audio et vidéo HTML5 et analyse des différences de navigateur

Les éléments

HTML5 <video></video> et <audio></audio> fournissent des mécanismes d'événements riches. Certains événements tels que l'événement "Play" sont clairs en un coup d'œil, tandis que d'autres, tels que l'événement "Progress", sont plus compliqués. Cet article explorera certains des événements médiatiques les plus importants en profondeur, en analysant leur calendrier déclencheur, leurs attributs connexes et leurs différences entre les différents navigateurs.

Points de base

Les éléments
• HTML5 <video></video> et <audio></audio> offrent une variété d'événements, certains sont simples et faciles à comprendre (tels que des événements "play"), et certains sont plus complexes (tels que des événements "progress").
• play Les événements (tels que "play", "pause", "terminé") répondent aux opérations de lecture ou de pause multimédia et correspondent aux fonctions et propriétés multimédias correspondantes. Mais certains navigateurs ont des exceptions, comme dans Opera, Safari et IE10, lorsque la lecture des médias est terminée, le drapeau .paused peut toujours être faux.
• Les événements de chargement sont liés à des défaillances de chargement ou de chargement des données médiatiques, y compris "LoadStart", "Progress", "LoadedMetadata", "CanPlay" et "CanPlaythrough". Mais leur comportement varie selon le navigateur et l'attribut preload.
• L'événement "Progress" est déclenché en permanence pendant les données de téléchargement, et un ensemble de gammes de temps est utilisé pour indiquer la progression du téléchargement. Cependant, il existe des différences dans les navigateurs, comme l'opéra crée deux gammes, tandis que le safari mobile ne conserve que la gamme d'activités.
• L'événement "TimeUpdate" est déclenché en permanence pendant la lecture multimédia et est utilisé pour synchroniser d'autres éléments avec la lecture multimédia. Cet événement n'a généralement pas d'erreurs ou de différences de navigateur.

Play Event

Play Event Response Response Media Playback ou Pause Operation. Ces événements sont relativement simples.

Les événements "Play" et "Pause" sont tirés lorsque les médias jouent ou s'arrêtent respectivement. L'événement "terminé" est tiré à la fin de la lecture des médias, que ce soit la fin de la lecture normale ou que l'utilisateur passe manuellement à la fin.

Les deux premiers événements correspondent aux méthodes play() et pause(). Les deux derniers événements correspondent aux attributs .paused et .ended. La propriété .paused est par défaut True, ou True lorsque les médias sont pauvres; .ended

Cependant, il y a une exception significative pour Opera, Safari et IE10: lorsque la lecture des médias est terminée, le drapeau

est toujours faux (logiquement, cela devrait être vrai parce que les médias ne jouent plus). Cela signifie que le gestionnaire de bouton Play / Pause simple échouera dans ce cas: .paused

button.addEventListener('click', function(e) {
  if(media.paused) {
    media.play();
  } else {
    media.pause();
  }
}, false);

Ce problème peut être résolu en appelant manuellement la méthode

dans la réponse de l'événement "terminé": pause()

media.addEventListener('ended', function(e) {
  media.pause();
}, false);

Firefox et Chrome en interne ont résolu ce problème en déclenchant l'événement "pause" avant l'événement "terminé".

Événement de chargement

Les événements de chargement sont liés au chargement (ou à l'échec de chargement) des données médiatiques. La fréquence de ces événements dépend de l'état de chargement des supports, c'est-à-dire si l'attribut preload est utilisé et si le support a été mis en cache.

Dans tous les cas, le premier événement déclenché est l'événement "LoadStart", indiquant que le navigateur a commencé à chercher des données. Mais cela signifie seulement que le navigateur commence à chercher et ne signifie pas que des données ont réellement chargé, ou que les ressources multimédias existent même.

Si la valeur de l'attribut preload est "Aucun", l'événement "LoadStart" est le seul événement déclenché avant le début de la lecture. Et si la valeur de l'attribut preload est "métadonnées" ou "auto", deux autres événements seront bientôt déclenchés: "Progress" et "LodedMetadata". (Ces événements se déclencheront toujours s'il n'y a pas de précharge, mais attendez que la lecture commence.)

L'événement "Progress" est relativement compliqué et sera discuté séparément dans la section suivante. L'événement "LoadedMetadata" est simple, ce qui signifie que le navigateur a chargé suffisamment de métadonnées pour connaître le média .duration (en tant que numéro de point flottant, et non sa valeur par défaut NAN).

Bien sûr, l'événement "LoadedMetadata" ne sera licencié que si le support peut se charger - si la charge échoue (par exemple, src renvoie 404), le support générera un événement "d'erreur" et ne pourra pas à jouer plus loin.

Encore une fois, certaines différences importantes du navigateur ont été rencontrées. Dans Mobile Safari, le paramètre preload est intentionnellement non implémenté, de sorte que toutes les valeurs de la propriété se comportent de la même manière que preload="none". En revanche, dans IE10, les métadonnées multimédias se charge toujours par défaut, donc preload="none" se comporte la même chose que preload="metadata".

"Progress" Event

L'événement "Progress" continue de tirer pendant (et seulement) le téléchargement des données. Ainsi, lorsque preload est défini sur "Aucun", il ne déclenche pas du tout avant le début de la lecture; "Auto", il continuera de tirer jusqu'à ce que l'ensemble du fichier multimédia soit téléchargé. preload preload Cependant, pour tous les paramètres

, une fois la lecture commence, le navigateur continuera à télécharger l'intégralité du fichier multimédia jusqu'à ce qu'il n'y ait pas de données à charger, et le téléchargement d'arrière-plan se poursuivra même si la vidéo est par la suite interrompue.

preload Les données elle-même sont représentées par un ensemble de gammes de temps, et il est important de comprendre comment ces gammes de temps fonctionnent avant d'utiliser l'événement "Progress".

(Le contenu suivant est fondamentalement le même que le texte d'origine, mais certaines phrases ont été ajustées et polies, évitant la copie directe des grands paragraphes et le maintien de la signification d'origine)

Événement de mise à jour du temps

Enfin, introduisons brièvement l'événement médiatique «timeupdate», qui continue de déclencher pendant la lecture des médias. Vous pouvez utiliser cet événement pour synchroniser d'autres contenus avec la lecture multimédia, tels que la création de sous-titres manuels, la mise en évidence de lignes actives dans les transcriptions et même la synchronisation multimédia.

La fréquence de déclenchement de l'événement "timeupdate" n'est pas spécifiée, et elle varie en fait considérablement selon les navigateurs. Mais la fréquence moyenne globale est d'environ 3 à 5 fois par seconde, ce qui est suffisamment précis à la plupart des fins de synchronisation.

Pour autant que je sache, il n'y a pas d'erreurs de navigateur ni de différences dans cet événement.

Conclusion

Cet article ne couvre pas tous les événements médiatiques possibles - ainsi que avec d'autres événements de lecture et de saut, les événements de statut de réseau avancé et même celui qui se déclenche lorsque le volume change. Mais j'ai couvert ce que je pense être la chose la plus importante - assez pour répondre aux besoins de script vidéo et audio les plus simples et suffisamment pour créer une interface personnalisée de base.

(La partie FAQS est fondamentalement la même que le texte d'origine, mais certaines phrases ont été ajustées et polies, évitant la copie directe des grands paragraphes et le maintien de la signification d'origine)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!