vCarousel/public/index.html

49 lines
2.6 KiB
HTML
Raw Permalink Normal View History

2021-03-31 18:14:03 +02:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page d'exemple simple d'utilisaion du script vCarousel.">
<meta name="robots" content="noindex">
<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>
<title>vCarousel (démo utilisation simple)</title>
2021-03-31 18:14:03 +02:00
</head>
<body>
<div id="videos">
<h1>vCarousel</h1>
<p>Exemple dutilisation simple: lorsquune vidéo se termine, la suivante la remplace et sa lecture est lancée, ceci jusquà ce que toutes les vidéos aient été parcourues. <a href="flickity.html">Cliquez-ici</a> pour voir un autre exemple dutilisation où vCarousel est associé à un carrousel dimages Flickity.</p>
<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>