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 XHTML   info xhtml  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8  - cours 9 
 Menu cours 9 XHTML  - balise objet  - data  - type  - param  / exemples  / embed 
/ intégration You Tube - iframe  - intégration:schema.org 



Cours 9 XHTML : le son et la vidéo



 © LigneWeb  ... /intégration son et vidéo.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Intégration son et vidéo
... en XHTML


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 objet.

... l'intégration multimédia ... se fait en ...XHTML ... au moyen de la balise ...objet ...
... il y a la balise entrante ... <objet> ... et la balise sortante ... </objet> ...
... c'est à l'intérieur de ces balises que vont se placer du son, une animation flash, une vidéo ...
... cette balise objet ...a des attributs de genre et de type de fichier ...
... et aussi les dimensions de l'espace nécessaire pour visualiser le son ou la vidéo ...
... cet objet ... sera placé dans un bloc ... div ... qui aura son style ...




Les attributs de la balise objet :

data :

... le premier attribut précise de quel fichier il s'agit ... on écrit : ... data="......" ...

type :

... le deuxième attribut précise de quel type de fichier il s'agit ... on écrit : ... type="......" ...

width :

... nous lui donnons une largeur : ... width="...." ... en pixel ...

height :

... nous lui donnons une hauteur : ... height="...." ... en pixel ...





La balise param.

... la balise ... param ... définit les paramètres ... il y en a, en général plusieurs ...
... c'est une balise unique ... et s'écrit : ... <param name="......" value="......" /> ...
... Lorsque nous intégrons une vidéo comme proposé par You Tube, il y a aussi une balise ...embed ...
... cette balise s'écrit de la même manière que pour ... param ...
... <embed name="......" value="......" /> ... une balise plus ancienne ...
… mais, … une nouvelle manière d'intégration d'une vidéo par You Tube ... se fait avec la balise …
<iframe width="___" height="___" src="___"> … comme balise entrante
… et … </iframe> … comme balise sortante ...
... d'autres manières d'écrire existent encore ... d'où la difficulté d'être validé pour le XHTML ...
... c'est aussi une des raisons de l'utilisation du ...XHTML transitional ...




Les attributs de la balise param :

name :

... comme souvent, il faut nommer en écrivant ... name="......" ...

value :

... et on défini la valeur ... value="......" ...




Un premier exemple :


... c'est l'exemple d'intégration d'un vidéo de You Tube ... on y voit le cotoîement de ... param ... et de ... embed ...
... c'est dans YouTube que le code de ce vidéo nous était donné ...

... il était mis en mode ... autoplay=0 ... dans le ... param ... et ... dans le ... embed ...
... pour qu'il démare à l'ouverture, ... il fallait changer la valeur ... 0 ... en ... 1 ...

... méthode ancienne : ...
... pour voir le ...  code à intégrer  ... de ce vidéo, allez sur la flèche montante qui se trouve à droite ...
... et cliquez sur le pictogramme qui apparait ...
... vous voyez apparaître en haut à droite le ...  code à utiliser  ...
... recliquez sur ce pictogramme pour revenir à la situation première ...

... méthode pour l'exemple ci-dessus : ...
... pour voir le ...  code à intégrer  ... de ce vidéo, il fallait allez sur You Tube ...
... sous la vidéo, cliquez sur ...  intégrer  ...
... le code apparaîssait avec des choix possibles ...





Exemple sur You Tube par iframe.

... ici nous avons un exemple ... ancien ... sur You Tube ...
... dès que le premier morceau était terminé apparaissait ...
... la suite du premier morceau ...
… et puis, You Tube proposait le choix entre ce code ancien et complexe …
… et un nouveau code posant moins de problèmes avec la conformité du W3C …
… ce nouveau code se présente sous la forme d'un … iframe … balise que nous venons de voir ...


... ce code ancien n'est plus disponible ...
... Pink Floyd avec Syd Barrett ...
... Interstellar Overdrive-Part 1 and Part 2 ...



... pour obtenir le code sur You Tube ... il fallait :
... cliquez sur ...  partager  ... ensuite sous le lien, cliquez sur ...  intégrer  ...
... et le code modifiable était disponible ...

Avec schema.org


Video: Pink Floyd avec Syd Barrett - Interstellar Overdrive-Part 1 and Part 2

... intégration d'une vidéo, à but pédagogique ...

Pink Floyd With Syd Barrett - Interstellar Overdrive Full Length Video
- Part 1, London 1966

... Pink Floyd avec Syd Barrett ...
... Interstellar Overdrive-Part 1 and Part 2 ...

