2021-03-31 18:14:03 +02:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2021-04-08 12:41:47 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "Page d'exemple simple d'utilisaion du script vCarousel." >
2021-04-01 12:58:47 +02:00
< meta name = "robots" content = "noindex" >
2021-04-08 12:41:47 +02:00
< link rel = "stylesheet" href = "CSS/vcarousel.css" media = "screen" >
2021-03-31 18:14:03 +02:00
< script src = "JS/example.app.js" defer > < / script >
2021-04-08 12:41:47 +02:00
< title > vCarousel (démo utilisation simple)< / title >
2021-03-31 18:14:03 +02:00
< / head >
< body >
2021-04-08 12:41:47 +02:00
< div id = "videos" >
< h1 > vCarousel< / h1 >
2021-04-08 17:37:30 +02:00
< p > Exemple d'utilisation simple : lorsqu'une vidéo se termine, la suivante la remplace, prête à être lancée. Lorsqu'une vidéo est sélectionné dans le menu, sa lecture se lance automatiquement. < a href = "flickity.html" > Cliquez-ici< / a > pour voir un autre exemple d'utilisation où vCarousel est associé à un carrousel d'images Flickity.< / p >
2021-04-08 12:41:47 +02:00
< figure id = "vFunanbule" >
< video controls = "controls" preload = "metadata" width = "800" >
< source src = "videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v" type = "video/mp4" > < / source >
< p > Votre navigateur ne prend pas en charge les vidéos HTML5.< / p >
< / video >
< figcaption > Un clown funanbule !< / figcaption >
< / figure >
< figure id = "vForgeron" >
< video controls = "controls" preload = "metadata" width = "800" >
< source src = "videos/Lizio-Poete-Ferrailleur-forgeron.m4v" type = "video/mp4" > < / source >
< p > Votre navigateur ne prend pas en charge les vidéos HTML5.< / p >
< / video >
< figcaption > Il faut forger pour devenir forgeron !< / figcaption >
< / figure >
< figure id = "vCircuit" >
< video controls = "controls" preload = "metadata" width = "800" >
< source src = "videos/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v" type = "video/mp4" > < / source >
< p > Votre navigateur ne prend pas en charge les vidéos HTML5.< / p >
< / video >
< figcaption > Drôle de circuit !< / figcaption >
< / figure >
< nav >
< h3 > Au menu< / h3 >
< ul >
< li > < a href = "#vFunanbule" class = "selectVideo" > Le funanbule< / a > < / li >
< li > < a href = "#vForgeron" class = "selectVideo" > Le forgeron< / a > < / li >
< li > < a href = "#vCircuit" class = "selectVideo" > Le circuit< / a > < / li >
< / ul >
< / nav >
< / div >
< aside > < p > Les courtes vidéos de cette page d'exemple ont été enregistrées le 11 août 2016 au < a href = "https://www.poeteferrailleur.com/" target = "_blank" > Poète ferrailleur< / a > à Lizio dans le Morbihan.< / p > < / aside >
2021-03-31 18:14:03 +02:00
< / body >
< / html >