Click here to Skip to main content
16,018,353 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I want to play a youtube video from my website by selecting the video from a list of videos in a listbox.
the code below plays the video specified, but I want it to be dynamic, that is to play the video when selected from a listbox.
Please help:

JavaScript
<pre lang="cs"><script>
     google.load("swfobject", "2.1");

     function updateHTML(elmId, value) {
         document.getElementById(elmId).innerHTML = value;
     }

     // Loads the selected video into the player.
     function loadVideo() {
         var selectBox = document.getElementById("videoSelection");
         var videoID = selectBox.options[selectBox.selectedIndex].value

         if (ytplayer) {
             ytplayer.cueVideoById(videoID);

         }
     }

     // This function is called when an error is thrown by the player
     function onPlayerError(errorCode) {
         alert("An error occured of type:" + errorCode);
     }

     var target = "";

     // This function is automatically called by the player once it loads
     function onYouTubePlayerReady(playerId) {

         ytplayer = document.getElementById("ytPlayer");
         ytplayer.addEventListener("onError", "onPlayerError");
         ytplayer.addEventListener("onStateChange", "onPlayStateChange");

         target = document.forms[0].target;

     }



     //unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5)
     var n = 0;
     function onPlayStateChange(newState) {

         if (newState == 1) {

             document.forms[0].elements["Send"].value = "1";
             document.forms[0].target = "SendFrame";
             document.forms[0].submit();
             updateHTML("counter", ++n);
         }
         else {
             document.forms[0].elements["Send"].value = "0";
             document.forms[0].target = target;
         }
     }

     // The "main method" . Called when someone clicks "Run". ylLzyHk54Z0
     function loadPlayer() {
         // The video to load
         var videoID = "https://www.youtube.com/v/vGR5h2sqrXw"

         // Lets Flash from another domain call JavaScript
         var params = { allowScriptAccess: "always" };
         // The element id of the Flash embed
         var atts = { id: "ytPlayer" };
         // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
         swfobject.embedSWF(videoID + "&enablejsapi=1&playerapiid=player1", "videoDiv", "480", "295", "8", null, null, params, atts);
     }
     function _run() {
         loadPlayer();
     }
     google.setOnLoadCallback(_run);
</script>



ASP.NET
<form id="form1"  runat="server">
    <div>
    <div id="videoDiv">Load...</div>   
<div id="counter">0
<br />
    <asp:ListBox ID="ListBox1" runat="server">
    <asp:ListItem Text="Video one" Value="http://www.youtube.com/v/ylLzyHk54Z0"></asp:ListItem>
     <asp:ListItem Text="Video two" Value="https://www.youtube.com/v/vGR5h2sqrXw"></asp:ListItem>
      <asp:ListItem Text="Video three" Value="https://www.youtube.com/v/4xfTsO21RiM"></asp:ListItem>
    <asp:ListItem></asp:ListItem>
    </asp:ListBox>
</div> 
    </div>
    </form>
Posted
Updated 27-Dec-14 17:16pm
v2

1 solution

you can call javascript method on change event as below
ASP.NET
<asp:listbox id="ListBox1" runat="server" onchange="PlayVideo(this);" >
    <asp:listitem text="Video one" value="http://www.youtube.com/v/ylLzyHk54Z0"></asp:listitem>
     <asp:listitem text="Video two" value="https://www.youtube.com/v/vGR5h2sqrXw"></asp:listitem>
      <asp:listitem text="Video three" value="https://www.youtube.com/v/4xfTsO21RiM"></asp:listitem>
    <asp:listitem>
</asp:listitem></asp:listbox>

and create method in javascript to play selected video
JavaScript
function PlayVideo(list) {
           // The video to load
         var videoID = list.value;
         // Lets Flash from another domain call JavaScript
         var params = { allowScriptAccess: "always" };
         // The element id of the Flash embed
         var atts = { id: "ytPlayer" };
         // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
         swfobject.embedSWF(videoID + "&enablejsapi=1&playerapiid=player1", "videoDiv", "480", "295", "8", null, null, params, atts);
   
}


update :
JavaScript
<script  type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type ="text/javascript">
    function PlayVideo(list) {
        var flashvars = {};
        var params = { wmode: 'opaque' };
        var attributes = { name: "mymovie" };
        swfobject.embedSWF(list.value + "&enablejsapi=1&playerapiid=player1", "videoDiv", "400", "200", "8.0.0", null, flashvars, params, attributes);
    }
</script>
 
Share this answer
 
v5
Comments
Member 10316149 28-Dec-14 0:17am    
How do I pass the value of the selected listitem (video) to the videoID variable

var video = document.getElementById('Listbox1');
var videoID = video.value.toString;

thought of the above but not working
DamithSL 28-Dec-14 0:24am    
try with
var video = document.getElementById('<%= Listbox1.ClientID %>');
Member 10316149 28-Dec-14 0:43am    
Not working please
DamithSL 28-Dec-14 0:50am    
I have updated my code, please check, you can pass listbox as parameter to your javascript function and directly take the value.
Member 10316149 28-Dec-14 1:09am    
Its alerting the value alright but really finding it deficault to pass it to the videoID variable in my function..Im new to javascript
please save my day

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900