Javascript Image Slider / Posts /

YouTube API events like onReady onStateChange are not firing in FF as of 1292014

2
Here's my webpage: http://badmofo.wadasia.com/game_mw2.html

I edited the mcVideoPlugin.js to have some extra functionality on API events:

h=new YT.Player(a,{events:{
                    onReady:g,
                    onStateChange:f,
                    onStateChange:onPlayerStateChange  //--> this is the line i added
                    }}) 

//-> also added everything below this line
function onPlayerStateChange(event)
{       
    if(event.data === 1)
    {
         hideCaption();
    }
    else if ( event.data === 2 )
    {
        showCaption();
    }
}

function showCaption()
{
    var divs = document.getElementById("slider").getElementsByTagName("div");
    for(var d=0; d<divs.length; d )
    {
         if(divs[d].className=="mc-caption-bg" || divs[d].className=="mc-caption-bg2")
             divs[d].style.visibility = "visible";
    }
}

function hideCaption()
{
    var divs = document.getElementById("slider").getElementsByTagName("div");
    for(var d=0; d<divs.length; d )
    {
         if(divs[d].className=="mc-caption-bg" || divs[d].className=="mc-caption-bg2")
             divs[d].style.visibility = "hidden";
    }
}
=======================================================
This essentially hides the caption when the video is playing and brings it back when the video is not playing.  This worked on all major browsers back when I first made the website in Sep 2013. I don't know when it broke, but as of Jan 2014 the API event: onStateChange never fires in FireFox.  In fact neither does onReady. I've tried a bunch of supposed fixes I found by googling the problem, but none work. Please help. And please keep in mind I'm not a well versed web programmer. I mostly just fumble around with other people's working code.

Mohammad  6 years ago   viewed: 19885    

14 Answers

0
Milo? any suggestions? :) I've been tinkering here and there and still haven't found a solution.
Mohammad   6 years ago
0
The guy who wrote the mcVideoPlugin.js is sick these days. 

Why don't you take this approach: http://www.menucool.com/1271/How-to-hide-the-caption-when-I-play-the-video-in-the-slider
Milo   6 years ago
0
that is exactly what I'm doing Milo. I'm calling the HideCaption() and ShowCaption() from the onStateChange Event listener.  I couldn't think of a better way to do it. The event listener isn't firing anymore in FireFox though. Any suggestions on where else I could call HideCaption() and ShowCaption() from?
Mohammad   6 years ago
0
afterSlideChange is not the event I'm interested in. Using that event causes the caption to go away anytime the slide is changed... not specifically when the video is played. Using the onStateChange listener for YouTube API makes the caption go away when the video is playing and come back when the video is stopped. It works in other browsers and use to work in FireFox, but not anymore. I was hoping you or someone else would have an answer or work around.
Mohammad   6 years ago
0

I got what you mean. I think I also found where your issue is.

You should not add a new: onStateChange:onPlayerStateChange  //--> this is the line you added 

as it will override the previous onStateChange:f

You should find the function f and add your additional tasks there.

The function f in the minified version of the mcVideoSlider.js is:

function f(c){if(c.data==0){var d=document.getElementById("mcVideo"+a.Id),b=d.parentNode.parentNode.getAttribute("data-autonext");if(b=="replay")c.target.d();else b!="false"&&a.To(1,1)}}

And its translation:

function onPlayerStateChange(event) { if (event.data == 0) { var ifrm = document.getElementById("mcVideo" + innerSlider.Id); var autonext = ifrm.parentNode.parentNode.getAttribute("data-autonext"); if (autonext == "replay") event.target.playVideo(); else if (autonext != "false") innerSlider.To(1,1); } }

You can try adding your original functions there.

Please post your solution here when you've made it working. Thanks!

Milo   6 years ago
0
I was really hoping that would fix it, but alas it didn't. I still kept your change because it's good advice, I consolidated your f() function and my onPlayerStateChange() into one and pointed the event listener to it:

function onPlayerStateChange(event) 
{
alert( "called onPlayerStateChange" )

//this first "if statement" is the function f() from above
if (event.data == 0)
{
var ifrm = document.getElementById("mcVideo" + innerSlider.Id);
var autonext = ifrm.parentNode.parentNode.getAttribute("data-autonext");

if (autonext == "replay")
event.target.playVideo();
else if (autonext != "false")
innerSlider.To(1,1);
}
else if(event.data == 1)
{
hideCaption();
}
else if ( event.data == 2 )
{
showCaption();
}
}

but the problem in firefox persists. For whatever reason onPlayerStateChange doesn't get called in firefox. That alert at the top of the function never happens. The current code ( minus the alert ) is up on my website: http://badmofo.wadasia.com/game_mw2.html.

on a side note, is there a non-minified version of the mcVideoSlider.js? It would help me a lot :)
Mohammad
  6 years ago
0
Let me know your email address and I will send it to you(the portion for YouTube only).
Milo   6 years ago
0
YouTube's onStateChange event fires whenever the player's state changes. event.data possible values are:
-1 (unstarted), 0 (ended), 1 (playing), 2 (paused), 3 (buffering), 5 (video cued).

Mohammad,
In which state you want the caption to be hidden: 1, 3, and 5?
John   6 years ago
0
1 - the code already supports that. The code already works in every browser except for FireFox. It's a firefox specific issue, not a youtube API one.
Mohammad
  6 years ago
0
Mohammad,

We've updated the mcVideoPlugin.js. Now it is v2014.2.5. Please download and use the updated version(under the themes/6/ folder).

I found your js-image-slider.js is also old. It is recommended to use its latest version as well(now v2014.1.4).

Update of the mcVideoPlugin.js:

Added the following options in mcVideoPlugin.js:

var McvOptions = { showCaptionWhenPlay: false, showCaptionWhenPause: true };

You can set their values to either true or false.

We have tested it with FireFox(under Win XP), and found it is working as well as with other browsers.

Please post your testing results and questions(if any) here. Thanks.

Milo   6 years ago
0
I was so excited for this to work, but alas it doesn't :(

- I updated both the js-image-slider.js and the mcVideoPlugin.js.
- I changed the showCaption options to what you demo'ed above
- Exact same problem as before. It doesn't work in firefox. You tested youtube videos with FireFox? I'm running Win7 btw.

http://badmofo.wadasia.com/game_mw2.html
Mohammad
  6 years ago
-2
I tested your page with FireFox again on two machines(WinXP and Window Vista), and the captions went away when the video is playing, and came back when pause the video. It works well.
I am wondering if your FireFox has improper settings. You can use another machine to test. 
Milo   6 years ago
-1
Don't know what to tell you guys - been trying this on many machines for a while now. Every machine has the same problem, the captions never go away. Now it also doesn't work in internet explorer
mohammad
  6 years ago
-3
But I can see your page game_mw2.html is working well ( I tested it with Chrome and IE 7)
Milo   6 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: