javascript - Jquery TubePlayer Plugin not functioning as desired

TubePlayer is a jQuery Plugin that implements YouTube Player API, and allows us to create our own controls and ponents for YouTube videos. The TubePlayer Website provides tips on getting started with it.

However, this is not working for me. This page on its site demonstrates a quick start guide. I followed exactly what it specified but does not work.

The video plays fine, but somehow the links to control the video do not work.

Is there anything wrong with the code. If you wanna try it out, here's the code :

<!DOCTYPE html>
<html>
<head>
  <script src=".6.2/jquery.min.js"></script>
  <script src=".2/swfobject.js"></script>
  <script src=".tubeplayer.min.js"></script>

  <script>
    $(function(){
      jQuery("#youtube-player-container").tubeplayer({
        width: 600, // the width of the player
        height: 450, // the height of the player
        allowFullScreen: "true", // true by default, allow user to go full screen
        initialVideo: "ylLzyHk54Z0", // the video that is loaded into the player
        preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
        onPlay: function(id){}, // after the play method is called
        onPause: function(){}, // after the pause method is called
        onStop: function(){}, // after the player is stopped
        onSeek: function(time){}, // after the video has been seeked to a defined point
        onMute: function(){}, // after the player is muted
        onUnMute: function(){} // after the player is unmuted
      });
    }) ;
  </script>
</head>
  <body>
  <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("play")'>
    Play
  </a>
  <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("pause")'>
    Pause
  </a>
  <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("stop")'>
    Stop
  </a>
  <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("mute")'>
    Mute
  </a>
  <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("unmute")'>
    Unmute
  </a>

  <div id='youtube-player-container'> </div>
</body>
</html>

Can anyone help me out please. Thanks.

However, this is not working for me. This page on its site demonstrates a quick start guide. I followed exactly what it specified but does not work.

The video plays fine, but somehow the links to control the video do not work.

Is there anything wrong with the code. If you wanna try it out, here's the code :

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis./ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis./ajax/libs/swfobject/2.2/swfobject.js"></script>
  <script src="http://www.tikku./scripts/ui/tubeplayer/jQuery.tubeplayer.min.js"></script>

  <script>
    $(function(){
      jQuery("#youtube-player-container").tubeplayer({
        width: 600, // the width of the player
        height: 450, // the height of the player
        allowFullScreen: "true", // true by default, allow user to go full screen
        initialVideo: "ylLzyHk54Z0", // the video that is loaded into the player
        preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
        onPlay: function(id){}, // after the play method is called
        onPause: function(){}, // after the pause method is called
        onStop: function(){}, // after the player is stopped
        onSeek: function(time){}, // after the video has been seeked to a defined point
        onMute: function(){}, // after the player is muted
        onUnMute: function(){} // after the player is unmuted
      });
    }) ;
  </script>
</head>
  <body>
  <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("play")'>
    Play
  </a>
  <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("pause")'>
    Pause
  </a>
  <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("stop")'>
    Stop
  </a>
  <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("mute")'>
    Mute
  </a>
  <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("unmute")'>
    Unmute
  </a>

  <div id='youtube-player-container'> </div>
</body>
</html>

Can anyone help me out please. Thanks.

Share Improve this question asked Jul 19, 2011 at 12:13 prasvin 3,01924 silver badges28 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 9

Sorry for the above question, my bad. I found out the problem, just noticed that in the API docs page. As stated in the documentation, we need to be on a web server with the test script. No idea, how i missed that section. Need to concentrate more often while reading in the future.

I quote the very documentation page:

" Any HTML page that contains the YouTube player must implement a JavaScript function named onYouTubePlayerReady. The API will call this function when the player is fully loaded and the API is ready to receive calls.
Note: To test any of these calls, you must have your file running on a webserver, as the Flash player restricts calls between local files and the internet. "

The above code works fine. Thanks.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Jquery TubePlayer Plugin not functioning as desired - Stack Overflow

1 Answer 1

评论列表(0)