Simple example of Vimeo onFinish Event - javascript

I have tried several examples from vimeo and other websites for getting a JavaScript event to fire when an iframe embed vimeo video stops playing.
Nothing I try seems to work!
Does anyone have the simplest possible version of a JavaScript onFinish event for an iframe vimeo player?
The example page is www.armourylondon.co.uk/work.php - clicking on a video thumb animates a div and then loads in the player with Ajax. I am using the prototype / Scriptaculous frameworks for the ajax and animations.
I have got the froogaloop js included and as I said, I have followed many examples from Stack Overflow, from vimeo's API examples and from other websites too but none work - at least not for me!
All I need is for someone to show a good old Hello World alert when a video has finished playing - I can do the rest from there! I have been sat here for three hours trying to get a simple alert to flash up but alas to no avail!
The Js that runs the thumbnail-to-vimeo animation and loadup is directly in the head of the document - the code inside the onComplete function for the ajax updater under the comment // Vimeo Auto close after finish is the last version I have tried that didn't work. I have been putting the code in there as the iframe doesn't exist in the Dom until the Ajax Updater has loaded the video into the div that grew when the thumbnail was clicked.

I used this code in the end - got it working at about 9am this morning!
$f($('armoury_vid')).addEvent('ready', ready);
function ready(player_id) {
// Keep a reference to Froogaloop for this player
var container = document.getElementById(player_id).parentNode.parentNode;
froogaloop = $f(player_id);
froogaloop.addEvent('finish', function(data) {
document.body.removeChild($('armoury_vid').parentNode);
});
}
I placed the code into the onComplete callback for the Ajax.Updater call thats loads the vimeo video into the page.
I believe that it was because I was not wrapping the $(prototypecall) in the Froogaloops $f() function - mistake noted!
The above script was built using the Prototype framework - It would take very little work to adapt it to use the jQuery framework - its down to personal preference - they both do the same, just slightly different syntax!

Related

preventing console errors on fast transition between YouTube videos

I am creating a website where I am embedding a YouTube video on clicking some url's. The wrapper for the video is hidden initially, so I am displaying the wrapper on clicking on a url and then creating the player.
All is good, except that in case of fast transitions between url's, there are some errors thrown in the console which look like -
Uncaught TypeError: Object #<O> has no method 'cueVideoById'
Here is the sample code - http://jsfiddle.net/2b6bu7p4/2/
This happens only when I start clicking rapidly on the url's for the first time after page load. If I start on slowly, it works fine.
How can I fix this? Thanks in advance.
so a quick fix would be to make sure the player is ready before cueVideoById is called
function loadVideoOnClick(videoId) {
console.log('Loading');
if (player && player.cueVideoById) {
player.cueVideoById(videoId);
}
}
fiddle: http://jsfiddle.net/leighking2/2b6bu7p4/5/

Video.js enter fullscreen on play

