Avec une vidéo Les fondamentaux déposée sur YouTube
En basculant vers le mode Source, on obtient le code HTML suivant :
<center><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="216" src="https://www.youtube.com/embed/lVevjGI5D0k" width="384"></iframe></center>
Supprimer l'attribut autoplay et ajouter le code ?autoplay=1 à la fin de l'URL de la vidéo comme indiqué ci-dessous :
<center><iframe allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="216" src="https://www.youtube.com/embed/lVevjGI5D0k?autoplay=1" width="384"></iframe></center>
La lecture se lancera automatiquement à l'ouverture de la page.
Cette fonctionnalité peut être inactive si le navigateur a été paramétré pour bloquer les lectures automatiques.
Exemple ICI.
Avec la vidéo Comprendre le codage à l'école déposée dans la médiathèque
En basculant vers le mode Source, on obtient le code HTML suivant :
<div style="margin: 0 auto; display: table;">
<video controls="" height="225" preload="auto" width="400"><source src="http://blog.ac-versailles.fr/blogetmedias/public/videos/Comprendre_le_codage_a_l_ecole.mp4" /><object data="http://blog.ac-versailles.fr/blogetmedias/index.php/?pf=player_flv.swf" height="225" type="application/x-shockwave-flash" width="400"><param name="movie" value="http://blog.ac-versailles.fr/blogetmedias/index.php/?pf=player_flv.swf" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="FlashVars" value="title=Comprendre_le_codage_a_l_ecole.mp4&amp;margin=1&showvolume=1&showtime=1&showfullscreen=1&buttonovercolor=ff9900&slidercolor1=cccccc&slidercolor2=999999&sliderovercolor=0066cc&flv=http://blog.ac-versailles.fr/blogetmedias/public/videos/Comprendre_le_codage_a_l_ecole.mp4&width=400&height=225" />Lecteur vidéo intégré</object></video>
</div>
Ajouter l'attribut autoplay comme indiqué ci-dessous :
<div style="margin: 0 auto; display: table;">
<video autoplay="" controls="" height="225" preload="auto" width="400"><source src="http://blog.ac-versailles.fr/blogetmedias/public/videos/Comprendre_le_codage_a_l_ecole.mp4" /><object data="http://blog.ac-versailles.fr/blogetmedias/index.php/?pf=player_flv.swf" height="225" type="application/x-shockwave-flash" width="400"><param name="movie" value="http://blog.ac-versailles.fr/blogetmedias/index.php/?pf=player_flv.swf" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="FlashVars" value="title=Comprendre_le_codage_a_l_ecole.mp4&amp;margin=1&showvolume=1&showtime=1&showfullscreen=1&buttonovercolor=ff9900&slidercolor1=cccccc&slidercolor2=999999&sliderovercolor=0066cc&flv=http://blog.ac-versailles.fr/blogetmedias/public/videos/Comprendre_le_codage_a_l_ecole.mp4&width=400&height=225" />Lecteur vidéo intégré</object></video>
</div>
Exemple ICI.
Remarque
Cet attribut fonctionne très bien avec les navigateurs Firefox et Edge mais peut rencontrer des problèmes avec Chrome et Safari.
