iGlauser » video http://iglauser.com Enhancing the Web Wed, 09 Jun 2010 09:53:08 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 HTML5 Video Instead of Flash Splash Screenhttp://iglauser.com/2010/05/html5-video-instead-of-flash-splash-screen/ http://iglauser.com/2010/05/html5-video-instead-of-flash-splash-screen/#comments Tue, 18 May 2010 21:11:58 +0000 Ivan http://iglauser.com/?p=476 I had a client that absolutely wanted a Flash splash screen on his site. What I normally do is try to explain all the drawbacks of such a solution and try to convince them not to use a Flash splash screen and instead put a movie in the content of the first page so that the visitor still easily can see and navigate to other parts of the site without having to get irritated on an annoying Flash movie. If you do not know what I mean when I refer to annoying splash screen movie you can just search the web for the words Flash and splash screen and you will find many articles on the subject.

As I sat down and analyzed the problem I played with the thought of creating a HTML5 based splash screen without having to use Flash. I wanted the movie to automatically play in full screen. I also wanted the user to easily continue on to the main page by clicking anywhere inside the browser presentation area. Since I am a big fan of Wordpress I also wanted to see if there was an easy way to implement this solution on a Wordpress site.

I started of searching the web for HTML5 video solutions with Flash fallbacks and found this site. I followed the example there and tested it out in different browsers on Windows. It showed that all but IE8 and Safari worked fine. Safari (v. 4.0.5) played the movie extremely slow for some reason and IE8 showed the Flash movie instead since it do not support HTML5 video tags.

I experimented a little and combined the splashscreen plugin for Wordpress, some HTML5 from the video for everybody example and some Javascript for detecting if the browser support HTML5.


<body bgcolor="#000000">

<a onclick="setsplash()" href="">

<video width="100%" height="100%" autobuffer autoplay loop style="position: absolute; top: 0px; left: 0px;">

<source src="/media/myvideo.mp4" type="video/mp4"></source>
<source src="/media/myvideo.ogg" type="video/ogg"></source>

 <script type="text/javascript">
 function supports_video() {
 return !!document.createElement('video').canPlayType;
 }
 </script>

 <script type="text/javascript">
 if (!supports_video()) { setsplash(); window.location.reload(); }
 </script>

</video>

</a>

</body>

The video tag has its width and height set to 100% to fill the browser screen. The in-line style is not what I recommend but added there just for laziness and to reduce the code in this post. It should be put in a CSS style sheet.

Note that this solution is not something that I recommend since I generally is against splash screens.

]]> http://iglauser.com/2010/05/html5-video-instead-of-flash-splash-screen/feed/ 2