vue OSM player et playlist
Kommunauty
Connexion
Inscription

Forum Programmation OSM player et playlist

OSM player et playlist


jeandub Messages : 151

Bonjour à tous.

Ma question : je souhaite intégrer le player video OSM sur mon site sans utiliser leur système de playlist. Donc je souhaite utiliser leur lecteur sans la playlist et ajouter des vignettes cliquables dans une balise aside. L'idée est de lancer la lecture des vidieos dans le lecteur OSM en cliquant sur une vignette.

Comment faire ?
lundi 19 octobre 2015

Homer Messages : 1925

Tu utilise la version "Simple" du player : 

<script type="text/javascript">
  $(function() {
    $("video").osmplayer({
      width: '100%',
      height: '600px'
    });
  });
</script>
<video src="http://progressive.totaleclips.com.edgesuite.net/105/e105598_257.mp4" poster="http://www.movieposter.com/posters/archive/main/143/MPW-71686"></video>

Et tu utilise jquery pour modifier l'url de la vidéo afin que quand tu clic sur ta vignette, cela change la vidéo à regarder (si tu veux que se soit dynamique sans recharger la page, sinon un lien suffit)
mardi 20 octobre 2015

jeandub Messages : 151

Salut Homer

je ne fais pas appel à un fichier XML ?

Les vidéos en question sont appelées depuis viméo.
mardi 20 octobre 2015

Homer Messages : 1925

Si tu fais appel à un fichier xml, tu passe forcément par une playlist.

Là, tu passe par le mode "simple" ou "viméo" qui sont identiques, et tu modifie l'URL de la vidéo en fonction du lien cliqué.

En gros, niveau code, ça donnerai ça :

html : 

<video id="vimeo" src="URL_VIDEO" poster="URL_VIGNETTE"></video>

<a href="#" id="URL_VIDEO_2" class="LOAD_VIDEO"><img src="URL_VIGNETTE_2" alt="" /></a>
<a href="#" id="URL_VIDEO_3" class="LOAD_VIDEO"><img src="URL_VIGNETTE_3" alt="" /></a>
<a href="#" id="URL_VIDEO_4" class="LOAD_VIDEO"><img src="URL_VIGNETTE_4" alt="" /></a>

Donc là en gros tu as ta vidéo, et les liens pour les autres.

Ensuite, en JS/Jquery :

$(function() {
 $('.LOAD_VIDEO').click(function() {
$('#vimeo').attr('src', this.id);
$('#vimeo').attr('poster', $(this.' img').attr('src')); // Petit doute sur la syntaxe...
$('#vimeo').load();
});
});

A vérifier, j'ai pas testé...
mercredi 21 octobre 2015

Répondre Pour répondre, tu dois d'abord t'inscrire rapidement sur Kommunauty. Rejoins-nous vite !

Forum Programmation OSM player et playlist

Kommunauty © Tous droits réservés Contact / Charte & Mentions légales / Hebergement gratuit / Bon plan hébergement / Aide B2i

RSS