close

VOTRE ACCES CLIENT PRIVÉ
  • Vos Commandes en ligne
  • Vos Factures en ligne
  • Vos Paiements en ligne

Client Access

Demo Reel 2009

Equipement

pmw-ex1

Informations

Ville: San Francisco, CA

Camera HD: Sony PMW-EX1

Portable(US): (001)-617-318-8221

email

Nous avons 5 invités en ligne

 

HTML5 et tag <video> Envoyer
Lundi, 15 Juin 2009 12:34


Pour intégrer de la vidéo à une page web avant le HTML5 il fallait faire appel à un lecteur flash externe (player.swf dans le code d'exemple ci-dessous) et un fichier javascript attaché (swfobject.js). Le code ressemblait à ceci:



<script type='text/javascript' src='/embed/swfobject.js'></script>
<div id='mediaspace'>This div will be replaced</div>

<script type='text/javascript'>
var s1 = new SWFObject('/jw/embed/player.swf','ply','470','320','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('wmode','opaque');
s1.addParam('flashvars','file=/videos/flvplayer.flv');
s1.write('mediaspace');
</script>

En utilisant le tag <video> en  HTML5, plus besoin de tierce partie. Voici un exemple de code en HTML5:

<video src="/video/your_file.ogg"> </video> 
 
Il sera desormais aussi facile d'intégrer de la vidéo a sa page que d'insérer une image.  C'est le navigateur qui portera le lecteur (par defaut), plus besoin de plugins Quicktime ou Flash. Le code se voit nettoyé et plus léger.
 

Safari (version 3.1) et Firefox 3.1b2 sont déjà compatibles avec le tag <video>. Opera vient de sortir une version expérimentale de son navigateur, aussi compatible.

Safari lit le MPEG4 (et pour ce qui concerne les Mac, tout ce que peut lire QuickTime). Firefox n'est pour le moment compatible qu'avec Ogg Theora.

Le manque d'un codec universel se vera solutionné par un code qui inclue les deux formats dans le meme tag <video>, comme ceci:

<video controls>
<source src="/video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari -->
<source src="/video.ogm" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->
</video>

Les attributs suivants sont disponibles:

 
  • src:     Adresse de la video
  • poster: Adresse de l'image de remplacement si la vidéo n'est pas disponible
  • autobuffer: auto chargement
  • autoplay: lancement automatique de la vidéo
  • loop: La vidéo est jouée en boucle
  • controls: Affichage de la barre de controle
  • width: Longueur de la fenetre vidéo
  • height: Largeur de la fenetre vidéo
 
 
Pour apprécier une démonstration de contenu dynamique en HTML5 utilisant les tags </canvas> et <video> :  Rendez vous ici en utilisant  Firefox 3.5 ou regardez la vidéo ci-dessous:
 
 
 
Comment Paul Rouget a-t-il conçu cette page ? Voici son explication:
 
Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a <canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element (position: absolute;) on the top of the main <canvas/> element.A canvas element provides a method named drawImage which let you inject the content of a DOM element in the canvas (like a screenshot). It works with three kinds of elements: <img/>, <canvas/> and <video/>.When you click on the <svg/> button, the Javascript code launches the main video. Then, the main javascript loop is executed each 10 milliseconds. Here are key things that occur during the main loop:
  • first, the content of the video is injected in the main canvas. That’s why
    the canvas element looks like a video element;
  • second, the position of the 2 brighter areas of the canvas are computed
    (you have access to all pixels values);
  • third, the required transformation is computed (rotation, scale,
    translation);
  • fourth, the content of the selected pattern is injected in the main canvas
    following the transformation.
A little drawing:
 
 

 

What's cool with this demo?

  1. It's built with native Open Web technologies: JavaScript + DOM, CSS and HTML 5 (canvas and video) that hundreds of thousand people are already familiar with.
  2. It's Open Source by default. You can view the source and learn from it. This is one of the very reasons why the Web is so wonderful: it's the mother of all generative technologies.
  3. It's just the beginning (at least we hope it is) of very cool innovations around videos and special effects. When will we see a Web-based video-editing application? Who knows what we'll collectively be able to build?
 
 
 
Intéressant non ???? !!!!    ;-)
 
 
Commentaires (0)
Ecrire un commentaire
Vos détails de compte:
Commentaire:
Sécurité
Saisissez le code que vous voyez.