Plugin player vidéo Youtube et/ou Dailymotion

Explications

Inclure le plugin à sa page HTML :
<script src="js/videoPlayerYtDm-plugin.js" type="text/javascript"></script>

Déaclarer les modules au domready :
$('.video-player').videoPlayerYtDm();

Déclarer les spécificité de chaque player dans des data-attr :
data-videoId="xnFhxrVEyNo" l'id youtube ou dailymotion de la vidéo. *obligatoire.
data-w="4" et data-h="3" pour appliquer le rapport hauteur/largeur du player. *facultatifs, valeurs 4/3 par défaut.
data-controls="1 ou 0" pour afficher (1) ou pas (0) les commandes natives du player. *facultatif, valeur 1 par défaut.
data-type="yt ou dm" pour indiquer si il s'agit d'une vidéo youtube ou dailymotion. *obligatoire.
data-autoplay="1" pour indiquer si on déclenche la lecture automatique (1) ou pas (0). *facultatif, valeur 1 par défaut.

On peut afficher une navigation par chapitre avec des repères dans la timeline :
<ul class="chapters-line">
    <li><a href="#" data-time="0" data-end="198" class="chapter-line icon-arrow-down">Titre chapitre</a></li>
data-time le timecode du début du chapitre en secondes.
data-end le timecode de la fin du chapitre en secondes.
class="chapter-line ..." obligatoire.
Ensemble à placer dans la structure :
<div class="seekbar"><div class="progress">
Lorsque la vidéo atteint data-time, on applique à chapter-line la classe active.
Lorsque la vidéo atteint data-end, on applique à chapter-line la classe done.

On peut aussi afficher une navigation avec les titres des chapitres :
<ul class="chapters"><li><a href="#" data-time="0" data-end="198" class="chapter">He's A Monster</a></li>
Même principe que pour les chapitres dans la timeline.

Les contrôles personnalisables :
Dans un conteneur class="tools", placer des éléments class="play", class="pause', class="stop", class="volume" et un input de type range class="volumebar" dans un conteneur class="actions".
Dans le même conteneur tools, un élément class="infos" avec des éléments class="time" et class="duration" pour afficher le timecode en minutes et secondes.

Personnalisation :
Les différents blocs peuvent être placés n'importe où dans le conteneur principal video-player et l'ensemble stylé comme souhaité.

Code complet pour un module youtube :
<section class="video-player" data-videoId="xnFhxrVEyNo" data-w="4" data-h="3" data-controls="0" data-type="yt"> <div class="iframe-container"> <div class="video-container"></div> </div> <div class="tools"> <div class="actions"> <a href="#" class="play icon-play3">Play</a> <a href="#" class="pause icon-pause2">Pause</a> <a href="#" class="stop icon-stop2">Stop</a> <a href="#" class="volume icon-volume-high">Volume</a> <input class="volumebar" value="0" type="range"> </div> <div class="infos"> <span class="time">00:00</span> / <span class="duration">00:00</span> </div> </div> <div class="seekbar"> <div class="progress"> <div class="line"> <div class="current"></div> </div> <ul class="chapters-line"> <li><a href="#" data-time="0" data-end="198" class="chapter-line icon-arrow-down">He's A Monster</a></li> <li><a href="#" data-time="198" data-end="317" class="chapter-line icon-arrow-down">Gay Bar</a></li> <li><a href="#" data-time="317" data-end="463" class="chapter-line icon-arrow-down">Perhaps</a></li> <li><a href="#" data-time="463" data-end="658" class="chapter-line icon-arrow-down">Have Love</a></li> <li><a href="#" data-time="658" data-end="846" class="chapter-line icon-arrow-down">Another Last Drink</a></li> <li><a href="#" data-time="846" data-end="1119" class="chapter-line icon-arrow-down">Another Man</a></li> <li><a href="#" data-time="1119" data-end="1279" class="chapter-line icon-arrow-down">The Fortune Teller</a></li> <li><a href="#" data-time="1279" data-end="1498" class="chapter-line icon-arrow-down">The No Song</a></li> <li><a href="#" data-time="1498" data-end="1685" class="chapter-line icon-arrow-down">I'm A Man</a></li> <li><a href="#" data-time="1685" data-end="1880" class="chapter-line icon-arrow-down">The Flying Kitchen</a></li> <li><a href="#" data-time="1880" data-end="2200" class="chapter-line icon-arrow-down">I Wanna Be Your Dog</a></li> <li><a href="#" data-time="2200" data-end="1000000" class="chapter-line icon-arrow-down">He's A Monster (bis)</a></li> </ul> </div> </div> <ul class="chapters"> <li><a href="#" data-time="0" data-end="198" class="chapter">He's A Monster</a></li> <li><a href="#" data-time="198" data-end="317" class="chapter">Gay Bar</a></li> <li><a href="#" data-time="317" data-end="463" class="chapter">Perhaps</a></li> <li><a href="#" data-time="463" data-end="658" class="chapter">Have Love</a></li> <li><a href="#" data-time="658" data-end="846" class="chapter">Another Last Drink</a></li> <li><a href="#" data-time="846" data-end="1119" class="chapter">Another Man</a></li> <li><a href="#" data-time="1119" data-end="1279" class="chapter">The Fortune Teller</a></li> <li><a href="#" data-time="1279" data-end="1498" class="chapter">The No Song</a></li> <li><a href="#" data-time="1498" data-end="1685" class="chapter">I'm A Man</a></li> <li><a href="#" data-time="1685" data-end="1880" class="chapter">The Flying Kitchen</a></li> <li><a href="#" data-time="1880" data-end="2200" class="chapter">I Wanna Be Your Dog</a></li> <li><a href="#" data-time="2200" data-end="1000000" class="chapter">He's A Monster (bis)</a></li> </ul> </section> Github repository :
https://github.com/regaloeb/player-video