HTML per supporto video completamente cross browser

Fra le mille risorse disponibili on line, ecco una porzione di codice HTML in grado di render disponibilie un video in modalità realmente cross-browser!

Riassumendo molto brevemente, il primo step prevede la riproduzione secondo le codifiche html5, le migliori in assoluto ma non ancora sufficientemente compatibili.

Se il browser dell'utente non supporta l'html5, il codice imposta l'embed di flash. Se flash non è presente viene provato QuickTime, altrimenti Windows Media Player se il browser è Internet Explore 7 o superiori. Se nulla di tutto ciò dovesse funzionare viene inserito un segnaposto per il download del video!

Questo è il link al sito dove potrete trovare tutta la documentazione e ulteriori spiegazioni https://camendesign.com/code/video_for_everybody

Ed ecco il codice:

<!-- first try native HTML5 video playback -->
    <video width="640" height="360" controls="controls" autoplay="true">
    <source src="__MY_VIDEO__.ogv" type="video/ogg" />
    <source src="__MY_VIDEO__.mp4" type="video/mp4" />
    <!-- fall back to Flash *do not* include 'classid' so as to be compatible with non-IE browsers -->
    <object width="640" height="380" type="application/x-shockwave-flash" data="__FLASH_PLAYER__.swf"
    flashvars="autostart=true&amp;file=https://tinyvid.tv/vfe/video_for_everybody.mp4"
    > <!-- IE compatibility for the above -->
    <param name="movie" value="__FLASH_PLAYER__.swf" />
    <param name="flashvars" value="autostart=true&amp;file=__MY_VIDEO__.mp4" />
    <!-- no Flash? fall back to a QuickTime object iPhone OSv2 will use this file. ensure your MP4 is compatible: <tinyurl.com/qmmss6> IE6 does not allow object-within-object, Flash is the only option. this object tag (with classid) is hidden from non-IE browsers, as it causes a plugin-install prompt to occur even if the plugin is not needed because itâ��s been superseded by HTML5 video -->
    <!--[if gt IE 6]>
    <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
    <param name="src" value="__MY_VIDEO__.mp4" />
    <param name="autoplay" value="true" /><!
    [endif]--><!-- the odd line-break above is *required* or QuickTime fallback fails -->
    <!--[if gt IE 6]><!-->
    <!-- that self-closing comment after the conditional tag is the only way to reveal the conditional comment to other browsers that is compatible with serving as XHTML (application/xhtml+xml). a normal closing comment marker would be visible in IE7, and other workarounds cause an XML parser error (comment-in-comment) -->
    <!-- QuickTime height is height+15 to leave room for the controls -->
    <object width="640" height="375" autoplay="true"
    type="video/quicktime" data="__MY_VIDEO__.mp4"
    > <!-- params for Safari/Chrome compatibility (they ignore the attributes above) -->
    <param name="src" value="__MY_VIDEO__.mp4" />
    <param name="autoplay" value="true" />
    <!--<![endif]-->
    <!-- finally, if all else fails, fall back to a warning message: *always* tell the user *what* it is they can't seeâ��give a title or description -->
    <hr />
    <h3>Video: __TITLE_OF_MY_VIDEO__</h3>
    <p>
    <strong>No video playback capabilities detected.</strong>
    Why not try to download the file instead?<br />
    <a href="__MY_VIDEO__.mp4">MPEG4 / H.264 .mp4
    (Windows / Mac)</a> |
    <a href="__MY_VIDEO__.ogv">Ogg Theora &amp; Vorbis .ogv
    (Linux)</a>
    </p>
    <!-- and try to give them genuinely helpful information to rectify the problem -->
    <p>
    To play the video here in the webpage, please do one of the following:
    </p><ul>
    <li>Upgrade to <a href="https://getfirefox.com">Firefox</a>,
    or <a href="https://apple.com/safari">Safari</a></li>
    <li>Install <a href="https://get.adobe.com/flashplayer/">Adobe Flash Player</a></li>
    <li>Install <a href="https://apple.com/quicktime/download/">Apple QuickTime</a></li>
    </ul>
    <hr />
    <!--[if gt IE 6]><!--></object><!--<![endif]-->
    <!--[if gt IE 6]></object><![endif]-->
    </object>
    </video>