IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

PHP & Base de données Discussion :

Syntaxe pour un module de lecteur vidéo


Sujet :

PHP & Base de données

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur web amateur
    Inscrit en
    Août 2012
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur web amateur
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2012
    Messages : 84
    Points : 43
    Points
    43
    Par défaut Syntaxe pour un module de lecteur vidéo
    Bonjour,
    je m'en remets à vous pour m'éclairer sur la construction du code et des requêtes pour faire marcher un module de lecteur vidéo (youtube) en php/mysql.
    J'ai un lecteur vidéo, et un caroussel de miniatures des vidéos présentes dans la table "videos".
    Mon problème est que le lecteur affiche toujours la première vidéo présente dans la table, bien que je clique sur les liens des miniatures des autres vidéos à partir du caroussel.
    Voici mon code:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    <div id="main_videos">
    	<div id="head_videos"><p>VIDEO</p></div>
    	<div id="lecteur_videos">
    		<div id="conteneur_lecteur">
    			<div>
    <?php
    require("modules/config-db.php"); 
    mysql_connect($adresse,$nom,$motdepasse);
    mysql_select_db($database); 
    $sql_v = "SELECT * FROM videos ORDER BY date_insert ASC ";
    $resultat_v = mysql_query($sql_v);
    $donnee_v = mysql_fetch_assoc($resultat_v);
    $yt_source = $donnee_v['yt_source'];
    if ( isset($yt_source)){
    ?>
    				<iframe id="<?php echo $donnee_v["yt_source"];?>" type="text/html" width="553" height="337" 
    				src="https://www.youtube.com/embed/<?php echo $donnee_v["yt_source"];?>"	frameborder="0" allowfullscreen></iframe>
    <?php
    }
    ?>
    			</div>
    		</div>
    	</div>
    	<hr class="sep_vids">
    	<div id="carousel_wrapper">
    		<div id="carousel_2" class="carousel module">
    			<ul>
    <?php
    require("modules/config-db.php");
    mysql_connect($adresse,$nom,$motdepasse);
    mysql_select_db($database); 
    $sql_v = "SELECT * FROM videos ORDER BY date_insert ASC ";
    $resultat_v = mysql_query($sql_v);
    if(isset($_GET['id_video'])){
    	$id_video=intval(htmlentities($_GET['id_video']));
    	if($id_video!=0){
    		$sql_v='SELECT * FROM videos WHERE id_video='.$id_video.'';
    		$req_v=mysql_query($sql_v) or die(mysql_error());
    		$data_v=mysql_fetch_assoc($req_v);
    		echo stripslashes($data_v['yt_source']);
    		echo stripslashes($data_v['thumb']);
    		echo stripslashes($data_v['titre_video']);
    		echo date("d.m.Y G:i",strtotime($data_v['date_insert']));
    	}
    	else{
    		echo "Erreur";
    	}
    }
    else{ 
    	while ( $donnee_v = mysql_fetch_assoc($resultat_v) ) {
    ?>
    				<li>
    					<a href="#<?php echo $donnee_v['yt_source'];?>">
    					<?php echo $donnee_v["thumb"];?>
    						<h3><?php echo $donnee_v['titre_video'];?></h3>
    					</a>
    				</li>
    <?php
    	}
    }
    ?>
    			</ul>				
    		</div>
    	</div>
    	<hr class="sep_vids">
    	<div id="plus_videos">
    		<a><p>Plus de vidéos</p><span class="petite_fleche"></span></a>
    	</div>
    	<div id="social_videos">
    	</div>
    	<script type="text/javascript">
    		$(document).ready(function() {
    			$('#carousel_2').carousel({
    			});
    		});
    	</script>
    </div>
    Le module du caroussel <div id="carousel_wrapper"> marche très bien, par contre c'est au niveau du module <div id="lecteur_videos"> que je n'arrive pas à remonter le paramètre "yt_source" qui est à la fois une ancre des miniatures vers la vidéo et un identifiant de la vidéo chez youtube.

    Merci d'avance pour vos réactions.

  2. #2
    Modérateur
    Avatar de sabotage
    Homme Profil pro
    Inscrit en
    Juillet 2005
    Messages
    29 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Juillet 2005
    Messages : 29 208
    Points : 44 155
    Points
    44 155
    Par défaut
    Si je comprend bien tu as une video suivi d'un carrousel.
    Dans ce quoi à quoi servent les ancres ?

    Au passage tes lignes 31-37 ne servent à rien puisque ce code est déjà présent en lignes 8-13.
    Tu utilises la fonction stripslashes(), est-ce que tu as vraiment tes \ en trop dans ta base de données ? Si oui il faut corriger le problème à l'insertion et pas lors de l'affichage.
    Ligne 40 tu utilises intval(htmlentities()), c'est soit l'un soit l'autre mais pas les deux en meme temps, ça n'a pas de sens.
    N'oubliez pas de consulter les FAQ PHP et les cours et tutoriels PHP

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur web amateur
    Inscrit en
    Août 2012
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur web amateur
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2012
    Messages : 84
    Points : 43
    Points
    43
    Par défaut
    Salut Sabotage,

    Effectivement, les ancres ne servent à rien car le carrousel est collé juste en bas du lecteur vidéo.
    J'ai aussi tenu compte des remarques de votre second paragraphe et j'ai supprimé les lignes 31 à 37, le intval à la ligne 40, et la fonction stripslashes.

    Par contre , ça ne résoud pas mon problème qui est d'afficher la vidéo correspondant à la miniature cliquée.
    Dans ma table "vidéos", j'ai juste stocké l'identifiant de la vidéo chez youtube et l'ai appelé "yt_source", et si par exemple le lien d'intégration de la vidéo est http://www.youtube.com/embed/abcdeff12345, mon code php va juste récupérer le abcdeff12345, stocké dans la table vidéos sous l'intitulé "yt_source" et l'incorporer dynamiquement au <iframe>.

    Autrement dit, c'est la transmission du paramètre "yt_source", du carrousel au iframe du lacteur que je n'arrive pas à coder correctement, ce qui a pour effet de m'afficher toujours le premier yt_source trouvé dans la table.

  4. #4
    Modérateur
    Avatar de sabotage
    Homme Profil pro
    Inscrit en
    Juillet 2005
    Messages
    29 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Juillet 2005
    Messages : 29 208
    Points : 44 155
    Points
    44 155
    Par défaut
    C'est du javascript qu'il te faut : tout le PHP/SQL dans "conteneur_lecteur" n'est pas utile.

    Ton carrousel interroge la base de données et connait donc tous les yt_source de chaque video.
    En javascript, le clique sur le carrousel modifie l'iframe du "conteneur_lecteur".
    Tout cela est même sûrement prévu dans le script du carrousel.
    N'oubliez pas de consulter les FAQ PHP et les cours et tutoriels PHP

  5. #5
    Membre du Club
    Homme Profil pro
    Développeur web amateur
    Inscrit en
    Août 2012
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur web amateur
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2012
    Messages : 84
    Points : 43
    Points
    43
    Par défaut
    OK,
    je vais voir du coté du script js,
    à toute fin utile, voici une image du lecteur/carrousel:
    Nom : capture.PNG
