adHoc.71site.fr

→ Un Video player avec playlist, simple, responsive design, intégré directement dans une page, une boîte.

Devant l'impossibilité, pour moi, d'afficher des vidéos hébergées sur mon serveur dans les galeries Unite Gallery Video... Je me suis demandé si quelques modifications des fichiers de l'Audio Player simple intégré pourraient permettre d'afficher des vidéos avec du simple code html5... Voilà donc le résultat facile à obtenir...

Comme pour l'Audio Player, pour l'intégrer dans adHoc, il a été nécessaire de déclarer un fichier jquery-2.2.4.js faute de quoi le lecteur ne fonctionne pas. Ci-dessous les déclarations de script et de style dans cette page :

 <link charset="utf-8" href="skin/css/video_player_simple.css" rel="stylesheet" />
<script src="skin/js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script src="skin/js/video_player_simple.js" type="text/javascript" charset="utf-8"></script>

Vous pouvez télécharger le zip de ces trois fichiers (video_player_simple.zip), à placer, si vous les utilisez dans le dossier skin/css pour le style et skin/js pour les fichiers .js.

Ci-dessous, la partie [style type="text/css"]...[/style] du fichier video_player_simple.css puis la partie [script]...[/script] du fichier video_player_simple.js déclarés ci-dessus ou à placer dans le code source, au début de la page ou de la boîte encadré de leur balises respectives. Ces deux fichiers sont très proches des fichiers de l'Audio Player, et on pourrait même n'utiliser qu'un seul fichier de style... précisant les règles audio et vidéo...

La partie de style est commentée le plus possible pour vous aider à l'adapter. Pour le script, contentez-vous d'ajuster le volume initial : .8 dans le script... .6 .7 ... jusqu'à 1 volume maxi.

/*Video Player simple*/
#playlist,video{ /*attribut de la playlist et du lecteur*/
	width: 90%; /*largeur en % pour être responsive, mais peut être en pixels*/
	padding:5px 0px;
}
video { /*marge extérieure haute du lecteur*/
	margin-top:10px;
}
#playlist{ /*attribut de la playlist*/
	margin:20px auto 0px; /*marges extérieures, auto pour centrer horizontalement*/
	background: rgba( 0, 0, 0, .8); /*couleur de fond*/
	border-radius: 10px; /*arrondis*/
	box-shadow: -1px -1px 2px #777777; /*ombre portée de la boite*/
}
titre { /*attributs titre*/
	display:block;
	font-size: 16px; /*taille police*/
	font-weight:bold; /*gras police : normal ou bold*/
	width: 90%; /*largeur en % pour être responsive, mais peut être en pixels*/
	margin:5px auto 10px; /*marges extérieures, auto pour centrer horizontalement*/
	color: #FFFFFF;	/*couleur du texte*/
	border-radius: 10px; /*arrondis*/
	padding: 5px; /*marges intérieures*/
	background: rgba( 0, 0, 0, .5); /*couleur de fond*/
	box-shadow: -1px -1px 2px #777777; /*ombre portée de la boite*/
}
titre a { /*attributs liens du titre*/
	color: #FF9900; /*couleur du texte*/
	text-decoration:none;
}
titre a:hover { /*attributs liens survolés du titre*/
	color: #FFFF00; /*couleur du texte*/
}
#playlist ul { /*attribut de la liste*/
	list-style:none; /*pas de puce*/
	margin:0; /*marges extérieures*/
	padding:0; /*marges intérieures*/
}
#playlist .active a, #playlist .active a:hover { /*attributs de la plage active*/
	text-decoration: none;
	text-shadow: none !important;
	color:#FFFFFF; /*couleur du texte*/
	padding-left:20px; /*marge intérieure gauche*/
	background: #000000; /*couleur de fond*/
	border-radius: 4px; /*arrondis*/
}
#playlist li { /*attributs éléments liste*/
	margin:0 10px; /*marges extérieures*/
	border-bottom: 1px solid #777777; /*bordure basse : épaisseur-nature-couleur*/
}
#playlist li:last-child { /*attributs dernier élément liste*/
	border:none; /*pas de bordure*/
}
#playlist li a{ /*attributs des plages*/
	color:#FF9900; /*couleur du texte*/
	padding: 3px; /*marges intérieures*/
	text-decoration:none;
	display: block;
}
#playlist li a:hover{ /*attributs des plages survolées*/
	color:#FFFF00; /*couleur du texte*/
	text-decoration: none;
}
#playlist li artiste { /*attributs artiste*/
	color:#FF0000;
	font-style:italic;
}
div.center { /*centrage (de la playlist et du lecteur)*/
	text-align: center;
}

