HTML5 & mpg4 sinon … Flash | Silverlight
Pour commencer je vous invite à voir ce premier exemple:
rien d’exceptionnel en soit mais l’on peu déjà constater que nous réglons nos problème de compatibilité HTML5 et que cet exemple n’utilise qu’une source vidéo au format mp4 et que ça fonctionne quelque soit le navigateur ou le device utilisé. Vous pouvez voir cette vidéo sur votre IPAD en mode natif (puisqu’il s’agit de HTML5 et du CODEC qui lui convient) mais aussi avec toutes le versions de firefox, opéra ou d’Internet Explorer (qui lui ne digère le HTML5 qu’à partir de sa V.9).
Et c’est là que cela devient intéressant, plus d’encodage multiple et une double solution de fallBack pour les vieux navigateurs (Flash ou SilverLight).
Si vous voulez essayer il va vous falloir
- récupérer mediaelements.js : ici >>
- le décompresser sur votre machine
- vous rendre dans le dossier où vous l’avez décompréssé
- copier le contenu du répertoire build et le coller dans un dossier créé à cet effet dans l’arborescence de votre site(js/libs/MediaElement par exemple)
puis, créer une nouvelle page html et ajouter les lignes suivantes :
1 2 3 | <script type="text/javascript" src="js/libs/MediaElement/jquery.js" /> <script type="text/javascript" src="js/libs/MediaElement/mediaelement-and-player.js"> <link href="js/libs/MediaElement/mediaelementplayer.min.css" rel="stylesheet" /> |
puis ajouter votre balise VIDEO ou vous le souhaitez
1 2 3 4 5 6 | <video id='player1' src="chemin_video/nomVideo.mp4" width='100%' height: "100%" style="width: 100%; height: 100%;max-width:100%;" </video> |
puis créez un fichier javascript script.js et collez y les lignes suivantes:
1 2 3 4 | $(document).ready(function() { var player = new MediaElementPlayer('#player1'); // player1 correspond ici à l'id de l'elementvideo }); |
enfin appelez votre script en bas de votre page HTML
1 | <script src="chemin_du_script_js/nom_du_script.js"></script> |
Bien normalement votre video se jouera très bien sur Ipad, firefox, chrome, opera … et même sur IE7 🙂