Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection vers le son
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 Menu HTML 5  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7  - Cours 8  - cours 9 
 Menu cours 4 HTML 5  - figure  - legend  - audio  - video  - canvas  - progress  - embed 
- intégration : schema.org  - video.js 



Cours 4 HTML 5 avec LigneWeb
les balises multimédia.



 © LigneWeb  ... /Info 3 HTML 5:figure-audio-video-canvas-progress-embed
© design : LigneWeb
© : alain jean deligne - LigneWeb



Cette page est réalisée en XHTML 1.0 transitionnel avec du CSS 2 et du CSS 3 ...
Cette page va être réalisée en parallèlle en HTML 5 et CSS 3 prochainement ...



Le logo de LigneWeb

Les balises multimédia :


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




La balise figure :

... c'est une balise d'intégration d'images, photos et figures ...

... elle utilise la balise ... figure ... et s'écrit comme suit : ...
... <figure> ... comme balise entrante ... et ... </figure> ... comme balise sortante ...




... la balise legend :

... la balise ... legend ... permet de mettre une légende ... et s'écrit : ...
... <legend> ... pour la balise entrante ... et ... </legend> ... pour la balise sortante ...

... un exemple :


... ces balises permettent d'intégrer dans un même bloc (section) des éléments faisant un tout ...
... dans ce cas, nous avons la balise figure avec legend à l'intérieur, suivie de l'image ...
... la phrase entourée de la balise p ne se voit que si l'image n'apparaît pas ...




La balise audio :

... la balise ... audio ... est utilisée pour intégrer du son, de la musique ... et s'écrit : ...

... <audio> ... pour la balise entrante ... et ... </audio> ... pour la balise sortante ...
... on place l'adresse dans la balise entrante ... comme ceci : ...
... <audio src="...."> ... en indiquant le chemin du fichier audio ...

... un exemple :


... on peut également définir un ... codec ... en indiquant également la ... source ... comme montré ci-dessous ...

... autre exemple :


... on voit que la balise ... source ... est une balise unique et se présente ...
... <source src="...." type="...." codec="...." /> ...
... et nous voyons ce que cela donne : ...
... on peut également voir l'ajout d'une phrase qui ne sera vue que s'il n'y a pas d'affichage possible ...




La balise video :

... c'est la balise pour intégrer une vidéo ...

... <video> ... pour la balise entrante ... et ... </video> ... pour la balise sortante ...
... on peut également voir l'ajout d'une phrase qui ne sera vue que s'il n'y a pas d'affichage possible ...

... un exemple :

une vidéo simple : ...
une vidéo intégrée : ...

... pour la vidéo intégrée, ... l'encodage proposé par YouTube sera sans-doute différent ...
... et nous aurons cette vidéo : ...

avec l'indexation avec Schema.org

Video: Pink Floyd HD Another Brick in the Wall 1994 Concert Earls Court London

... intégration d'une vidéo, à but pédagogique ...
( si vous ne pouvez voir la vidéo, téléchargez Shockwave Player )


Pink Floyd HD Another Brick in the Wall 1994 Concert Earls Court London

Pink Floyd HD Another Brick in the Wall 1994 Concert Earls Court London © You Tube 

Exemple suivant :

avec l'indexation avec Schema.org

Video: Raymond Devos : le best of.

... intégration d'une vidéo, à but pédagogique ...
( si vous ne pouvez voir la vidéo, téléchargez Shockwave Player )


INA | Raymond Devos, le best of (Ina Humour)






L'indexation avec Schema.org :

... pour être lu par le moteur de recherche Google, il est important d'ajouter : ...
... un code supplémentaire pour améliorer leur indexation et leur analyse par le moteur de recherche ...

...  les balises sémantiques Schema.org  ... décrites sur ...  abondance.com  ...

... une information très complète pour cette indexation ... : ...  schema.org : les balises VideoObject  ...



La balise canvas :

... c'est la balise utilisée pour intégrer des images dynamiques ...

... <canvas> ... pour la balise entrante ... et ... </canvas> ... pour la balise sortante ...
... dans l'exemple proposé, ... nous avons une image dynamique nommée ... imagedynamique ...
... qui doit être construite par un ...  script en JavaScript  ...

... un exemple :


... c'est avec cette balise que nous pouvons intégrer une carte dynamique ...
... mais avec un temps de chargement beaucoup plus petit ...
... un exemple classique est ... l'intégration d'une carte ... Google Maps ....

... la balise progress :

... c'est une balise utilisée ... dans la balise ... canvas ... indiquant la progression du déroulement ...

... <progress> ... pour la balise entrante ... et ... </progress> ... pour la balise sortante ...




La balise embed :

... c'est la balise utilisée pour intégrer des animations Flash ...

... <embed src="___" /> ... pour balise entrante ... unique ...

... un exemple :

Un autre exemple :

avec l'indexation avec Schema.org

Video: Pink Floyd

... intégration d'une vidéo, à but pédagogique ...
( si vous ne pouvez voir la vidéo, téléchargez Shockwave Player )

Pink Floyd © You Tube 





Remarque :

... comme le HTML 5 n'est pas encore complet, ... nous continuerons progressivement à fournir ces informations ...
… prenons le navigateur Safari 9.02 ou Chrome 47.0.2526.106 (64-bit) avec le module spécial ‘Webkit‘ pour l'ouverture à la lecture du HTML 5 et du CSS 3.0 …
… et nous voyons que le HTML 5 ne peut fonctionner dans tous ces aspects …




Un lecteur vidéo pour HTML 5 : Video.js ...

... on utilise le script ... video.js ... que l'on place dans le head ...
... et la balise video avec son contenant à l'emplacement désiré ...


... voir le site web pour installer ...  Video.js   ...
... il est assez facile à mettre en place.
... cela peut prendre quelques secondes pour obtenir le lecteur et l'utiliser sur votre page Web ... sur un site en HTML 5 ...

... une autre adresse pour ...  vidéo.js  ...

...  7 scripts pour un lecteur vidéo en HTML 5  ...

...  tutoriels  ... pour lecteurs vidéos en HTML 5 ...


... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 Menu HTML 5  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7  - Cours 8  - cours 9 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours XHTML  - Cours CSS 2  - Création site  - Cours  HTML 5  - Cours CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies