<!-- Partie html -->

<input type="button" id="el" value="Flash activé"/><br />
<p id="flash" style="display:block;">
    <object width="620" height="465">
        <param name="movie" value="http://www.youtube.com/v/pP6epLQEI8I?version=3&feature=oembed">
        <param name="allowFullScreen" value="true">
        <param name="allowscriptaccess" value="always">
        <embed src="http://www.youtube.com/v/pP6epLQEI8I?version=3&feature=oembed" type="application/x-shockwave-flash" width="620" height="465" allowscriptaccess="always" allowfullscreen="true">
    </object>
</p>
<p id="html5" style="display:none;">
    <video width="620" height="465" controls="controls">
        <source src="video.mp4" type="video/mp4" />
        <!--<source src="video.webm" type="video/webm" />
        <source src="video.ogv" type="video/ogg" /> -->
            Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
    </video>
</p>
<!-- Il vaudrait mieux ajouter ça dans un .htaccess si ce n'est pas fait:
    AddType video/ogg  .ogv
    AddType video/mp4  .mp4
    AddType video/webm .webm
-->
<script type="text/javascript">

    var el = document.getElementById('el');
    var el_flash = document.getElementById('flash');
    var el_html5 = document.getElementById('html5');

    //on crée la fonction
    var fonction = function() {
        if(el_flash.style.display = 'block') //si flash est affiché
        {
            el_flash.style.display = 'none'; //on le fait disparaître et on affiche html5
            el_html5.style.display = 'block';
            el.value = 'html5 activé';
        }
        else if(el_flash.style.display = 'none'); //si flash n'est pas affiché
        {
            el_flash.style.display = 'block'; //on l'affiche et on fait disparaître html5
            el_html5.style.display = 'none';
            el.value = 'Flash activé';
        }
    };
     //on crée l'évenement
    el.addEventListener('click', fonction, false);
</script>