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

Forum Internet intégration d'un player video

intégration d'un player video


jeandub Messages : 151

Bonjour à tous et surtout SYpis et Simax s'ils sont là.

J'ai tout essayé pour intégrer le lecteur vidéo mais ça ne donne aucun résultat. De plus, mon site n'affiche plus les caractères français.

Grosse galère...Vous avez une idée ? je vous montrerais bien mon html et xml, mais ça me parait long.
lundi 11 novembre 2013

jeandub Messages : 151

Bon finalement, je mets le code. Certaines balises (notamment les < p > n'ont plus lieu d'être donc n'y faites pas attention...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>La Baraque TV</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" type="text/css" title="design" href="../site-la-baraque-tv/style.css" />
		<!--[if IE 6]><link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/ie6.css" /> <![endif]-->
      <!-- 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="osmplayer/bin/osmplayer.compressed.js"></script>

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

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

</head>


		
	<body>

		<div id="banniere">
			<div id="logo"></div>
			<div id="cadre_banniere"><img src="design/image_titre.jpg" height="131" /></div>
	</div>

		<!-- D?but du menu horizontal -->
		<ul id="MH">
			<li><a href="#">Accueil</a></li>
			<li><a href="#">Nos amis</a></li>
			<li><a href="#">Menu 3</a></li>
			<li><a href="atelier.labaraque@free.fr">Contactez-nous</a></li>
		</ul>
		<!-- Fin du menu horizontal -->

		<div id="conteneur">

			<div id="CHG"></div><div id="CHD"></div><div id="BH"></div>
			<div id="BG"><div id="BD">

				<div id="corps">
					<div id="marge_interieure">

						<!-- D?but du menu vertical -->
						<div id="MV">
							<div class="en_tete_MV">Cat?gorie 1</div>
								<a class="lien_MV">Menu 1</a>
								<a class="lien_MV">Menu 2</a>
								<a class="lien_MV">Menu 3</a>
								<a class="lien_MV">Menu 4</a>
								<a class="lien_MV">Menu 5</a>
								<a class="lien_MV">Menu 6</a>
							<div class="bottom_MV"></div>
							<div class="marge_MV"></div>
							<div class="en_tete_MV">Cat?gorie 2</div>
								<a class="lien_MV">Menu 1</a>
								<a class="lien_MV">Menu 2</a>
								<a class="lien_MV">Menu 3</a>
								<a class="lien_MV">Menu 4</a>
								<a class="lien_MV">Menu 5</a>
								<a class="lien_MV">Menu 6</a>
							<div class="bottom_MV"></div>
							<div class="marge_MV"></div>
						</div>
						<!-- Fin du menu vertical -->
<script type="text/javascript">
  $(function() {
    $("#osmplayer").osmplayer({
      playlist: 'playlist.xml',
      height: '500px'
    });
  });
</script>
<div id="osmplayer"></div>

						<div id="texte"><div id="overflow">
							<div class="cadre"><div class="titre">Titre du cadre</div><div class="marge_interne">

								<!-- D?but de la zone de texte -->
								<p>
								Votre design est enfin pr?t ? ?tre utilis?. Ouvrez cette page avec un ?diteur de texte afin de la modifier ? votre convenance.
								Si vous ne parvenez pas ? modifier votre design comme vous le voudriez, nous vous conseillons de suivre 
								<a href="http://www.creer-son-website.fr/tutoriel.php">ce tutoriel</a>.
								Vous pouvez ?galement poser des questions aux autres membres sur <a href="http://www.creer-son-website.fr/forum.php">le forum</a> en cas de probl?me.
								</p>

								<p>
								Si vous le d?sirez, il vous est possible de continuer ? travailler votre design en le 
								<a href="http://www.creer-son-website.fr/chargement_kit.php?clef=HKCVA">rechargeant</a>.
								Les designs cr??s avec G?n?rakit sont sous license Cr?ative Commons, et sont par cons?quent soumis aux r?gles que nous rappelons ici.
								Vous avez le droit de modifier manuellement votre design apr?s son t?l?chargement afin de l'adapter ? vos besoin et de vous en servir pour votre site.
								La signature (lien en bas de page menant vers notre page d'accueil) n'est dans ce cas pas obligatoire, mais est toutefois activ?e par d?faut.
								La redistribution des designs cr??s avec G?n?rakit est autoris?e, mais vous devez dans ce cas respecter ? la lettre les
								<a href="http://www.creer-son-website.fr/conditions.php">conditions de redistribution</a> impos?es. L'administrateur pourra s'il
								le souhaite utiliser et redistribuer int?gralement ou partiellement les designs cr??s, dans le but d'am?liorer la qualit? du service propos?.
								</p>

								<p>
								Nous vous serions fortement reconnaissants si vous pouviez participer ? la vie du <a href="http://www.creer-son-website.fr/forum.php">forum</a> et de la communaut?.
								Il est par exemple possible de montrer vos cr?ations aux autres membres, de pr?senter votre projet et d'obtenir ainsi des conseils pour l'am?liorer.
								Nous mettons aussi ? disposition sur demande des userbars et des banni?res pour pr?senter G?n?rakit sur d'autres forums si vous le d?sirez.
								</p><br />
								<!-- Fin de la zone de texte -->

							</div></div>
						</div></div>

						<div id="pied_de_page">? La Baraque TV 2013</div>

					</div>
				</div>

			</div></div>
			<div id="CBG"></div><div id="CBD"></div><div id="BB"></div>

		</div>

	</body>
</html>


Et le xml :

<?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>
lundi 11 novembre 2013 (Dernière édition lundi 11 novembre 2013)

Sypix Messages : 892

Ce que je vais faire c'est que je vais te donner un exemple concret

On va partir d'une structure suivante :

/index.html

/videos/mavideo1.mp4

/videos/mavideo2.mp4

/videos/mavideo3.mp4

/videos/playlist.xml

/osmplayer/ (le fichier de notre player)

index.html doit ressembler a ça (ici on est sur du HTML5) :


<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8">

		<title>HTML</title>
                
                 <!-- Début du code pour notre player : -->
                 <!-- 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="osmplayer/bin/osmplayer.compressed.js"></script>

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

                <!-- Include the Default template CSS and JavaScript. -->
                <link rel="stylesheet" href="osmplayer/templates/default/css/osmplayer_default.css">
                <link rel="stylesheet" href="osmplayer/templates/default/osmplayer.default.js">
                <!-- Fin du code pour le player -->
	</head>

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

		</div>
	</body>
</html>

Et la notre fichier playlist.xml :


<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
   <trackList>
      <track>
         <title>Video 1</title>
         <location>videos/mavideo1.mp4</location>
      </track>
      <track>
         <title>Video 2</title>
         <location>videos/mavideo2.mp4</location>
      </track>
     <track>
         <title>Video 3</title>
         <location>videos/mavideo3.mp4</location>
      </track>
</playlist>

Voila voila

lundi 11 novembre 2013 (Dernière édition lundi 11 novembre 2013)

Sypix Messages : 892

Ton code est bon mais j'ai plusieurs questions, ou est ton dossier osmplayer ? Tel que je le vois dans tes liens il est a la racine du site hors, si tu l'a mis dans le dossier videos il faut que tu adapte touts les liens qui pointe vers ce dossier.

Il faut aussi que tu modifie le fichier xml avec tes vidéos (cf. mon post précédent)

lundi 11 novembre 2013

jeandub Messages : 151

Je regarde tout ça
lundi 11 novembre 2013

jeandub Messages : 151

Les fichiers sont dans le répertoire "osmplayer-2.x"
lundi 11 novembre 2013

Sypix Messages : 892

Renomme le en osmplayer c'est plus simple

lundi 11 novembre 2013

jeandub Messages : 151

OK c'est fait
lundi 11 novembre 2013

Sypix Messages : 892

Maintenant ça devrai marcher en théorie (si touts tes liens sont bons)

lundi 11 novembre 2013

jeandub Messages : 151

D'accord, je vais vérifier et je te dis

A+
lundi 11 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