Le chemin de Xiaoqiang vers le développement mobile HTML5 (12) - à partir d'une balise multimédia-Tutoriel H5-php.cn

1. Lecture vidéo

<html>  
    <head>  
        <title>多媒体播放</title>  
    </head>  
    <body>  
        <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4">  
    </body>  
</html>

Copier après la connexion

L'effet est le suivant :

Le chemin de Xiaoqiang vers le développement mobile HTML5 (12) - à partir dune balise multimédia

La balise

Attribut

Nouvel attribut en HTML5.

Valeur de l'attribut Description

hauteur pixels Définissez la hauteur du contenu intégré.

src url L'URL du contenu intégré.

type type définit le type de contenu intégré.

width pixels Définissez la largeur du contenu intégré.

La balise prend en charge les attributs globaux en HTML5 et les attributs d'événement en HTML5

Ajoutons un attribut de largeur pour essayer

<embed src="http://demo.inwebson.com/html5-video/iceage4.mp4" width="100px"/>

Copier après la connexion

< Le 🎜>

L'attribut Le chemin de Xiaoqiang vers le développement mobile HTML5 (12) - à partir dune balise multimédia

type spécifie le type MIME du contenu intégré.

Pour les types MIME, veuillez vous référer aux types IANA MIME

Par exemple :

<!DOCTYPE html>  
<html>  
<body>  
  
<embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />  
  
</body>  
</html>

Copier après la connexion

2. Introduction à IANA MIME

Le type d'extension de messagerie Internet polyvalent est un type qui définit un fichier avec une certaine extension à ouvrir par une application Lorsque le fichier avec l'extension est accédé, le navigateur l'ouvrira automatiquement. utilisez le programme d’application spécifié pour l’ouvrir. Il est principalement utilisé pour spécifier certains noms de fichiers définis par le client et certaines méthodes d'ouverture de fichiers multimédias.

Chaque type MIME se compose de deux parties. La première partie est la grande catégorie de données, telles que le son, l'image, etc., et la deuxième partie. définit le type spécifique.

Types MIME courants (universels) :

Langage de balisage hypertexte text.html text/html

xml document.xml text/xml

Document XHTML. xhtml application/xhtml xml

Text normal.txt text/plain

RTF text.rtf application/rtf

Document PDF .pdf application/pdf

Fichier Microsoft Word .word application/msword

PNG image.png image/png

GIF graphique.gif image/gif

JPEG graphique.jpeg,.jpg image/jpeg

au fichier son .au audio/basic

Fichier de musique MIDI mid,.midi audio/midi,audio/x-midi

Fichier de musique RealAudio .ra , .ram audio/x-pn-realaudio

Fichier MPEG .mpg, .mpeg video/mpeg

Fichier AVI .avi video/x-msvideo

Fichier GZIP application/. x-gzip

Fichier TAR .tar application/x-tar

Application de données binaires arbitraires/octet-stream

3. Introduction à HTML5

Html5 deviendra le nouveau standard pour HTML, XHTML et HTML DOM.

La dernière version du HTML a été créée en 1999. Depuis, le monde du Web a radicalement changé.

HTML5 est toujours un travail en cours. Cependant, la plupart des navigateurs modernes prennent déjà en charge HTML5.

HTML5 est le résultat d'une collaboration entre le W3C et le WHATWG.

——W3C fait référence au World Wide Web Consortium, World Wide Web Consortium.

- WHATWG fait référence au groupe de travail sur la technologie des applications hypertextes Web.

Le WHATWG travaille sur les formulaires et applications Web, tandis que le W3C se concentre sur XHTML 2.0. En 2006, les deux parties décident de collaborer pour créer une nouvelle version du HTML.

Quelques règles établies pour HTML5 :

Les nouvelles fonctionnalités doivent être basées sur HTML, CSS, DOM et JavaScript.
Réduisez le besoin de plug-ins externes (tels que Flash) - de nombreuses balises multimédia puissantes intégrées
Meilleure gestion des erreurs
Plus de balisage pour remplacer les scripts
HTML5 doit être indépendant des appareils - fonctionner parfaitement sur PC et appareils mobiles
Le processus de développement doit être transparent pour le public

Quelques nouvelles fonctionnalités intéressantes en HTML5 :

Élément Canvas pour le dessin
Éléments vidéo et audio pour la lecture multimédia
Meilleure prise en charge du stockage local hors ligne
Nouveaux éléments de contenu spéciaux, tels que l'article, le pied de page, l'en-tête, la navigation, la section
Nouveaux contrôles de formulaire, tels que le calendrier, la date, l'heure, l'e-mail, l'URL, la recherche

