simple javascript to replace 1 movie with another - javascript

I'm aware this is probably a very simple problem with a 1-line-of-code answer but I've been on it a while now and it's still eluding me. We have a site that comprises mainly of an embeded flash object containing navigation controls. All I want is to insert a small .swf movie that will play like an intro scene to the website before the main .swf loads for the site itself. All this means is I want to call up 1 flash object, play it through and then replace it with another once finished. This seems to be a relatively simple desire but after a couple of hours worth of forum-trawling I'm still denied a simple solution. Anyone know any better?

The simpler solution is for all of this to be handled within Flash. That would give you a finer overall control.
If you handled this both with Javascript & Flash, a likely problem will be to have to wait for a movie to be loaded before it starts playing.
You could for instance call a Javascript function from the first movie when it completes playing, but you won't be able to avoid the delay between the two movie whilst the second movie loads.
If for some reasons, you don't have access to the code in any of these movies, create a third movie that will act as a container for both swfs where you'll be able to monitor loading progress and react accordingly.

As far as I know (will be glad if someone will correct me) you can't really know when Flash object has finished loading - for the JavaScript code it's pretty much "black box".
So, your best alternative is hide the "intro" after specific amount of time, for example five seconds:
window.setTimeout("document.getElementById('intro').style.display = 'none';", 5000);
This will hide element with the ID "intro" after five seconds.

There are a couple of solutions.
You can embed the intro and the navigation in one movie clip and just show the navigation after the intro movie has played.
You can also use ExternalInterface in flash in the intro movie. ExternalInterface allows Flash to call JavaScript functions and vice versa. So you basiclly write a small function in JS that changes the clips and call it via ExternalInterface at the end of the intro.

Related

(JS) SPA-like website behavior with background videos

Forgive me if another thread like this exists - I couldn't find the answer to that specific problem.
I'll soon be developing the frontend for a vanilla JS AJAX loaded website, with SPA-like behavior similar to the home slider in this one:
- http://clapat.ro/themes/grenada-wordpress
The methodology I will probably utilize is loading the innerHTML of a container from the targeted sub-template, then pushing the state to the history - pretty standard approach to this, I believe.
Now, the slides containing image background are pretty obvious - all it should take is placing the same image in the target subpage hero section, then animating in on load. The problem might be with the video slides - how to make them continue playing seamlessly during and after the reload? Will such approach force them to start all over from the beginning, as soon as the target page is loaded and placed in the view?
I haven't tried it yet, I thought I'd ask in advance, in order not to get myself stuck up all the way into the incorrect approach :)
Thank You in advance,
Peter
Researching the reference templates for the 100th time, I think I came up with some kind of a solution myself:
if both the homepage and target page had structure like:
<body>
<main-container>
<slider-or-hero-container>
...
</slider...>
<content-container>
...
</content...>
</main-container>
</body>
Then, maybe I could replace the whole "main-container" on normal links, but replace only "content-container" clicking the links within the slider? The slider section would basically just stay, and the script would simply modify its appearance (disabling arrows and slide change, perform the transition animations etc)...
If you had any suggestions at this point, I'll really appreciate that :) Otherwise, I will post an update when I'm done coding it - if it works, it may be helpful for someone in the future :)

Video website with suggestion/recommendation feature

i have been assigned on making a simple video lecture website with a recommendation feature for students in my place. I have little knowledge on html,css,java & php since i only learnt through YouTube. My main concerns are what should i do first or next and as for recommendation feature, they wanted to use a 'knowledge tree' concept.
E.g. when a student plays video topic V, then the recommended videos will be either video topic X and video topic Z. These recommended videos are based on lecturer's suggestion.
As for the recommendation feature part, the only idea came into my mind is using the (If Else) statement for each video but not sure in what language or where to put the algorithm. Lastly, is it a good practice to store video in mysql database?
You can use video names to show similar videos below active one or you can manualy give each video a code or name and show every video that has that code or name below active one.

How to detect the end of an embed flash movie

I have been struggling with this problem for a some time.
Basically have no clue how to do this.
I have a simple website where I have embeded a flash movie from a different site.
I need to detect when this movie reaches its end and then do some action ...
Is this possible via jquery/js?
Thank you.
s_
Basically there is a flash class called flash.external.ExternalInterface
AFAIK you can use that one to interface with JavaScript.
Please have a look into the details how to use it.
To get notified when a embedded flash video reaches the end I put a one-line command into the last frame on the time line:
dispatchEvent(new Event("VideoFinished"));
and hook up to the movie with
myMovie.addEventListener("VideoFinished", myMovieFinished);
where myMovieFinished is the function to call. There you could place the call to utilise the ExternalInterface.

How to stop a page loading 1000's of images at once

We have been building online catalogs for motorcycle parts for our online store.
Originally we did this with a program that turned PDF's into flash catalogs, but flash can't run on a lot of devices as you know and these devices are now getting super common.
So we have build an alternative in HTML, we exported each page of the original PDF's into images and built them into a jquery book.
http://www.thehogfathermotorcycles.com/catalog/jcata/mag.php?a=cce&b=2014&c=1
Some of these catalogs (like the one above) is over 1000 pages. I think you see the problem coming by now.... How on earth do we stop all 1000 images loading at once?
In a perfect world we load say 20... as the user flips through the catalog new images load on the back of this 20.
I really am stumped with this, how would you do it? We tried lazy load but unless you are scrolling vertically it does not work.
any help would be seriously appreciated.
Simple answer? Don’t add thousands of images to a HTML page.
More verbose, helpful answer: You could create a PHP script where you paginate the catalogue items, and then use AJAX to load the next “page” via pagination links. Destroy the previous page, replace with the next requested page.

Play a 2nd flash video after the first ends

I have a flash object set up in the standard format:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("swfplayer.swf", "myContent", "300", "120", "9", "expressInstall.swf");
</script>
but I want to start playing a second flash video on a different part of the web page the moment the first video ends. Is there a kind of listener of some sort to use?
Thanks
There actually is a way to do this, providing you movie is more or less timeline based. There's a couple calls that you can make to the flash object through javascript that will return you values you can check against to determine if the movie is complete.
To retrieve the current frame of the movie use:
document.getElementById("myFlashObject").TCurrentFrame("_root");
To check if the movie is playing use:
document.getElementById("myFlashObject").IsPlaying()
If the movie is stopped on a frame using the "stop()" method, this will return false. There's quite a few other methods you can use as well that you might find useful in playing the other movie. Here's a link to the Adobe reference docs:
http://www.adobe.com/support/flash/publishexport/scriptingwithflash/scriptingwithflash_03.html
Note: I tested this and it works with the flash player 10 in firefox. You may want to double check the cross-browser compatibility of these methods.
You could approach it from these two possibilities: LocalConnection or ExternalInterface.
I would go with ExternalInterface personally. With it, you can set up a javascript function that receives a call from videoPlayer_1 when its video has ended. To this javascript function you could pass an ID to determine which player has finished, and then send a call back up to the appropriate next player to tell it to start playing. You could repeat this process as many times as you have/swf's with videos.
I would have included an example but you didn't mention as2 or 3.
As for LocalConnection, you could create a group of movies with a local data connection, but this is easily broken by certain scenarios of multiple browsers/swfs, so probably not the most reliable method. However if you wanted to give it a shot, look up Grant Skinner's SwfBridge class to make things much easier.
Look at Detecting end of Flash movie in javascript

Categories