Using jquery to load and play a flash file - javascript

I have a client that has one of those overlay flash videos that "walks out" on screen and talks and then leaves. While I know this is very dated and we have explained this, the client insists on having it.
How do I load and play an animation on a button click using jquery?

Related

Custom Vimeo API embed not autoplaying in Chrome

I have a quite specific issue regarding Chrome's new feature where they stop autoplaying videos.
On our site we wanted the page to load as quickly as possible, so only insert a new Vimeo embed object when a user has chosen to click to watch a video. Eg. the showreel on our homepage:
https://www.splinter.co.uk/
The problem arises because we use our own custom play button, so Chrome doesn't recognise that as a user-interaction, so it doesn't think that the user has chosen to view the video, therefore it blocks the autoplay option (which works fine in Safari).
I wondered if anyone else has had this problem, and if anyone can think of a workaround?
Thanks!
On the VOD home page of Vimeo you can find a technique that is used for a case like this. https://vimeo.com/ondemand
You can preload the Vimeo player when the user hovers over your custom play button so that at the time they click the Vimeo player.js API can be used to initiate playback. player.play()
If that is not sufficient it might be needed to load the player on page load and just keep it hidden, on the button press reveal the player and use the API to initiate playback.

Audio player that plays throughout the site

I am trying to implement a feature on our wordpress site. Since the site is wordpress, we do have access to the plugins but our site is actually pretty custom and as a developer I do feel comfortable implementing code.
The feature we are trying to implement is similar to these sites:
http://www.premiumbeat.com/royalty_free_music/most_popular
http://99percentinvisible.org/
The audio player continues to play even as you navigate the site. Queuing is not as important to us but the ability to play while navigating the site would be great. I do realize we can have a popup player but we like the idea of on that is sticky to the bottom of the page. Anyway to do this?
The site that you are using as an example happens to be a single-page application. Unfortunately, you'll have to implement your entire site as a SPA if you want to keep the radio playing seamlessly between page loads. Using a traditional site structure means that the music will inevitably stop playing between page loads.
You can store the state of the player in localStorage and continue playing where you left off, but that's as close to seamless as you can get without making the site a SPA.
Edit: alternatively, you can have the page open up a new tab that plays your music and responds to ajax calls from your main page. That might be a problem if the user disables popups on your site.

Accordian Layout with youtube videos starting and stopping

Ok so to start, I have a php webpage that pulls info from my mysql database and populates a page of videos. These videos are displayed in a vertical accordian initally you see the thumbnail and when clicking the thumbnail it expands (accordian effect) and shows the video and plays the video and then when clicking on a new tab the previous video stops playing.
I know this can be done and I almost got it working using the google apis but it didnt work 100%
Here is the jsFiddle to see what I am talking about, I am pretty sure if I can figure out how to make this work I can then figure out how to make it work with my php, but where i got stuck last time is where if open section 1 i want the video only in section 1 to play and when i open another section i want the previously oppened tab to stop playing and play the new one.
HOpefully this makes sense
http://jsfiddle.net/mxDbn/1/
There was no solution for youtube as the API was not involved enough, or I could not figure it out, but rather to embed with flash when falsh was available and because of how videos operate on mobile devices I wouldnt have to worry about html5 playing when it was not on screen because if the video is not seen it will not play.
Vimeo did however offer a javascript api function to stop playing the video when the next page was clicked.

Remove video when it is completed

I am looking to have a video start when a page loads, but once the video has completed, to hide the video (remove the layer possibly). I saw it on a yoga site a few years ago where a video message from the owner appeared over top the content when the page loaded but then dissapeared after the video was done. Not even sure where to begin looking for something like this.
This is something that needs to be handled at the player level. Many flash players or frameworks allow you to register for an event. One event might be on video complete. First get this working. You may not be able to do this from javascript. For example, adobe's strobe player requires you to write a swf plugin which would be loaded in the flash player. Not trivial.
After you have registered it, you can easily close the window by executing some javascript function.
Let me know if you have more questions.

Any way to run JS after swf is finished playing?

I'm working on a project where a SWF will play (as sort of a splash), followed by JS. After the video plays, the navigation and content will appear, and the video will fade out. I'm just wondering what would be the best way to accomplish this? Play the video first and then load everything via ajax behind the scenes? The goal is to be as seamless as possible and I am having a flash asset provided to me by the client. I have zero experience with flash outside of simply embedding.
The Flash asset can call a JavaScript method via ExternalInterface when it's done.
However, the use of Flash for splash screens is something generally hated by users. I would recommend against it unless it's an intro they specifically click a "Show Intro" button to show (as opposed to always showing with a Skip Intro to skip).

Categories