Javascript: Changing a youtube video's volume

ID:862999
 
Jul 10 2012, 7:57 pm
(See the best response by DarkCampainger.)
Code:
mob/admin/verb/volumetest()

    var/script={"
    <!-- 1. The <div> tag will contain the <iframe> (and video player) -->
    <div id="player"></div>
<script>      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "http://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName(\'script\')\[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          playerVars: { 'autoplay': 1, 'controls': 1,'autohide':1,'wmode':'opaque' },
          videoId: 'JW5meKfy3fY',
          events: {
            'onReady': onPlayerReady}
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.mute();
      }
</script>
"}
    src << browse({"[script]"})


Problem description:

Javascript code from: http://jsfiddle.net/9RjzU/3/, for the YouTube Javascript API

This code works fine in a webserver, but the problems happen when you try it in a BYOND environment. The video simply does not load.

I inspected the youtube API help site and found this snippet:

From the Youtube API FAQ: https://developers.google.com/youtube/ js_api_reference#Playback_controls

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

This is probably what's causing my problems. So therefore, I need to store the javascript code on the internet instead of directly in BYOND. That causes a problem for my proc though because it would work, but only for that one specific video. I need a way to give the proc a video tag and pass that onto the script.

I have only taken java classes and am nowhere near as efficient with javascript, and I can't find anything else on this, so I have no idea where to even begin with this.

Any help would be much appreciated.
Jul 10 2012, 8:12 pm
Best response
The easiest way to pass the video ID may be by the URL fragment (aka hash, the bit after the "#").

For example, you could send them to http://www.example.com/player.html#JW5meKfy3fY.

Then you could retrieve the ID in your javascript from the location.hash property:
var videoId = location.hash.substring(1); // Get ID from url fragment, and trim off the '#'

You could also append a GET query to the URL (parameters after a question mark) and parse that from location.search.
Jul 10 2012, 9:46 pm
Okay, just when I think I have it working, it decides to not work.

So I uploaded the code to the internet.
http://dl.dropbox.com/u/77596770/musicgen.html#JW5meKfy3fY

As you see here, it works just fine. Whatever you pass with the hash tag plays muted by default.

The problem comes when I try to display it in BYOND.

It works with link() but that opens the link in a web browser.

So I encounter the same problem I had before, with browse().

I try to route the user to the URL using Wizkidd's browse_link proc, and I execute the verb like so:

mob/admin/verb/volumetest()
    browse_link("http://dl.dropbox.com/u/77596770/musicgen.html#JW5meKfy3fY",src)


When I do this, I get the same problem I had last time. The embed shows but the movie never loads or plays. Perhaps the problem is that browse_url is loading the code of the URL and trying to play it locally or something.

Either way, this is pretty frustrating.
Jul 10 2012, 10:39 pm
Using just this code has the movie loading and playing for me:
proc/browse_link(url,recipient,browse_options)
    recipient << browse(\
"<html><head></head><body onLoad=\"parent.location='[url]'\">\
</body></html>",browse_options)

mob/verb/volumetest()
    browse_link("http://dl.dropbox.com/u/77596770/musicgen.html#JW5meKfy3fY",src)


It didn't work for me at first because I had my IE security settings cranked up (it was just a blank white page), but once I lowered them to medium it did. However, the volume muting doesn't seem to work in IE8 (even run in the full browser, but it does work in my FF).
Jul 11 2012, 12:10 am
That's strange, it does not load for me. I just tried making a new project that only consists of that code and it still does not work

http://i.imgur.com/MAqZv.png

that's what I see
Jul 11 2012, 7:12 am
Do you normally use Internet Explorer? Did you try running the page in the full IE browser? Did you check its security settings?

You could also try grabbing the debug flash version, to see if it's throwing a security error or not. The security errors are notoriously vague, but at least you would know which level it's failing at.