Comment faire jouer une vidéo automatiquement sur mon site web

• 22 avril 2021

J’ai cherché longtemps pour savoir comment faire jouer automatiquement une vidéo sur mon site web en HTML5, sur mobile et sur desktop, avant de trouver la réponse. Je vous la donne ci-bas.
Pour Youtube et Vimeo, c’est facile cependant.

Comment faire jouer autoplay une vidéo Youtube ou Vimeo automatiquement sur mon site web

C’est très facile. La procédure est identique pour Vimeo et Youtube.

Cependant, une chose à savoir c’est que les vidéos qui jouent automatiquement sur un site web joueront forcément sans le son. C’est une bonne idée de penser mettre des sous-titres à votre vidéo.

1. Prends le code de Embed de la vidéo Youtube. Il ressemble à
   <iframe width="560" height="315" src="https://www.youtube.com/embed/OeDlSjmNGbY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
2. À la fin de l’URL de la vidéo, ajoute ?&autoplay=1&mute=1. Ainsi, l’URL va ressembler à @https://www.youtube.com/embed/OeDlSjmNGbY?&autoplay=1&mute=1
3. Copie-colle ce code dans le HTML de ta page web

Téléverse tes vidéos ou fichiers audio

Comment faire jouer autoplay une vidéo HTML5 automatiquement sur mon site web

Cependant, une chose à savoir c’est que les vidéos qui jouent automatiquement sur un site web joueront forcément sans le son. C’est une bonne idée de penser mettre des sous-titres à votre vidéo.

Concrètement, la technique est de prendre une vidéo en HTML5, lui mettre des sous-titres par défaut, et la faire jouer en autoplay.

Également, on met un div par-dessus pour activer le son si jamais l’utilisateur clique dessus.

Pour voir un exemple qui fonctionne, cliquez ici.

<video id="video" autoplay muted playsinline loop onClick="this.pause(); this.muted=false; this.play();">
	<source src="XXXXX.mp4" type="video/mp4">
	<track label="English" kind="subtitles" srclang="en" src="clickthrough.vtt" default>
</video>
<style>
	video::cue {
		font-size: 150%;
	}
	video {
		width:100%;
	}
</style>

<div onClick="document.getElementById('video').muted=false; document.getElementById('video').pause();document.getElementById('video').play();"
	style="    z-index: 999;
    position: absolute;
    width: 100%;
    height: 700px;
    top: 0px;" >

<div>