I've been searching around for a long time but still haven't found a valid solution for my problem. I just cant seem to get the video player to enter fullscreen. The API does have many examples but none of them seem to work.
The jQuery version included on the page I am currently working on is 1.8.2. Also, I am using parallax-1.1.js and libraries required for it to work properly so that may also be an issue.
The client I am working for wants the site to have responsive design, with the ability of the player to directly go to fullscreen when the "Play" button is clicked. This functionality should be avalable both on desktop, and mobile/tablet browsers. On the video page, there should be 3 video players, each of them has unique IDs, and they also have a common CSS class.
Some of the code I tried didn't work well. Here's an example JS code snippet controlling one of the video HTML tags.
Example:
player1 = _V_('video-1');
player1.on("play",
function () {
this.requestFullScreen();
});
player1.on("ended",
function () {
this.cancelFullScreen();
});
The code generates this error:
Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'
I am working with the latest version of Google Chrome.
There are a two problems to be solved here.
First, you cannot go to full screen inside a 'play' event handler. For security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a 'click'. You can't have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule. So you need to move this to a 'click' handler on the actual play button.
The second is a big problem with Video.js 4.0.x, which is that it's minified using Google Closure Compiler with Advanced Optimizations. So many of the public properties and methods are obfuscated, making them difficult/impossible to use. In this case, requestFullScreen is now player1.Pa(). And, as far as I can tell, cancelFullScreen doesn't exist at all.
Here are some options for how to handle this:
Use the obfuscated method name. I don't recommend this, because a) the name will change with every minor version upgrade (e.g. 4.0.5) and b) it will make your code unreadable, and c) you can't use cancelFullScreen.
Get an un-minified copy video.js and host it yourself. (You can use Uglify or another minifier that won't mess with the method names.) Video.js doesn't provide this file, so you have to clone the git repo and run the build script yourself. And you don't get the advantage of using video.js's CDN for free.
Use an older version of video.js and wait until 4.x is ready for prime time.
Don't use video.js at all. Consider jPlayer and jwPlayer or roll your own.
I recommend 2 or 3.
Update: It looks like this particular issue has been fixed, but it has not made it into release yet.
I personally used a custom link that triggers both play and fullscreen.
<a class="enter-fullscreen" href="#">Play fullscreen</a>
And the js part:
<script type="text/javascript">
$('.enter-fullscreen').click(function(e) {
e.preventDefault();
$('.vjs-play-control').click();
$('.vjs-fullscreen-control').click();
});
</script>
This is improvable but simple and does the job.
One easy way to solve the problem:
document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)
Video goes full screen and the regular event of the play button causes it to start playing.
in video.js file go to this lines
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
and add
BigPlayButton.prototype.handleClick = function handleClick(event) {
var playPromise = this.player_.play();
document.getElementsByClassName('vjs-fullscreen-control')[0].click()
// exit early if clicked via the mouse
if (this.mouseused_ && event.clientX && event.clientY) {
silencePromise(playPromise);
return;
}

HTML5 embed tag - event attributes not firing (onended, onpause etc)

I've searched for many hours trying to find a solution to this problem. I have a HTML5 web page with a background sound file that plays automatically when the page loads, and I'm trying to get a function to run when the sound file finishes playing. I've isolated the code I'm using into a test file to ensure nothing else is causing the problem. The sound plays fine in Firefox (which I'm using to test). From the many solutions I've tried, it seems as though the event attributes in the embed tag simply aren't firing at all.
Here is the test HTML page I'm using (tried putting HTML in here but it wouldn't show up properly, I know it's probably a noob error but I'm in a hurry with this):
Testpage
As you can see the message function works fine, as the "TEST" link indicates when clicked. But the messages for the media events don't appear.
If anyone can help me with this, I'd be most grateful as it's for a time-critical company project. I'd be happy to try alternative solutions to the event attributes, as long as I can get my own Javascript function to run on the sound file reaching its end, I'll be happy!!
Thanks!
Billy
Since you're using HTML5, it would be better to use the <audio> tag rather than <embed>. This works fine in my example:
http://jsfiddle.net/u6dbV/
You can include HTML here, but it has to be marked up as code or it'll get stripped out.

YouTube video will not repeat

The website EndlessVideo used to work fine, but all of a sudden it will not loop videos anymore. I've found that running the following code in the console has the wanted effect, but strangely, adding it to the bottom of the page does not seem to work:
<script>
ytplayer = jQuery("#ytapiplayer")[0];
ytplayer.addEventListener("onStateChange", "onytplayerStateChange1");
function onytplayerStateChange1(state){console.log(state);if(state == 0){ytplayer.playVideo();}}
</script>
I've tried various modifications of the above, including calling it from onYouTubePlayerReady(), running it on a timer, etc... Nothing seems to work.
The youtube video player loads after the page is loaded. So the event is not actually getting bound to the player. Please try adding the state handler after the video starts playing or at least when the player has loaded.
The looping is enabled by passing the &loop=1 query string.
The JavaScript API isn't needed to enable looping.

How do you completely unload a swf (sounds and all) using javascript?

So, I have web page that uses javascript to let a user select different audio files to listen to (using this player: http://www.macloo.com/examples/audio_player/) which works great in every browser except for any version of IE. After the audio starts playing I can't figure out a programmatic way to make the audio stop playing after the user clicks on another item to listen to. I don't have access to the source of the swf so I'm trying to use javascript to do this. I went so far as to replace the entire body of the page - $("body").html("blank") - but it still played the audio loaded into the swf in it's entirety.
Is there any way I can completely remove a swf from a page (sound and all) just using javascript?
You could try
location.href = location.href;
That will completely reload the page.
Have you tried?
$('object').remove();
Well, you may need to use External-interface and call flash method from javascript and that flash method will remove the swf file. If you are using Action-Script 3 with Flash Player 10 then you can use unloadAndStop() method. This method will unload your swf and will remove all its events and sounds etc. it is better to use unloadAndStop() method than unload() method.
And if you want to hide flash from server-page , you have many ways , call page refresh with a variable passed in query string , based on that variable value , you can hide/show your swf file. If you do want to do it with JavaScript then take your swf in Div and hide that Div..
Well, I tried all of the solutions proposed and they didn't work across all browsers for me. :( What I ended up doing is loading up the flash content in an iframe - when I changed the src of that it would completely and reliably kill the audio that was playing. I think this might have been because the audio appeared to be streaming? Ugh, anyway - iframe time!

Categories

Resources