vCarousel/public/flickity.html

48 lines
2.9 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 pour le script vCarousel avec un menu utilisant Flickity.">
<meta name="robots" content="noindex">
<link rel="stylesheet" href="CSS/vcarousel.css" media="screen">
<link rel="stylesheet" href="CSS/flickity.min.css" media="screen">
<script src="JS/exampleFlickity.app.js" defer></script>
<title>vCarousel (démo avec Flickity)</title>
</head>
<body>
<div id="videos">
<h1 id="title">vCarousel</h1>
<p>Dans cet exemple vCarousel est associé à un carrousel dimages plus classique géré via <a href="https://flickity.metafizzy.co/" target="_blank" rel="noopener">Flickity</a> servant de menu pour choisir la première vidéo à visionner. Ensuite vCarousel enchaîne les vidéos et synchronise laffichage de Flickity. La lecture de toutes les vidéos se lance automatiquement et le carrousel boucle à linfini. <a href="./">Retour à lexemple de base</a>.</p>
<figure id="vFunanbule">
<video controls preload="metadata">
<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 preload="metadata">
<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 preload="metadata">
<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 class="img-carousel">
<div class="carousel-cell"><a href="#vFunanbule" class="selectVideo"><img src="img/clownfunanbule.png" alt="Le funanbule"></a></div>
<div class="carousel-cell"><a href="#vForgeron" class="selectVideo"><img src="img/forgeron.png" alt="Le forgeron"></a></div>
<div class="carousel-cell"><a href="#vCircuit" class="selectVideo"><img src="img/drole-de-circuit.png" alt="Le drôle de circuit"></a></div>
</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>
</body>
</html>