Page 2 of 2 FirstFirst 12
Results 11 to 12 of 12

Thread: Loading YouTube videos using the most recent YouTube embed code

  1. #11
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Great, I think. I'm not sure what progress we made on the issue in Firefox on the original page in this thread though.

    Anyways, I see that on your other pages, unless it's there in an iframe somewhere and I missed it, you're not using the the YT javascript api. For the old style tag (object/embed) or any tag That uses the url format:

    Code:
    http://www.youtube.com/v/YT_VIDEO_ID
    as the src of an embed or as the data attribute of an object or as the value of a param named movie that's a child of an object tag, all you need are the version=3, enablejsapi=1 and a playerapiid=someuniqueid as query values in the url, ex:

    Code:
    http://www.youtube.com/v/YT_VIDEO_ID?version=3&enablejsapi=1&playerapiid=someuniqueid
    Once it has that, you can use the:

    Code:
    onYouTubePlayerReady
    function to get a javascript reference to the video at the api level where you can play/pause it, react to when it's played or paused, keep abreast of its time index, set its time index, and a number of other goodies.

    It's all a little arcane, but not all that hard to work with. I've use one something like (where the playerapiid is the same as the video's tag's id):

    Code:
    window.onYouTubePlayerReady = function(playerid){
    	document.getElementById(playerid).addEventListener('onStateChange', 'stateChanges["' + playerId + '"]');
    }
    Where stateChanges is an object I made earlier and then later wrote a function to under the id key at the same time I created the video's tag. A function like:

    Code:
    function(state){alert(state);}
    The state is like an event, but it's a number -1 for unstarted, 1 for playing, other numbers for other states.

    And once its ready the video can be made to play and do other things by referring to its tag and using the various api methods on it.

    Another important thing is that addEventListener in the above is a YT javascript api method, not the standard event model addEventListener, so works in IE less than 9 even though they don't support the standard event model. And it differs from the standard event model in that it requires no parameter for the bubble phase of the event and that the function param is given as a string, not as a function object.

    It all works quite well and there are more detailed instructions/information/examples at:

    https://developers.google.com/youtube/js_api_reference
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #12
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    John, thanks for the information. I experimented with this already, though, and noticed that the YT javascript api doesn't give me all the freedom I want over my videos. It would take too much time to explain this, so let me just say I think I found a solution for the video-control issue in Firefox on the original page in this thread, see this.
    Thanks,
    Arie.

Bookmarks

Posting Permissions

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