Results 1 to 2 of 2

Thread: Creating The Perfect Web Document With Video Clip With Broad CrossBrowser Support

  1. #1
    Join Date
    Jul 2010

    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:

    HTML Code:
    <video + attributes> <!-- plays in latest FF, IE9, Chrome, ? -->
       <source  src="path/to/webm">
       <source  src="path/to/mp4">
      <object> <!-- classid/codebase for VLC Media player plugin
       <object> <!-- classid/codebase for Windows Media Player Plugin -->
        <embed> <!-- markup for windows media player plugin -->
    It is supposed to be set up to cover a lot of browsers and potential plugins.

    1. The webm plays natively in FF and Chrome, in Win7/Vista, WinXP, and Ubuntu Linux (latter 2 with FF installed)
    2. The mp4 plays natively in IE9
    3. In IE8 running in Win7/Vista, two elements are displayed: the <object> and the <embed> for WinMedia Player
    4. 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)

    Much of the javascript special to the document

    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
      HTML 5-capable

    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.

    Other Javascript functions basically open a popup window to give explanatory
    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.

    Lines 474-502:

    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.

  2. #2
    Join Date
    Nov 2012


    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.12574 seconds
  • Memory Usage 2,857KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (2)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (2)postbit
  • (2)postbit_onlinestatus
  • (2)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates