Open despecial opened 8 years ago
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.
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&byline=0&portrait=0&color=ffffff&autoplay=1&api=1&player_id=player_1&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';
}
});
}
`
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?
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.
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.
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.
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.
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.
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!
Ugh. Ok, looks like I'll have to really investigate this with multiple browsers. Thanks for the updates.
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.
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)
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?
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?
Sure, that would be helpful. Email it to me. Jrue at berkeley dot edu
On Tuesday, May 10, 2016, despecial notifications@github.com 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
Did you get my mail?
Any news here?
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)