I ran into a bit of a problem yesterday trying to create a randomization of video playback every time a particular web page loads that was compatible across all browsers. I think I came up with a pretty cool solution, so I thought I would share it in case anyone else runs into a similar issue. This post will be a bit more technical than others, and I probably won’t do this too often, but I thought this was worth sharing.
Here is the scenario: I recently built a new website for my employer, LEVEL. You can view the site here: levelbrand.com. The site is a fairly simple standards-based site, but uses sIFR and Faust to add some nice interactivity in certain places. One thing we wanted to implement on the home page was a randomly selected audio clip to play along with a flash slideshow every time the page was reloaded. This is where the problem started, since I didn’t know how to make this happen.
Here was my initial plan of action. I built 7 identical picture slideshows, each with a different audio “soundtrack.” I used Keynote to build the slideshows, added in the audio soundtrack, and recorded the slideshow. Since I am not an actionscript wiz, this was faster and allowed for easier editing in the future, instead of building everything in flash. Then I exported the presentation as a quicktime movie and used flash to convert that movie to .swf and .flv files. Now I had my 7 movies, but how was I going to randomize them?
I did some research, found this thread, and found the following piece of javascript that seemed to do the trick:
<script type="text/javascript">
/***********************************************
* Random Video Script- ©
* Author: Raymond Angana
* rangana in AHFB2000.com
* modified last May 2, 2008
* This notice MUST stay intact for legal use
***********************************************/
var v1,v2,v3,v4,v5,rangVideo;
/*********Edit this part for the videos***********/
v1='<object width="400" height="400"><param name="movie" value="http://www.w3schools.com/flash/ball.swf"><embed src="http://www.w3schools.com/flash/ball.swf" width="400" height="400"></embed></object>';
v2='<object width="400" height="400"><param name="movie" value="http://www.w3schools.com/flash/mouse.swf"><embed src="http://www.w3schools.com/flash/mouse.swf" width="400" height="400"></embed></object>';
v3='<object width="400" height="400"><param name="movie" value="http://www.w3schools.com/flash/colorchange.swf"><embed src="http://www.w3schools.com/flash/colorchange.swf" width="400" height="400"></embed></object>';
v4='<object width="400" height="400"><param name="movie"value="http://www.w3schools.com/flash/helloworld.swf"><embed src="http://www.w3schools.com/flash/helloworld.swf" width="400" height="400"></embed></object>';
v5='<object width="400" height="400"><param name="movie" value="http://www.w3schools.com/flash/button2.swf"><embed src="http://www.w3schools.com/flash/button2.swf" width="400" height="400"></embed></object>';
/*******************************************/
rangVideo=[v1,v2,v3,v4,v5]; // This depends on the number of videos you have.
window.onload=function()
{
rangProc=Math.floor(Math.random()*rangVideo.length);
document.getElementById('display').innerHTML=rangVideo[rangProc];
}
</script>
I tweaked the script a little and put in paths to my videos, and it worked just fine with tests in Firefox, Safari, and IE 7. However, I now realized I had two problems. The first was that this script uses window.onload and innerHTML, and that caused a script error in IE 6. And because I could not use the innerXHTML of the Faust technique, which would have just displayed alternative content for those running IE 6, the IE 6 users were, instead, just seeing a blank screen with a script error.
The second problem was that the alternative .jpg image, that would display in place of the flash movie if someone had javascript disabled in their browser, was appearing and disappearing on the screen as the flash slideshow was loading. So there was this weird flicking effect until the flash movie loaded and started playing.
I was o.k. with the second problem if I could find a solution to the first one; obviously fixing both would be ideal. I did some more research, came to this thread, and ultimately the following code fix for the window.onload issue:
function init() {
if (arguments.callee.done) return;
arguments.callee.done = true;
// do your thing
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', init, false);
}
(function() {
/*@cc_on
if (document.body) {
try {
document.createElement('div').doScroll('left');
return init();
} catch(e) {}
}
/*@if (false) @*/
if (/loaded|complete/.test(document.readyState)) return init();
/*@end @*/if (!init.done) setTimeout(arguments.callee, 50);
})();
_prevOnload = window.onload;
window.onload = function() {
if (typeof _prevOnload === 'function') _prevOnload();
init();
};
Now this appeared to fix the window.onload problem with IE 6, but it did not address the innerHTML problem. By this point I was pretty frustrated and took a step back to see if there was another way to do this without trying to dive into the innerHTML issue.
I decided to try to create the same effect with actionscript, since I understand that a little better than javascript. I found this thread which basically saved the day. Here is the actionscript code:
/* create a new array called video_array*/
var video_array = new Array();
/* insert the names of your video clips into the array. Notice that the*/
/* first element is "video_array[0]". Arrays in Flash are zero based.*/
/* So the first element in an array is position zero then one, two, three*/
/* and so on......add as many as you like.*/
video_array[0] = "video1";
video_array[1] = "video2";
video_array[2] = "video3";
video_array[3] = "video4";
/* this is the count of how many elements (videos) are in your array*/
var max = video_array.length;
/* this is a for-loop that will do the work for you*/
for (var i = 0; i < max; i++) {
/* name of the video clip at the specified element*/
var name = video_array[i];
/* make all the videos invisible and tell them to not play*/
this[name]._visible = false;
this[name].stop();
}
/* choose a random number from zero to max (defined above) and set it's*/
/* value to 'randomNumber'*/
var randomNumber = Math.floor(Math.random() * max);
/* choose a video from the array using the 'randomeNumber' variable set above*/
/* and set it's value to 'randomVideo'*/
var randomVideo = video_array[randomNumber];
/* now turn on the visibility of our random video 'randomVideo' and tell it*/
/* to play*/
this[randomVideo]._visible = true;
this[randomVideo].play();
This method creates a very small .swf file (1kb) which then selects a random video from an array of external .flv’s and loads/plays only the randomly selected .flv. I added my own code to control the audio with a mute button, and also loop the .flv. Loading the tiny .swf file on the browser page happens fast, and the video starts almost instantly, unlike the javascript way.
In my opinion, this method is better for a couple reasons. First, it is all done with flash; meaning that this will work with any internet browser that can display flash content. Obviously there is the restriction of flash version, but there are no problems with different browsers, or browser versions. Problem one, solved. In this particular case, there is no javascript equivalent of video and audio, that I know of, that would be able to give the same result. Basically, by using flash here, I’m not losing any javascript replacement that could give a similar experience if the viewer does not have flash enabled. You either see the flash slideshow with audio, or you don’t.
The second reason this method is better is that I can use Faust to choose to display the flash slideshow or not. Problem two, solved. If you can’t see flash content, the page loads the static .jpg. If you can see flash content, the movie loads instead of the image. This solves the problem of the flickering image on the screen before the javascript could replace it with the loaded movie.
This way of doing the randomization is faster and a little more universal than the javascript way I was trying to do it before. All that to say…problem solved.
Going through this whole process made me think of something else. Is there a way to create multiple slideshows (each with different pictures and no audio) and then use actionscript to separately pick a random slideshow AND a random audio clip and play both in tandem. This would give me exponentially more possibilities of video and audio combinations without having to build them all manually. Hmm…
Share this Post
