1. Zuhause
  2. Frage und Antwort
  3. jquery zum Wechseln und Anzeigen von Videos

jquery zum Wechseln und Anzeigen von Videos

2010-12-14 15 views
0

Ich habe diesen Pseudocode, um verschiedene Inhalte basierend auf Benutzerauswahl anzuzeigen, was gut funktioniert. Jetzt möchte ich einen Schritt weiter gehen, sagen, wenn ein Benutzer auf Video1 klickt, wie kann ich ein Video1 auf dem Video-Player, Video 2 auf dann Video-Player usw. anzeigen? - dankjquery zum Wechseln und Anzeigen von Videos

<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>

Quelle

2010-12-14 user244394

Antwort

1

einfach den Code kleiner machen (vorausgesetzt, Sie Ihre Tastennamen konstant zu halten sind), dies sollte funktionieren:

$('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')); 
});

Ich würde Ihre Klassen ernst arbeiten. Sie brauchen wahrscheinlich keine spezifische Klasse für jedes Element, da dies den Zweck von Klassen vereitelt.

Wie für die Videowiedergabe hat Ihr Element die Video-Zeichenfolge, richtig? Warum nicht einfach eine URL zu ihr über den Link-Text oder ein verstecktes Element innerhalb der <li> (ein grober Hack) übergeben.

Viel Glück!

Quelle

2010-12-14 05:13:03 Blender

+0

Vielen Dank. Ich möchte einen Video-Player einbetten und die Videos basierend auf der Benutzerauswahl im div-container abspielen. Ich habe versucht, das jquery html() -Attribut zu verwenden, indem ich die eingebetteten Codes für jedes Video übergebe, was zu funktionieren scheint. Gibt es einen saubereren oder besseren Weg? Ich habe dieses Bit $ ('# video-player') hinzugefügt. html (' .................................... scheint zu funktionieren – user244394

Verwandte Themen

 Verwandte Themen