Pour des informations plus détaillées sur HTML5, veuillez vous référer au sujet de mon blog : http://blog.csdn.net/column/details/dawanganban-html5.html

Dernières versions de Safari, Chrome, Firefox, et Opera prennent en charge certaines fonctionnalités HTML5. Internet Explorer 9 prendra en charge certaines fonctionnalités HTML5.

4. Attributs globaux en HTML5

Les attributs globaux suivants peuvent être utilisés pour n'importe quel élément HTML5

attribut

Description

accesskey précise le raccourci clavier pour accéder à l'élément

class précise le nom de classe de l'élément (utilisé pour préciser la classe dans la feuille de style ).

contenteditable précise si les utilisateurs sont autorisés à modifier le contenu.

contextmenu Spécifie le menu contextuel de l'élément.

dir spécifie la direction du texte du contenu dans l'élément.

draggable Spécifie si l'utilisateur est autorisé à faire glisser l'élément.

dropzone Spécifie ce qui se passe lorsque l'élément/les données glissés sont déposés dans l'élément.

hidden précise que l'élément n'est pas pertinent. Les éléments masqués ne seront pas affichés.

id spécifie l'ID unique de l'élément.

lang spécifie le code de langue du contenu dans l'élément.

spellcheck Spécifie si l'élément doit être vérifié pour l'orthographe ou la grammaire.

style spécifie le style en ligne de l'élément.

tabindex spécifie l'ordre de contrôle des touches de tabulation des éléments.

title spécifie des informations supplémentaires sur l'élément.

5. Attributs d'événement globaux

HTML 4 ajoute la possibilité de déclencher un comportement dans le navigateur via des événements, tels que as Un morceau de JavaScript est lancé lorsque l'utilisateur clique sur un élément.

Le tableau suivant répertorie les attributs d'événement standard qui peuvent être insérés dans les éléments HTML 5 pour définir le comportement des événements.

Attribut d'événement de fenêtre

Événement déclenché par un objet fenêtre.

Applicable à la balise

: La couleur marquée est la nouvelle balise (html5)

Attribut

Valeur

Description

script onafterprint Exécuter le script après l'impression du document

script onbeforeprint Exécuter le script avant l'impression du document

script onbeforeonload Exécuter le script avant le chargement du document

script onblur Exécuter le script lorsque la fenêtre perd le focus

script onerror Exécuter le script lorsqu'une erreur se produit

script onfocus Exécuter le script lorsque la fenêtre obtient le focus

script onhaschange Exécuter le script lorsque le document change

script onload Exécuter le script lorsque le document se charge

script onmessage Exécuter le script lorsque le message est déclenché

script onoffline Exécuter le script lorsque le document est hors ligne

script ononline Exécute le script lorsque le document est en ligne

script onpagehide Exécute le script lorsque la fenêtre est masquée

script onpageshow Exécute le script lorsque la fenêtre est visible

script onpopstate Lorsque la fenêtre est visible Exécuter le script lorsque l'historique change

script onredo Exécuter le script lorsque le document effectue une opération de réexécution (redo)

script onresize Exécuter le script lorsque la fenêtre est redimensionnée

script onstorage quand Exécuter le script lorsque le document est chargé