Affichages : 158
Taille : 255,5 Ko
    et voici le code js du carrousel, si vous auriez l'amabilité dy jeter un coup d'oeil:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
     
    /*
     * jQuery Carousel Plugin v1.0
     * http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin
     *
     * Copyright (c) 2010 Richard Scarrott
     *
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     *
     * Requires jQuery v1.4+
     *
     */
     
    // prototypal inheritance
    if (typeof Object.create !== 'function') {
    	Object.create = function (o) {
    		function F() {}
    		F.prototype = o;
    		return new F();
    	};
    }
     
    (function($) {
    	// ie alias
    	var headache = $.browser.msie && $.browser.version.substr(0,1)<9;
     
    	// carousel
    	var Carousel = {
    		settings: {
    			itemsPerPage: 5,
    			itemsPerTransition: 5,
    			noOfRows: 1,
    			nextPrevLinks: true,
    			speed: 'normal',
    			easing: 'swing'
    		},
    		init: function(el, options) {
    			if (!el.length) {return false;}
    			this.options = $.extend({}, this.settings, options);
    			this.itemIndex = 0;
    			//this.itemIndex = 1;
    			this.carousel_wrapper = el;
    			this.runner = this.carousel_wrapper.find('ul');
    			this.items = this.runner.children('li');
    			this.noOfItems = this.items.length;
    			this.setRunnerWidth();
    			if (this.noOfItems <= this.options.itemsPerPage) {return false;} // bail if there are too few items to paginate
    			this.insertMask();
    			this.noOfPages = Math.ceil((this.noOfItems - this.options.itemsPerPage) / this.options.itemsPerTransition) + 1;
    			if (this.options.nextPrevLinks) {this.insertNextPrevLinks();}
    			this.updateBtnStyles();
    		},
    		insertMask: function() {
    			this.runner.wrap('<div class="mask" />');
    			this.mask = this.carousel_wrapper.find('div.mask');
     
    			// set mask height so items can be of varying height
    			var maskHeight = this.runner.outerHeight(true);
    			this.mask = this.carousel_wrapper.find('div.mask');
    			this.mask.height(maskHeight);
    		},
    		setRunnerWidth: function() {
    			this.noOfItems = Math.round(this.noOfItems / this.options.noOfRows);
    			var width =  this.items.outerWidth(true) * this.noOfItems;
    			this.runner.width(width);
    		},
    		insertNextPrevLinks: function() {
    			this.prevLink = $('<a href="#" class="prev"></a>')
    								.bind('click.carousel', $.proxy(this, 'prevItem'))
    								.prependTo(this.carousel_wrapper);
    			this.nextLink = $('<a href="#" class="next"></a>')
    								.bind('click.carousel', $.proxy(this, 'nextItem'))
    								.appendTo(this.carousel_wrapper);
    		},
    		nextItem: function() {
    			this.itemIndex = this.itemIndex + this.options.itemsPerTransition;
    			this.animate();
    			return false;
    		},
    		prevItem: function() {
    			this.itemIndex = this.itemIndex - this.options.itemsPerTransition;
    			this.animate();
    			return false;
    		},
    		updateBtnStyles: function() {
    			if (this.options.nextPrevLinks) {
    				this.nextLink
    					.add(this.prevLink)
    						.removeClass('disabled');
    				if (this.itemIndex === (this.noOfItems - this.options.itemsPerPage)) {
    					this.nextLink.addClass('disabled');
    				} 
    				else if (this.itemIndex === 0) {
    					this.prevLink.addClass('disabled');
    				}
    			}
    		},
    		animate: function() {
    			var nextItem, pos;
    			// check whether there are enough items to animate to
    			if (this.itemIndex > (this.noOfItems - this.options.itemsPerPage)) {
    				this.itemIndex = this.noOfItems - this.options.itemsPerPage; // go to last panel - items per transition
    			}
    			if (this.itemIndex < 0) {
    				this.itemIndex = 0; // go to first
    			}
    			nextItem = this.items.eq(this.itemIndex);
    			pos = nextItem.position();
     
    			if (headache) {
    				this.runner
    					.stop()
    					.animate({left: -pos.left}, this.options.speed, this.options.easing);
    			}
    			else {
    				this.mask
    					.stop()
    					.animate({scrollLeft: pos.left}, this.options.speed, this.options.easing);
    			}
    			this.updateBtnStyles();
    		}
    	};
     
    	// bridge
    	$.fn.carousel = function(options) {
    		return this.each(function() {
    			var obj = Object.create(Carousel);
    			obj.init($(this), options);
    			$.data(this, 'carousel', obj);
    		});
    	};
    })(jQuery);

  6. #6
    Membre du Club
    Homme Profil pro
    Développeur web amateur
    Inscrit en
    Août 2012
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur web amateur
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2012
    Messages : 84
    Points : 43
    Points
    43
    Par défaut
    Je crains hélas! que ce script du carrousel ne gère pas les clics et se contente d'un défilement.
    Je pense qu'il faut me résigner à repasser une dizaine de jours à essayer d'adapter des sliders (avec option lecteur vidéo) avec des thumbnails (miniatures). car mon problème est d'avoir dissocié le lecteur du carrousel.

  7. #7
    Membre du Club
    Homme Profil pro
    Développeur web amateur
    Inscrit en
    Août 2012
    Messages
    84
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur web amateur
    Secteur : Conseil

    Informations forums :
    Inscription : Août 2012
    Messages : 84
    Points : 43
    Points
    43
    Par défaut
    En javascript, le clique sur le carrousel modifie l'iframe du "conteneur_lecteur"
    :

    Comment?
    Si j'ajoute au js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    $('.carousel ul li').click(function(e){
     
    	  //CODE POUR MODIFIER L'IFRAME
       });
    Dois-je déplacer cette discussion vers le forum javascript?

Discussions similaires

  1. API Java pour créer un lecteur vidéo
    Par Christophe39 dans le forum Multimédia
    Réponses: 1
    Dernier message: 26/01/2015, 15h24
  2. Réponses: 8
    Dernier message: 15/07/2011, 14h41
  3. Ressources graphiques pour lecteur vidéo
    Par muad'dib dans le forum Flash/Flex
    Réponses: 0
    Dernier message: 19/05/2009, 10h03
  4. Faire un lecteur vidéo pour la tnt
    Par publicStaticVoidMain dans le forum La taverne du Club : Humour et divers
    Réponses: 13
    Dernier message: 26/01/2009, 11h57
  5. Une déclaration pour la survie du jeu vidéo en France
    Par Freakazoid dans le forum DirectX
    Réponses: 1
    Dernier message: 30/10/2002, 14h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo