video on Safari 6 slows down whole page when my javascript form is inserted into the DOM

Question

I'm actually developing a simple web site for the company I'm working in. Every page has a central video, and every thing's fine on FireFox Opera Chrome and IE 9 BUT NOT with Safari 6.0.1 (Mac) neither with Safari 5.1.7 (PC) (it's OK with Mac Safari 5.1.2).

I've already tried to deactivate any other scripts, removed every video attributes, i even rewrote my scripts in a OOP way but ain't got any result at this point. The fact is, as soon as i try to remove the mp4 source, the whole page runs perfectly.

Test site is visible here : http://www.jsteitgen.com/tests/

I've read a few posts in forums, about a Safari bug when accessing YouTube player. That might be the same problem but couldn't find any confirmation yet.

I wonder if anyone has experienced the same thing / would know something i don't about Safari 6 specifications / or even better : would have a solution !

Hope my English will be clear enough to get answers.

Answer 1

Taking a look on the code on the site which looks similar to the one on "http://drupal.org/node/1536226":

<source src='vids/animLogo.mp4' type='video/mp4' /><!-- Safari /iOs Video -->
                        <source src='vids/animLogo.ogv' type='video/ogg' /><!-- FireFox / Opera / Chrome -->
                        <source src='vids/animLogo.wmv' type='video/x-ms-wmv' /><!-- WIndows Media Viedo -->

There are 3 different video files being served. Of course, webm and theora are not supported on the versions of safari that are mentioned in the question, (SOURCE: http://weblogs.mozillazine.org/asa/archives/2009/03/open_video_in_s.html, http://farukat.es/journal/2011/01/488-google-h264-and-video-web, http://farm6.static.flickr.com/5285/5349294818_e6e32d42db_o.png) which prevents the ogv file from being played in safari, without additional plugins from the user (SOURCE: http://www.broken-links.com/2010/09/01/playing-webm-in-safari-with-plugins/, http://blog.andikurnia.com/2010/11/29/playing-ogg-files-directly-from-safari/). With further inspection, the .mp4 file is 3 times larger then the video formats being delivered to firefox, opera and chrome. My suggestion is to optimize the .mp4 file to make the data being streamed alot less, since the embedded size (720x423) is smaller then the video's dimensions (1280x720), but that a matter of quality vs preformance of site.

Also, to answer your question, there is no youtube player, it mostly has something to do with video codecs and apple's implementation of it, safari does not have native support of Theora and thus, it resorts to the .mp4 verson unless codecs or plugins are avaliable to "decode" the file.

In short, the higher quality and slow video is being played. which needs to be compressed and optimized in order for the website to run a little more smoothly.