script onundo Lorsque la zone de stockage Web est mise à jour (lorsque les données dans l'espace de stockage changent)

script onunload Exécutez le script lorsque l'utilisateur quitte le document

Événements de formulaire

Événements déclenchés par des actions dans les formulaires HTML.

s'applique à tous les éléments HTML 5, mais est le plus couramment utilisé dans les éléments de formulaire :

Attributs

Valeur

Description

script onblur Exécuter le script lorsque l'élément perd le focus

script onchange Exécuter le script lorsque l'élément change

script oncontextmenu Exécuter le script lorsque le menu contextuel est déclenché

script onfocus Exécute le script lorsque l'élément obtient le focus

script onformchange Exécute le script lorsque le formulaire change

script onforminput Exécute le script lorsque le formulaire reçoit une entrée de l'utilisateur

oninput script Exécutez le script lorsque l'élément reçoit une entrée de l'utilisateur

oninvalid script Exécutez le script lorsque l'élément est invalide

onreset script Exécutez le script lorsque le formulaire est réinitialisé. HTML 5 n'est pas pris en charge.

script onselect Exécute le script lorsque l'élément est sélectionné

script onsubmit Exécute le script lorsque le formulaire est soumis

Événement clavier

Événement déclenché par le clavier.

S'applique à tous les éléments HTML 5 :

Attributs

Valeur

Description

onkeydown script Exécute le script lorsque la touche est enfoncée

onkeypress script Exécute le script lorsque la touche est enfoncée et relâchée

onkeyup script Exécute le script lorsque la touche est relâchée

Événements de souris

Événements déclenchés par la souris ou des actions utilisateur similaires.

S'applique à tous les éléments HTML 5 :

Attributs

Valeur

Description

script onclick Exécute le script lorsque l'on clique sur la souris

script ondblclick Exécute le script lorsque l'on double-clique sur la souris

script ondrag Exécute le script lorsque l'élément est déplacé

script ondragend Une fois glissé Exécuter le script à la fin de l'opération de glisser

script ondragenter Exécuter le script lorsque l'élément est glissé vers une cible de glisser-déposer valide

script ondragleave Exécuter le script lorsque l'élément quitte la cible de glisser-déposer valide

script ondragover Script qui s'exécute lorsque l'élément est glissé sur une cible de glisser-déposer valide

script ondragstart Script qui s'exécute lorsque l'opération de glisser démarre

script ondrop Pendant que l'élément glissé est déplacé Exécuter le script lorsque le bouton de la souris est enfoncé

script onmousedown Exécuter le script lorsque le bouton de la souris est enfoncé

script onmousemove Exécuter le script lorsque le pointeur de la souris se déplace

script onmouseout Exécuté lorsque le pointeur de la souris sort de l'élément Script

script onmouseover Exécute le script lorsque le pointeur de la souris se déplace sur l'élément

onmouseup script Exécute le script lorsque le bouton de la souris est relâché

onmousewheel script Exécute lorsque la molette de la souris est tournée Script

onscroll script Exécute le script lors du défilement de la barre de défilement de l'élément

Media événement

Événements déclenchés par des médias tels que la vidéo, l'image et l'audio.

s'applique à tous les éléments HTML 5, mais est le plus couramment utilisé dans les éléments multimédias (tels que audio, embed, img, object et video) :

Attributs

Valeur

Description

onabort script Exécute le script lorsqu'un événement d'abandon se produit

oncanplay script Lorsque le média est capable de démarrer la lecture mais peut être nécessaire en raison de la mise en mémoire tampon. Exécuter le script à l'arrêt

script oncanplaythrough Exécuter le script lorsque le média peut être lu jusqu'à la fin sans s'arrêter en raison de la mise en mémoire tampon

script ondurationchange Exécuter le script lorsque la longueur du média change

onemptied script Script à exécuter lorsque l'élément de ressource média est soudainement vide (erreur réseau, erreur de chargement, etc.)

onended Script à exécuter lorsque la fin du média est atteinte

script onerror Lorsqu'une erreur se produit lors du chargement de l'élément

script onloadeddata

script onloadedmetadata Exécuter le script lorsque la durée de l'élément multimédia et d'autres données multimédias ont été chargés

script onloadstart lorsque Exécutez le script lorsque le navigateur commence à charger les données multimédias

script onpause Exécutez le script lorsque les données multimédias sont en pause

script onplay Exécutez le script lorsque les données multimédias sont sur le point de commencer la lecture

script onplaying when Exécutez le script lorsque la lecture des données multimédias a commencé

script onprogress Exécutez le script lorsque le navigateur récupère les données multimédias.

script onratechange. Exécutez le script lorsque la vitesse de lecture des données multimédias change.

script onreadystatechange Exécutez le script lorsque l'état de préparation change.

script onseeking Exécutez le script lorsque le positionnement. l'attribut [1] de l'élément multimédia n'est plus vrai et le positionnement est terminé

script de recherche Exécutez le script lorsque l'attribut de positionnement de l'élément multimédia est vrai et que le positionnement a démarré

script installé. . Exécutez le script lorsqu'il y a une erreur lors de la récupération des données multimédias (délai).

script onsuspend. Lorsque le navigateur a exécuté le script lors de la récupération des données multimédias mais s'arrête avant de récupérer l'intégralité du fichier multimédia

<.>script ontimeupdate Exécuter le script lorsque le média change sa position de lecture

script onvolumechange Lorsque le média change de volume ou lorsque le volume est Exécuter le script lorsqu'il est réglé sur muet

script en attente Exécuter le script lorsque le média a arrêté de jouer mais a l'intention de continuer à jouer

Le prochain article présentera en détail l'utilisation des attributs et des événements globaux

Ce qui précède est le parcours de développement mobile HTML5 de Xiaoqiang (12) - à partir d'une balise multimédia, veuillez faire attention au contenu plus connexe PHP chinois site Web (m.sbmmt.com) !