Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Play Youtube videos On a Embedded Player Upon clicking Multiple hyperlinks

    Hi guys.. I am just starting to learn JavaScript. I wanted to know how to have multiple hyperlinks (Containing links to Youtube Videos) that when clicked, cause the corresponding videos to play on the Youtube Player Embedded on the site. I hope my question is not too confusing. Thank you in advance!

    P.S.
    I saw some Source Code relating to this on StackOverflow and copied it and couldn't get it to work.. Here's my source code.

    Code:
    <html>
    <head>
    <title> Sample Page </title>
    <script>
    // Get element holding the video (embed or object)
    var player = document.getElementById("MOVIE");
     
    //Create a simple function and check if player exists
    function play() {
        if(player) {
            player.playVideo();
        }
    }
    </script>
    </head>
    <body>
    <object width="420" height="315"><param name="MOVIE" value="http://www.youtube.com/v/HsQIoPyfQzM?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HsQIoPyfQzM?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
    </br></br>
    <a href="http://youtu.be/sPvqNMb4StI" onclick="play()"> THIS IS FIRST Video Link </a></br></br>
    <a href="http://youtu.be/w7_Ccu21QVs" onclick="play()"> THIS IS SECOND Video Link </a>
    </body>
    </html>

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,798
    Thanks
    19
    Thanked 156 Times in 147 Posts
    In XHTML, there are no built-in javascript/DOM functions for manipulating video. You have to pick a video player, and then use the JavaScript API for that player. So, if you are using YouTube videos, then you will want to explore the YouTube API: http://code.google.com/apis/youtube/...reference.html.

    Here's a working example: http://code.google.com/apis/youtube/js_example_1.html
    (Hint: check the source code of that page.)

    However, if you opt to use HTML5, then you could use the new "video" tag and the DOM functions/properties associated with it:

    http://www.w3schools.com/html5/html5_video_dom.asp
    http://www.w3schools.com/html5/tryit..._video_js_prop
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Code:
    <html>
    <head>
    <title> Sample Page </title>
    <script>
    function play(clip){
    document.getElementById("frame").src= "http://www.youtube.com/v/"+clip+"&autoplay=1&rel=0";
     } 
    </script>
    </head>
    <body>
    <object width="425" height="355"><param name="movie" value=""></param><param name="wmode" value="transparent"></param><embed id ="frame" src="" type="application/x-shockwave-flash" border="1" wmode="transparent" width="425" height="344"></embed></object><br>
    <a href="#" onclick="play('6Zx39v3JUUI'); return false"> THIS IS FIRST Video Link </a><br>
    <a href="#" onclick="play('VVp0eo0vN8U'); return false"> THIS IS SECOND Video Link </a>
    </body>
    </html>
    Last edited by xelawho; 12-31-2011 at 07:53 PM. Reason: added autoplay & removed related vids

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi there,

    this works perfect in firefox but unfortunately not at all in IE/Chrom/safari. any idea how to make the code compatible with the other browsers?

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,374
    Thanks
    11
    Thanked 592 Times in 572 Posts
    afaik, only <video> has a standards-defined control API.

    the cross-platform way is to set the video to autoplay (there's attribs/flashvars for this in just about every embed code), and then inject the embed code with javascript to show/play the movie when needed.

    otherwise, you'll have to collect several methods, maybe even javascript libs like embedswf, jplayer, jw.js, qt's js lib, etc, to abstract the play() into the 2-5 versions you choose to support...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it seems to me that simplest would be to mimic the embed code that youtube provides on their page...
    Code:
    <html>
    <head>
    <title> Sample Page </title>
    
    </head>
    <body>
    <iframe id="theframe" width="420" height="315" src="" frameborder="0"></iframe>
    <br>
    <a href="#" onclick="play('6Zx39v3JUUI'); return false"> THIS IS FIRST Video Link </a><br>
    <a href="#" onclick="play('VVp0eo0vN8U'); return false"> THIS IS SECOND Video Link </a>
    <script>
    function play(clip){
    document.getElementById("theframe").src= "http://youtube.com/embed/"+clip+"?autoplay=1";
     } 
    </script>
    </body>
    </html>
    of course, for more functionality you would want to use the API, but the above is a simple enough cross browser solution imo


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •