jquery pour passer et afficher des vidéos

J'ai ce pseudo code pour afficher un contenu différent basé sur la sélection de l'utilisateur, qui fonctionne bien. Maintenant, je veux aller un peu plus loin, disons quand un utilisateur clique sur video1, comment puis-je afficher une vidéo1 sur le lecteur vidéo, vidéo 2 sur puis lecteur vidéo etc? - grâcejquery pour passer et afficher des vidéos

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#leftmenu-b {width:330px; float:left; bordeR:1px solid #ccc;} 
#video-player-b {width:700px; float:left; margin-left:20px;} 

.videoSelect1 { border:1px solid red;background-color:#ccc;} 
.videoSelect2 {border:3px solid green;background-color:#fff;} 
.videoSelect3 {border:6px solid yellow;background-color:yellow;} 




#video-player { border:1px solid red; height:200px ;width:600px; padding:10px;} 


ul li {display:block; width:300px; padding:20px;} 
</style> 
<script language="javascript" src="jquery.js"> </script> 

<script language="javascript"> 
$(document).ready(function() { 

$('#video1').click(function() { 

    $('#video-player').attr("class", "videoSelect1"); //video1 
    $('#video-player').text("video1"); 
    $('#video1').addClass('videoSelect1'); 
    $('#video2').removeClass('videoSelect2'); 
    $('#video3').removeClass('videoSelect3'); 
    //$('#video-player').addClass("videoSelect1"); 
// $('#video-player2').addClass("videoNotSelected"); 
// $('#video-player3').addClass("videoNotSelected"); 

}); 
$('#video2').click(function() { 
    $('#video-player').attr("class", "videoSelect2"); //video2 
     $('#video2').addClass('videoSelect2'); 
     $('#video-player').text("video2"); 
    $('#video1').removeClass('videoSelect1'); 
// $('#video2').reomveClass('videoSelect2'); 
    $('#video3').removeClass('videoSelect3'); 
// $('#video-player').addClass("videoSelect2"); 
// $('#video-player1').removeClass("videoNotSelected"); 
// $('#video-player3').addClass("videoNotSelected"); 
    // $('#video-player1').removeClass("videoSelect1"); 

}); 
$('#video3').click(function() { 
    $('#video-player').attr("class", "videoSelect3"); //video3 
     $('#video3').addClass('videoSelect3'); 
     $('#video-player').text("video3"); 
    $('#video1').removeClass('videoSelect1'); 
    $('#video2').removeClass('videoSelect2'); 
    //$('#video3').reomveClass('videoSelect3'); 
// $('#video-player2').addClass("videoNotSelected"); 
// $('#video-player1').addClass("videoNotSelected"); 
// $('#video-player3').removeClass("videoNotSelected"); 
    // $('#video-player').addClass("videoSelect3"); 
    // $('#video-player1').removeClass("videoSelect1"); 
    // $('#video-player2').removeClass("videoSelect2"); 

}); 
}); 
</script> 
</head> 

<body> 

<div id="video-wrapper"> 

    <div id="leftmenu-b"> 
    <ul> 
     <li><a href="#" id="video1" class="videoSelect1">video1</a></li> 
     <li><a href="#" id="video2">video2</a></li> 
     <li><a href="#" id="video3">video3</a></li> 
     </ul> 
    </div> 
    <div id="video-player-b"> 
    <div id="video-player" class="videoSelect1"> 
     VIDEO 1 
    </div> 
    </div> 

    </div> 

</body> 
</html>

Source

2010-12-14 user244394

Juste pour rendre le code plus petit (en supposant que vous devez garder constante vos noms de bouton), cela devrait fonctionner:

$('leftmenu-b ul li a').click(function() 
{ 
    $('leftmenu-b ul li a').each(function() 
    { 
    $(this).removeClass('videoSelect' + $(this).attr('id').substring(5, 6)); 
    }); 

    number = $(this).attr('id').substring(5, 6); 

    $(this).addClass('videoSelect' + number); 
    $('#video-player').attr('class', 'videoSelect' + number); 
    $('#video-player').text($(this).attr('id')); 
});

Je sérieusement vos classes réusinage. Vous n'avez probablement pas besoin d'une classe spécifique pour chaque élément, car cela va à l'encontre de l'objectif des classes. En ce qui concerne la lecture vidéo, votre élément a la chaîne vidéo, n'est-ce pas? Pourquoi ne pas simplement passer une URL à travers le texte du lien, ou un élément caché dans le <li> (un hack brut).

Bonne chance!

Source

2010-12-14 05:13:03 Blender

Merci à vous. Je veux intégrer un lecteur vidéo et lire les vidéos en fonction de la sélection de l'utilisateur dans le conteneur div. Je me suis penché vers l'utilisation de l'attribut jquery html() en passant les codes d'intégration pour chaque vidéo, ce qui semble fonctionner. Y a-t-il un moyen plus propre ou meilleur? J'ai ajouté ce bit $ ('# video-player'). html (' ................................... semble fonctionner – user244394

jquery pour passer et afficher des vidéos

Répondre

Questions connexes