Vimeo-jQuery-API icon indicating copy to clipboard operation
Vimeo-jQuery-API copied to clipboard

no 'play' state returned

Open despecial opened this issue 8 years ago • 16 comments

Unfortunately the event states are not working properly. Using the current version (april 9th) and the example codes I cant retrieve the play state.

$('#video').on("play", function(){ console.log( "Video is playing" ); });

This used to work in February when I uploaded the code onto my site. I am not sure if the Vimeo API changed and your code doesnt recognize it but there is definately no log (Firefox, MacOSX)

despecial avatar Apr 10 '16 14:04 despecial

Hmm. I'm unable to reproduce this. Can you share a little more details on your setup? Are you dynamically loading the videos? Are the iframes already present in the HTML?

Also, if you are loading them dynamically, make sure you're calling the news vimeoLoad() method after appending the iframe.

jrue avatar Apr 10 '16 19:04 jrue

Sure. If you want I can send you a link to the live version (privately). The iframes are already in the HTML code, we use the Vimeo API to retrieve the mp4 links. No dynamic loading of iframes.

HTML: <iframe width="1200" height="675" wmode="transparent" id="video" src="//player.vimeo.com/video/1234567890?background=1&title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1&amp;api=1&amp;player_id=player_1&amp;hd=1"></iframe>

JS: ` /* Vimeo Player */ var vid = $('#video'), video_length = 0, video_state = 'paused'; if(vid.length) { video_state = 'playing';
$('.video-wrapper').append($pauseplay); vid.vimeo("play") .vimeo("setVolume", 1) .vimeo("getDuration", function(data){ video_length = data; console.log("Length "+ video_length); }) // Hide Video Overlay .on("play", function(){ console.log("playing"); $('.video-poster').addClass('playing'); $pauseplay.removeClass('play').addClass('pause').find('span').text('Pause'); }) // Paused Video .on("pause", function(){ $pauseplay.removeClass('pause').addClass('play').find('span').text('Play'); }) // Hide Outro .on("playProgress", function(event, data){ if(data.seconds < 1) { $('.video-poster').addClass('playing'); // Fix for missing play state event $pauseplay.removeClass('play').addClass('pause').find('span').text('Pause');
}
if (video_length - data.seconds < 1) $('.video-poster').removeClass('playing'); if (video_length - data.seconds < 0.5) { console.log("Rewind video"); vid.vimeo("unload"); video_state = 'paused'; } }) // please rewind
.on("finish", function(){ vid.vimeo("unload"); video_state = 'paused';
console.log("Finished "+video_state);
});

// Play / Pause $pauseplay.on('click', function(){ console.log(video_state);
if(video_state == 'paused') { vid.vimeo("play"); video_state = 'playing';
} else { vid.vimeo("pause"); video_state = 'paused';
} }); } `

despecial avatar Apr 10 '16 19:04 despecial

Hmm. I copied your code and pasted it into a JSFiddle and it seems to work. The video wasn't showing so I replaced the video ID number with a different one. Maybe the video is set to private or has embedding/api prevented in the settings?

https://jsfiddle.net/h6mx85dh/

jrue avatar Apr 10 '16 19:04 jrue

I changed the video id here because the video is a private one. The video is playing fine BUT I cant rely on the events. I can check the length e.g. or pause state but not the play state which is important since we hide the video under an overlay which has to be removed on the play state.

checked the jsfiddle: as you can see yourself, the console logs the length but nothing else.

despecial avatar Apr 10 '16 19:04 despecial

In the JSFiddle, try clicking the words "playpause." I had added that to agree with the code you sent. I'm getting all console logs from your code.

js fiddle screenshot

If the events are unreliable, then it must be on Vimeo's end. In order to make further adjustments to the plugin, I need some kind of reproducible fault that is consistent.

jrue avatar Apr 14 '16 06:04 jrue

Thanks for checking but it's not about the pause and playe button. You can see the video starts playing (autoplay or this triggers the play mode) Line 13 in your fiddle: vid.vimeo("play")

Line 21 checks the play state: // Hide Video Overlay .on("play", function(){ console.log("playing"); $('.video-poster').addClass('playing'); $pauseplay.removeClass('play').addClass('pause').find('span').text('Pause'); })

Nothing returning here. Only if the pause/play button is used.

despecial avatar Apr 14 '16 08:04 despecial

Try removing player_id=player_1 from the query string in the iframe src. Not sure why, but it works fine on my box, but for some reason that doesn't agree with JSFiddle.

I'll update the documentation as that isn't really needed now that I made the query string part of the plugin automatic.

https://jsfiddle.net/h6mx85dh/43/

jrue avatar Apr 14 '16 17:04 jrue

Thanks for the reply. I checked the fiddle on my Mac using the latest Firefox and Chrome browsers. No events are returned in Firefox. Console is only logging the segments from vimeo. I can upload a screenshot if you want. In Chrome I get all console logs.

Weird!

despecial avatar Apr 14 '16 17:04 despecial

Ugh. Ok, looks like I'll have to really investigate this with multiple browsers. Thanks for the updates.

jrue avatar Apr 14 '16 18:04 jrue

OK, I found the issue. Events were being sent to Vimeo before the iframe had fully loaded. It was tricky to get the timing just right, but I found a way to save events in jQuery's event chain and call them only after the iframe had fully loaded. I updated the plugin. Please test and let me know.

https://jsfiddle.net/h6mx85dh/55/

jrue avatar May 06 '16 02:05 jrue

Hi Jeremy,

I updated the script file with the latest version. It works on Chrome but not on Safari or Firefox. Still missing the play state.

Edit: the given jsfiddle doesn't return anything in Firefox (on Mac)

despecial avatar May 09 '16 11:05 despecial

Is it not working on all projects or just JSFiddle? For me, I can confirm Firefox isn't working on the JS Fiddle site, which I think might be due to postMessages not getting through to the iframe-within-iframe situation. (PostMessages are finicky about matching URLs for security reasons.)

But FF works fine locally and on a webserver. Safari works for me in all situations. The initial play state isn't fired because it's autoplay video, but pressing the play button fires it. Any more info you can provide on your specific setup?

Safari example

jrue avatar May 09 '16 23:05 jrue

So if I understand you correctly I should remove the autoplay parameter and start the vid myself using your triggers?

I can send you a link to the live version (which doesnt work with firefox). Is there any way to do that privately?

despecial avatar May 10 '16 10:05 despecial

Sure, that would be helpful. Email it to me. Jrue at berkeley dot edu

On Tuesday, May 10, 2016, despecial [email protected] wrote:

So if I understand you correctly I should remove the autoplay parameter and start the vid myself using your triggers?

I can send you a link to the live version (which doesnt work with firefox). Is there any way to do that privately?

— You are receiving this because you modified the open/close state. Reply to this email directly or view it on GitHub https://github.com/jrue/Vimeo-jQuery-API/issues/19#issuecomment-218121666

Sent from my iPhone

jrue avatar May 10 '16 14:05 jrue

Did you get my mail?

despecial avatar May 17 '16 14:05 despecial

Any news here?

despecial avatar Jun 30 '16 09:06 despecial