$(window).load(function(){
var video;
var playlist;
var tracks;
var current;

init();
function init(){
  current = 0;
  video = $('video');
  playlist = $('#playlist');
  tracks = playlist.find('li a');
  len = tracks.length;
  video[0].volume = .8; // mettre le volume initial
  playlist.find('a').click(function(e){
    e.preventDefault();
    link = $(this);
    current = link.parent().index();
    run(link, video[0]);
  });
  video[0].addEventListener('ended',function(e){
    current++;
    if(current == len){
      current = 0;
      link = playlist.find('a')[0];
    }else{
      link = playlist.find('a')[current];  
    }
    run($(link),video[0]);
  });
}
function run(link, player){
  player.src = link.attr('href');
  par = link.parent();
  par.addClass('active').siblings().removeClass('active');
  video[0].load();
  video[0].play();
}
});

Et enfin, ci-dessous, la partie du code qui permet les appels aux fichiers vidéos, à placer où vous le souhaitez dans la page ou la boîte. Il faut bien sûr adapter les liens. Ici fichiers vidéos .webm sont placés dans le dossier files/video-camera à la racine d'adHoc, et ensuite, il est tout à fait possible de personnaliser directement dans l'éditeur d'adHoc l'écriture des titres, des artistes. Notez les balises [artiste]...[/artiste] qui permettent avec une classe spécifique de personnaliser simplement le texte associé. Notez également que le premier item à une classe particulière : c'est le premier sélectionné... Mais ce n'est pas une obligation (car le Video Player ne démarre pas automatiquement), et on peut en cliquant démarrer n'importe quel vidéo, la playlist se déroulera ensuite à partir de ce morceau et tourne en boucle. C'est la raison pour laquelle, une image : poster.png est appelée pour afficher le message...

Notez la façon dont poster.png est appelée : poster=''...''

Attention ! Les éditeurs de textes dans adHoc ne gèrent pas les appels de ce type, il faudra donc revenir au code source après l'enregistrement afin de compléter le chemin du poster en y ajoutant l'URL de votre site... (par exemple pour ce présent site j'ai ajouté //adhoc.71site.fr/ avant son chemin). C'est une vraie contrainte... j'en suis hélas, bien conscient...

Notez qu'il serait possible évidemment de déclarer aussi des fichiers .mp4 ou .ogv... en plus ou à la place des fichiers .webm.

<div class="center">
<titre>Clips vidéos en Stop Motion empruntés sur YouTube et Daily Motion</titre>
<video controls="controls" id="video" type="video/webm" poster="files/video-camera/poster.png" width="600" height="340">Your browser doesn't support video.</video>
</div>

<div id="playlist">
<ul>
 <li class="active"><a href="files/video-camera/lego-bmx-vid.webm">Lego BMX <artiste>-JsauceTV-</artiste></a></li>
 <li><a href="files/video-camera/the-impatient-granny-vid.webm">The Impatient Granny <artiste>-Matthew Burnham-Jones-</artiste></a></li> 
 <li><a href="files/video-camera/stop_motioN.webm">Stop motioN <artiste>-Coline Dehasse-</artiste></a></li>
 <li><a href="files/video-camera/rocket_in_space.webm">Rocket in space <artiste>-Veronika Klyushnik-</artiste></a></li>
 <li><a href="files/video-camera/aimant.webm">Stop motion avec un aimant <artiste>-Mister Buzz-</artiste></a></li>
 <li><a href="files/video-camera/accident_velo.webm">Accident de vélo <artiste>-Touan-</artiste></a></li>
 <li><a href="files/video-camera/video_paper.webm">Video Paper <artiste>-Bips-</artiste></a></li>
 <li><a href="files/video-camera/the_puppet.webm">The Puppet <artiste>-Trent Shy-</artiste></a></li>
 <li><a href="files/video-camera/cuisine_laine.webm">Cuisine à laine <artiste>-siwiL-</artiste></a></li>
</ul>
</div>

Je n'ai pas détaillé ici la possibilité d'insérer ce lecteur dans un fichier .html inclus dans un Iframe... C'est possible et assez simple. Contactez-moi sur le forum de ce site pour vous aider à insérer ce lecteur dans votre site selon l'une ou l'autre méthode.