Lecteur multimédia - YouTube

Pour les vidéos YouTube, le lecteur multimédia s'appuie le lecteur sans interface de YouTube qui s'appuie sur la balise « video » HTML5 natif.

Le scénario du lecteur multimédia repose sur l'élément « progress » HTML5 et utilise un polyfill lorsque l'élément n'est pas pris en charge.

Exemple

Suspect (Transcription)

Code source

<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=LLg-UsTr7us"}'>
	<video title="Suspect">
		<source type="video/youtube" src="https://www.youtube.com/watch?v=LLg-UsTr7us" />
	</video>
	<figcaption>
		<p>Suspect</p>
	</figcaption>
</figure>

Exemple en sourdine

Suspect (Transcript)

Code source

<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=LLg-UsTr7us"}'>
	<video title="Suspect" muted>
		<source type="video/youtube" src="https://www.youtube.com/watch?v=LLg-UsTr7us" />
	</video>
	<figcaption>
		<p>Suspect</p>
	</figcaption>
</figure>

Exemple avec bouton plein écran

Suspect (Transcription)

Code source

<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=LLg-UsTr7us"}'>
	<video title="Suspect">
		<source type="video/youtube" src="https://www.youtube.com/watch?v=LLg-UsTr7us" />
	</video>
	<figcaption>
		<p>Suspect</p>
	</figcaption>
</figure>

Vidéo Youtube dans une fenêtre modale (lightbox)

Ouvrir le vidéo

View code

<p><a class="wb-lbx lbx-modal lbx-iframe" href="#video-youtube">Ouvrir le vidéo</a></p>
		<section id="video-youtube" class="mfp-hide modal-dialog modal-content overlay-def">
			<header class="modal-header">
				<h3>Vidéo Youtube dans une fenêtre modale (lightbox)</h3>
			</header>
			<div class="modal-body">
				<figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "https://www.youtube.com/watch?v=LLg-UsTr7us"}'>
					<video title="Suspect">
						<source type="video/youtube" src="https://www.youtube.com/watch?v=LLg-UsTr7us" />
					</video>
					<figcaption>
						<p>Suspect (<a href="https://www.canada.ca/fr/sante-canada/services/video/suspect.html#trans">Transcription</a>)</p>
					</figcaption>
				</figure>
			</div>
		</section>

Détails de la page

Date de modification :: 2014-08-01