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

JavaScript Discussion :

plusieurs liens video pour un lecteur unique


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Avril 2012
    Messages
    17
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2012
    Messages : 17
    Par défaut plusieurs liens video pour un lecteur unique
    Bonsoir,

    je veux creer une partie dans mon site pour visualiser des videos.
    je veux avoir un seul lecteur video pour cette partie (videojs) et avoir des liens en dessous qui correspondront a des videos (adresse des videos: <a href="video/test.mp4">video 1</a>).
    J'aimerais qu'en cliquant sur un des liens, la vidéo soit chargée dans le lecteur vidéo principal.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <video id="videoPL" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" data-setup='{"example_option":true}'>  
    	<source id="sourcevid" src="" type='video/mp4' />  
    </video>
     
    <a href="video/video1.mp4" id="lienvid">video 1</a>
    <a href="video/video2.mp4" id="lienvid">video 2</a>
    <a href="video/video3.mp4" id="lienvid">video 3</a>
    <a href="video/video4.mp4" id="lienvid">video 4</a>
    <a href="video/video5.mp4" id="lienvid">video 5</a>
    Etant donné que je débute en programmation, je n'ai aucune idée pour trouver une solution a ce probleme.
    Si quelqu'un pouvait m'aider, je le remercie d'avance.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Pour commencer un id doit être unique sur la page !

    ensuite il te faut modifier dynamiquement la source de ta balise video
    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
     
    //dans le head
    <script type="text/javascript">
    function  changevid(video){
    document.getElementById("sourcevid").src=video;}
    </script>
     
     
     
    <video id="videoPL" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" data-setup='{"example_option":true}'>  
    	<source id="sourcevid" src="" type='video/mp4' />  
    </video>
     
    <a href="video/video1.mp4" id="lienvid1" onclick="changevid(this.href); return false;">video 1</a>
    <a href="video/video2.mp4" id="lienvid2"  onclick="changevid(this.href); return false;">video 2</a>
    <a href="video/video3.mp4" id="lienvid3" onclick="changevid(this.href); return false;">video 3</a>
    <a href="video/video4.mp4" id="lienvid4" onclick="changevid(this.href); return false;">video 4</a>
    <a href="video/video5.mp4" id="lienvid5" onclick="changevid(this.href); return false;">video 5</a>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Avril 2012
    Messages
    17
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2012
    Messages : 17
    Par défaut
    merci de ton aide.

    J'ai utilisé le code que tu viens de me donner et lorsque je clique sur un lien ca ouvre un nouvel onglet et ca me propose de telecharger la video.
    D'ou peut venir ce bug?

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    on peut voir ton code .?..

    le href n'est pas inhibé ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Avril 2012
    Messages
    17
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2012
    Messages : 17
    Par défaut
    ca veut dire quoi le href pas inhibé?

    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
     
    <!DOCTYPE HTML>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content=""/>
    <meta http-equiv="lang" content="fr"/>
    <meta name="revisit-after" content="15 days"/>
    <meta name="robots" content="index, follow"/>
    <meta name="Rating" content="General"/>
    <meta name="Robots" content="All"/>
    <link rel="shortcut icon" href=""/>
    <link rel="stylesheet" href="../css/style.css" type="text/css" media="screen,projection"/>
    <link rel="stylesheet" href="../css/video-js.css" type="text/css" media="screen,projection">
    <script type="text/javascript" src="../js/video.js"></script>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/function.js"></script>
    <script>
    	_V_.options.flash.swf = "../swf/video-js.swf"
    </script>
    <script type="text/javascript">
    function  changevid(video)
    {
    document.getElementById("sourcevid").src=video;
    }
    </script>
    </head>
    <body>
    	<?php include('header.php'); ?>
    	<div id="main">
    		<div class="videow">
    			    <video id="videoPL" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" data-setup='{"example_option":true}'>  
    					<source id="sourcevid" src="" type='video/mp4' />  
    				</video>
    		<?php 
    			try
    			{
    				$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
    				$bdd = new PDO('mysql:host=localhost;dbname=videooow', 'root', '', $pdo_options);
    			}
    			catch(Exception $e)
    			{
    				die('Erreur : '.$e->getMessage());
    			}
    				$req = $bdd->query('SELECT video_match.journee_id, video_match.date, video_match.score, video_match.idvideo,
    									equipe1.id AS equipe1_id,
    									equipe1.nom AS equipe1_nom,
    									equipe2.id AS equipe2_id,
    									equipe2.nom AS equipe2_nom
    									FROM video_match
    									JOIN ligue ON ligue.id = video_match.ligue_id
    									JOIN video_journee ON video_journee.id = video_match.journee_id
    									JOIN video_equipe AS equipe1 ON equipe1.id = video_match.equipe1_id
    									JOIN video_equipe AS equipe2 ON equipe2.id = video_match.equipe2_id
    									WHERE ligue.id = 1
    									ORDER BY video_match.journee_id');
     
    				$i = null;
    				$j = 1;
     
    				while($donnees = $req->fetch())
    				{ 
     
    					if($i == null)
    					{
    						$i = $donnees['journee_id'];
    						echo '<div class="match" name="match" id="day'.$j.'" style="display: block;">';
    						$j++;
    					}
    					if ($i != $donnees['journee_id']) 
    					{
    						echo '</div><div class="match" name="match" id="day'.$j.'" style="display: none;">';
    						$i = $donnees['journee_id'];
    					}
    		?>
    				<div class="matchx">
    				<table>
    				<tr>
    					<div class="date"><?php echo $donnees['date']; ?></div>
    				</tr>
    				<tr>
    					<td class="gauche"><span class="teamone"><?php echo $donnees['equipe1_nom']; ?></span></td>
    					<td class="centre"><a href="video/<?php echo $donnees['idvideo']; ?>"  onclick="changevid(this.href); return false;" target="_blank" title="Regarder les buts" class="score"><?php echo $donnees['score']; ?></a></td>
    					<td class="droite"><span class="teamtwo"><?php  echo $donnees['equipe2_nom']; ?></span></td>
    				</tr>
    				</table>
    				</div>
    		<?php
                                    }
                                            echo '</div>';
                    ?>
    		</div>
    	</div>
    	<div id="footer">
    	<br />
    	</div>
    </body>
    </html>

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Nous somme sur un forum javascript .
    Merci de poste le html généré, pas le php ...

    Mais commence déja pas virer le target balnk ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. [Wamp] Liens symboliques pour un dossier commun à plusieurs sites
    Par Tseutseu dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 2
    Dernier message: 08/02/2016, 16h48
  2. Réponses: 0
    Dernier message: 28/10/2014, 15h13
  3. [HTML 5] Créez des liens profonds pour les objets video et audio HTML5
    Par FirePrawn dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 16/04/2013, 13h06
  4. Réponses: 1
    Dernier message: 04/04/2013, 11h55
  5. Réponses: 3
    Dernier message: 30/08/2008, 07h38

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