Creating The Perfect Web Document With Video Clip With Broad CrossBrowser Support
I have set up this one 13 minute video clip in two video formats for display in : webm and mp4
The HTML markup is for version 5 (validates, of course) and it looks like this:
It is supposed to be set up to cover a lot of browsers and potential plugins.
<video + attributes> <!-- plays in latest FF, IE9, Chrome, ? -->
<object> <!-- classid/codebase for VLC Media player plugin
<object> <!-- classid/codebase for Windows Media Player Plugin -->
<embed> <!-- markup for windows media player plugin -->
- The webm plays natively in FF and Chrome, in Win7/Vista, WinXP, and Ubuntu Linux (latter 2 with FF installed)
- The mp4 plays natively in IE9
- In IE8 running in Win7/Vista, two elements are displayed: the <object> and the <embed> for WinMedia Player
- In IE8 running in WinXP also shows two elements: an empty space with no plugin showing, and a WMP plugin but which does
Telling people NOT to use IE8 or IE9 is a turn-off for them. Life is simpler if they run the latest versions of FF or Chrome.
The alternative is to have the perfect script that runs after the page has loaded and can determine which elements are being displayed with plugin installed or not, and to remove too many displayed elements.
How do I particularly eliminate the multiple appearance of native or installed video player plugins in browsers like IE 8 and IE9?
To show you what a working document looks like, here is a link
This HTML document has the following structure:
Lines 39-392 (about 350 lines)
This initializing script does the following:
- loads PNG images which are snapshots of the video clip: these
will be show in sync with the video to point out the person in the video
- sets up HTML 5 event handlers so that the time position of the video
can be read and used for syncing the stills
- tries to set up the time sync event handlers for video playing plugins
like VLC media player and Windows Media Player when the browser's native
HTML 5 video player is not available because the browser is not
I tried to get the VLC player plugin event handler to work, but it is broken,
and the developer responsible for VLC player has not gotten back to me.
I have don't know Microsoft's Windows Media Player API for these events.
text. I had to write these functions using nonstandard object properties
because all IE versions (7-9) do not work with DOM functions predictably,
whereas FF and Chrome do.
This is location in the HTML body where the <video> element containing
markup is. The idea is for this part to show ONE video-playing
native or installed plugin, and ONLY ONE!
There must be a way to write script to detect when none or more than one native
or installed plugin player is showing, and remove it.
Try loading this document in Win XP and Win7
With IE, try browser mode 7, 8 and 9.
Try Chrome and FF (whatever you have)
This page is not supposed to tell the user what to do, but provide the
excellent experience for the user.
Useful stuff to everyone to create the perfect web document with video clip and for broad cross-browser support. It's one of the best post to read for to add an extra knowledge.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)