... avec le nouveau code, il apparait sur iPhone ...

avec l'indexation avec Schema.org





Un autre exemple :


... on découvre dans le code : ... autostart qui est ... false ... correspondant à (0)...
... et qui peut aussi être ... true ... correspondant à (1)...

... la concrétisation n'est plus possible avec le lecteur QuickTime Player ...





La balise embed.

... La balise HTML ... embed ... est utilisée pour insérer dans un document HTML un objet ...
... par exemple, une musique, une vidéo ou une animation en Flash ...
... cette balise n'est pas reconnue par tous les navigateurs ... et ne fonctionne plus en XHTML ...
... elle double les balises param comme vous pouvez le voir dans l'exemple précédant ...
... il y avait la balise entrante ... <embed> ... et la balise sortante ... </embed> ...
... elle est remplacée par la balise ... objet ... précédemment vue ...
... cette balise ... embed ... est reprise dans le nouveau ...  HTML 5  ...
... sauf qu'elle devient une ... balise unique ... qui s'écrira : ... <embed __ x ___ /> ...
... x : le contenu du code vidéo ... par exemple ...
... nous avons le même problème avec la balise ... bgsound ... plus ancienne encore ...
... non reconue par le ... W3C ... à juste titre ... mais encore utilisée par ... YouTube ...
... c'est une des raisons de l'utilisation de ... XHTML transitional ... sur notre site ... pédagogique ...





Un morceau enregistré. :


... la concrétisation n'est plus possible avec un lecteur en Flash ...
...  dewplayer  ... n'est plus, mais renaîtra un jour, comme ils disent ...

... mais je peux toujours l'utiliser, si le module  "dewplayer"  est installé sur le serveur ...







Intégration par iframe.

(choisi par You Tube)
... la méthode adoptée par You Tube pour permettre l'intégration d'une vidéo dans un site web ...
... se fait par un ... iframe ...
... c'est le nouveau code proposé actuellement ...

... nous avons la balise ... <iframe> ... comme balise entrante ...
... et la balise ... </iframe> ... comme balise sortante ...
... dans la balise entrante seront indiqué ... les dimensions ... l'adresse de la vidéo ...
... et d'autres informations spécifiques, comme la possibilité de l'ouverture en plein écran ...

Prenons un exemple :

avec l'indexation avec Schema.org ...


Video: Pink Floyd Live8 2005

... intégration d'une vidéo, à but pédagogique ...

Pink Floyd © You Tube 

... intégration d'une vidéo, à but pédagogique ...


... sous la video dans You Tube, il y a le partage à cliquer ...
... cela débouche sur intégrer que l'on clique ...
... ce qui donne le code à intégrer ...


avec l'indexation avec Schema.org

... le code seul ...


... il vous suffit de l'intégrer à la place voulue dans un bloc div définit dans le fichier ... .css ...




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  ...

Les balises sémantiques de Schema.org

... nous venons de voir l'intégration de la balise iframe dans une structure plus générale ...

... la première balise englobante précise sa nature : ...
... <div itemscope itemtype="http://schema.org/VideoObject"> ... </div> ...
... balise shema.org pour la vidéo pour la lecture des moteurs de recherche ... tel que Google ...

... à l'intérieur de ce bloc vont se mettre plusieurs éléments ...

... le code de la vidéo que l'on veut intégrer par la balise iframe ...
... <iframe _________________ > ... </iframe> ...
... la balise titre général de la vidéo ...
... <h5>Video: <span itemprop="name"> ____________________ </span></h5> ...
... la balise explicative avec le sujet de la vidéo et son nom ...
... <p itemprop="description"> ___________________ </p> ...
... les balises de durée de la vidéo, de l'image de départ et de son URL ...
... <meta itemprop="duration" content="T10M28S" /> ...
... <meta itemprop="thumbnailURL" content="thumbnail.jpg" /> ...
... <meta itemprop="embedURL" content="https://www.youtube.com/____________" /> ...

... nous avons donc une structure sémantique ( d'écriture pour des robots ) ...
... permettant une lecture par ceux-ci ...

Nouvelle structure :

... l'indexation avec Schema.org ... un exemple concret (ci-dessus) ...





Remarque :

... dans l'ancien code utilisable en XHTML ... sans le lecteur en Flash ...
... c'était pour être écouté et vu par le plus grand nombre, qu'il y avait cette juxtaposition de différentes balises
... cette répétition change dans le ... HTML 5 ... que nous allons voir bientôt ...
... et qui intégre également les balises sémantiques de Schema.org ...


... design 3 D ...

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





 MENU XHTML   info xhtml  - 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