vue intégration d'un player video
Kommunauty
Connexion
Inscription

Forum Internet intégration d'un player video

intégration d'un player video


jeandub Messages : 151

Bonjour à tous.

Je souhaite intégrer un player video dans mon site web. J'ai choisi l'un des player gratuit proposés sur ce site. Mon problème est le suivant : apparemment, je dois d'abord convertir mon fichier AVI en FLV. Ca ne pose pas de problème. Ensuite le placer dans un répertoire : j'ai donc créé un répertoire videos, dans lequel je dois aussi placer les fichier sfw du player. Enfin, je dois copier-coller dans mon html5 le code correspondant au player. L'ennui, c'est que je ne sais pas où trouver les fichiers flw du player. Quelqu'un peut-il m'aider ? A moins que je n'ai rien compris à la procédure ...

Merci d'avance.
vendredi 8 novembre 2013

Sypix Messages : 892

Salut a toi !

Quel player tu a choisit ? Tu a essayer de regarder si son site officiel proposait le téléchargement des sources, une documentation ?
vendredi 8 novembre 2013

jeandub Messages : 151

Ah, bonsoir Sypix. Sympa de lire quelqu'un.

J'ai choisi le player Open Standard Media (OSM) Player. Celui avec playlist. On mepropose du code à intégrer au html5, idem pour la plylist mais pas de fichiers à récupérer...En plus c'est tout en anglais...Tu en penses quoi ?
vendredi 8 novembre 2013

Sypix Messages : 892

Ah !

Si les fichiers sont sur un GitHub Tu peux trouver ça ici

Clique sur Download ZIP et c'est dans la poche

Pour l'anglais je pense que ça ne posera pas trop de problèmes pour tes visiteurs (ça peut a la limite t'en poser a toi si tu maitrise pas bien mais on peut t'aider pour ça )

Ça devrait fonctionner un peu mieux non ?
vendredi 8 novembre 2013

jeandub Messages : 151

Oh, je suis tombé sur la bonne personne, super. J'essaie ce que tu dis et je reviens. Au fait, c'est quoi un GitHub ?
vendredi 8 novembre 2013

jeandub Messages : 151

Bon, j'ai dézippé...Je dois tout copier dans mon répertoire 'videos' ?
vendredi 8 novembre 2013

Sypix Messages : 892

C'est un site d’hébergement principalement utiliser pour distribuer des applications open sources

Une fois dézipper tu peux théoriquement le mettre ou tu veux (du moment que c'est sur ton site). Tu devra juste modifier les liens dans le code html.

Par exemple imaginons que ton répertoire vidéo est a la racine : /video/

Les liens seront donc les suivants :

Dans ton head :


<!-- Include the core jQuery and jQuery UI -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<!-- Include the core media player JavaScript. -->
<script type="text/javascript" src="videos/osmplayer/bin/osmplayer.compressed.js"></script>

<!-- Include the DarkHive ThemeRoller jQuery UI theme. -->
<link rel="stylesheet" href="videos/osmplayer/jquery-ui/dark-hive/jquery-ui.css">

<!-- Include the Default template CSS and JavaScript. -->
<link rel="stylesheet" href="videos/osmplayer/templates/default/css/osmplayer_default.css">
<link rel="stylesheet" href="videos/osmplayer/templates/default/osmplayer.default.js">

Et pour intégrer ta vidéo :


<script type="text/javascript">
  $(function() {
    $("video").osmplayer({
      width: '100%',
      height: '600px'
    });
  });
</script>
<video src="videos/mavideo.mp4" poster="Lien de l'image de ta vidéo"></video>

Bien sur ce n'est qu'un exemple

Ha et apparemment tu n'a pas besoin de convertir en FLV le script lis les mp4 on dirait

vendredi 8 novembre 2013 (Dernière édition vendredi 8 novembre 2013)

jeandub Messages : 151

Où tu places le code ? Et pour le code de la playlist, tu le mets où ?
vendredi 8 novembre 2013

SiMax Messages : 7572

Salut !

Il faut intégrer le premier code entre les balises <head> et </head> de ton site. Le deuxième code est à intégrer à l'endroit où tu veux ta vidéo.
vendredi 8 novembre 2013

Sypix Messages : 892

Pour la localisation du code SiMax t'a tout dit

Et pour les playlistes :

Met ça la ou tu veux que ta vidéo soit (et donc a la place du 2em code de mon dernier message):


<script type="text/javascript">
  $(function() {
    $("#osmplayer").osmplayer({
      playlist: 'playlist.xml',
      height: '500px'
    });
  });
</script>
<div id="osmplayer"></div>

Et ton fichier playlist.xml doit ressembler a ça (bien sur personnalise la ):


<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
   <trackList>
      <track>
         <title>YouTube: Batman</title>
         <location>http://www.youtube.com/watch?v=g8evyE9TuYk</location>
      </track>
      <track>
         <title>Vimeo: Aquarium</title>
         <location>http://vimeo.com/5606758</location>
      </track>
      <track>
         <title>HTML5: Matagascar III</title>
         <location>http://progressive.totaleclips.com.edgesuite.net/105/e105598_257.mp4</location>
         <image>http://www.movieposter.com/posters/archive/main/143/MPW-71686</image>
      </track>
      <track>
         <title>HTML5: Snow White and the Huntsman</title>
         <location>http://progressive.totaleclips.com.edgesuite.net/103/e103981_257.mp4</location>
         <image>http://www.movieposter.com/posters/archive/main/142/MPW-71148</image>
      </track>
      <track>
         <title>HTML5: Men in Black III</title>
         <location>http://progressive.totaleclips.com.edgesuite.net/105/e105857_257.mp4</location>
         <image>http://www.movieposter.com/posters/archive/main/146/MPW-73434</image>
      </track>
      <track>
         <title>HTML5: The Three Stooges</title>
         <location>http://progressive.totaleclips.com.edgesuite.net/105/e105408_227.mp4</location>
         <image>http://www.movieposter.com/posters/archive/main/143/MPW-71689</image>
      </track>
      <track>
         <title>HTML5: The Hunger Games</title>
         <location>http://progressive.totaleclips.com.edgesuite.net/107/e107950_227.mp4</location>
         <image>http://collider.com/wp-content/uploads/the-hunger-games-poster1.jpg</image>
      </track>
      <track>
         <title>HTML5: Se7en</title>
         <location>http://progressive.totaleclips.com.edgesuite.net/102/e10278_301.mp4</location>
         <image>http://www.movieposter.com/posters/archive/main/84/MPW-42060</image>
      </track>
      <track>
         <title>HTML5: The Matrix</title>
         <location>http://progressive.totaleclips.com.edgesuite.net/445/e44573_301.mp4</location>
         <image>http://www.movieposter.com/posters/archive/main/9/A70-4902</image>
      </track>
      <track>
         <title>HTML5: Amelie</title>
         <location>http://progressive.totaleclips.com.edgesuite.net/203/e20379_301.mp4</location>
         <image>http://www.movieposter.com/posters/archive/main/91/MPW-45860</image>
      </track>
      <track>
         <title>HTML5: The Prestige</title>
         <location>http://progressive.totaleclips.com.edgesuite.net/308/e30871_257.mp4</location>
         <image>http://www.movieposter.com/posters/archive/main/76/MPW-38403</image>
      </track>
   </trackList>
</playlist>
vendredi 8 novembre 2013 (Dernière édition vendredi 8 novembre 2013)

Page suivante »
Pages : 0123456789»

Forum Internet intégration d'un player video

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

RSS