HTML5, Player – Demo HTML5 à l’aide du player 3WDOC


HTML5, Demo - Démonstrations HTML5

3WDOC vient de publier un article qui vante les mérites de l’HTML5, on se devait donc de produire quelques démonstrations qui attestent de la véracité de nos dires sur le potentiel de l’HTML5 comme concurrent viable à Flash et technologie alternative pour la création de webdocumentaire.

C’est aujourd’hui chose faite !


Cette demo n’est actuellement plus disponible. Nous vous invitons à découvrir les autres démos disponibles via la page DEMOS de ce blog.

http://blog.3wdoc.com/fr/demos/

On vous offre une démonstration d’interaction et de narration, sans prétention, qui donne un aperçu des capacités de l’HTML5. C’est une réalisation “fait maison” grâce aux bons soins de Jean Grandclément Chaffy et à la ténacité de notre équipe de développement. On vous laisse découvrir notre player en faisant notre le lyrisme d’un Dailymotion qui sans coup férir annonce son player HTML5 avec le slogan Bienvenue dans le futur !

Le fonctionnement du player 3WDOC

Le player 3WDOC fonctionne sur les plates-formes suivantes MAC et PC. Voici, dans le détail, les combinaisons de plates-formes et de navigateurs sur lequelles le player 3WDOC a été testé.

Pour Mac

Le 3WDOC player fonctionne sous les navigateurs suivants :

  • Safari Version 5.0.2
  • Firefox 3.5 +
  • Opera 10.6 +
  • Chrome depuis la première version…

Pour PC

Une détection se fera automatiquement afin que votre navigateur Internet Explorer télécharge et installe le Google Chrome Frame (aka, GCF). En effet, ce framework est nécessaire pour que Internet Explorer puisse interpréter du HTML5, en attendant la version 9 de Internet Explorer !

Cette installation du Google Chrome Frame (aka, GCF) est assez similaire à une installation du plugin Flash !
Source : http://www.chromium.org/chromium-projects

Le 3WDOC player fonctionne sous les navigateurs suivants :

  • Internet Explorer + Google Chrome Frame (GCF) de la version 6 à 8
  • Firefox 3.5 +
  • Opera 10.5 +
  • Chrome depuis la première version…

Installer sous IE, le Google Chrome Frame (GCF)
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

Encoder les vidéos pour le player 3WDOC

Toutes les vidéos disponibles dans la démonstration ont été faites sur MAC.
Les vidéos au format .ogg ont été faites à l’aide VLC Version 1.1.3
Les vidéos au format .mp4 ont été faites à l’aide QuickTime 7 Pro

Si vous êtes sous Mac OS X Snow Leopard, QuickTime 7 est déjà installé. Il vous suffira de l’ouvrir et d’activer la licence qu’il faudra avoir acheter préalablement sur apple 30,00 €. Le player QuickTime 7 se trouve Applications/Utilities/.
Source : QuickTime 7 Pro – http://www.apple.com/fr/quicktime/download/

L’encodage en .MP4

Voilà la séquence pour encoder un fichier quicktime en MP4.

Pour assurer la meilleure qualité possible de votre vidéo avant un encodage en .mp4, ll vaut mieux désentrelacer votre source vidéo
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

Exporter au format .mp4
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

Les paramètres vidéo du format .mp4
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

Les paramètres audio du format .mp4
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

L’encodage en .OGG

Voilà la séquence pour encoder un fichier quicktime en OGG. Pour se faire on utilise la toute dernière version de VLC.

1. Choisir l’assistant de diffusion et de transcodage
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

2. Définir les options de transcodage
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

3. Choisir l’entrée, la source vidéo
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

4. Définir les paramètres du transcode
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

5. Définir le mode d’encapsulation
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

6. Le résumé
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

Au terme de ces 6 opérations, vous obtenez un fichier .ogg de votre vidéo.

Accéder à la barre de transport du player 3WDOC

Pour activer ou non la barre de transport, si vous le souhiatez, vous pouvez à l’aide de FireBug sous Firefox, mettre style="display: block;" pour voir apparaitre temporairement la barre de transport qui vous donne tous les boutons, le timecode….etc

<div class="he3Player_toolbar" style="display: block;">...</div>

La barre de transport du 3WDOC player
HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

HTML5, Player – Demo HTML5 à l’aide du player 3WDOC

La documentation pour utiliser la player 3WDOC

Voici, pour les plus courageux, l’intégrale de ma documentation pour personnaliser le player 3WDOC des paramètres d’affichage et des options d’initialisation et des options d’effets.

EFFECTS

        Blind
        direction: horizontal,vertical (string)
 
        Bounce
        direction: up,down,left,right (string)
 
        Clip
        direction: horizontal,vertical (string)
 
        Drop
        direction: up,down,left,right (string)
 
        Explode
        pieces: 9 (int)
 
        Fold
        horizFirst: true,false (bool)
        size: 15 (int)
 
        Highlight
        color: #ffff99 (hex)
 
        Puff
        percent: 150 (int)
 
        Pulsate
        times: 5 (int)
 
        Shake
        direction: up,down,left,right (string)
        distance: 20 (int)
        times: 3 (int)
 
        Slide
        direction: up,down,left,right
 
        Fade

ATTRIBUTES

note: the effect options are strings in json notation without curly-braces, don’t forget to single quote keys/values, if multiple keys/values pairs separate by coma.

        <node (video,audio,article,img,button)
            // show attributes
            tcStart="" (float) # timecode start
            tcStartTop="" (int) # relative to section start top position in px
            tcStartLeft="" (int) # relative to section start left position in px
            tcStartWidth="" (int) # start width in px
            tcStartHeight="" (int) # start height in px
            tcStartZindex="" (int) # start z-index
            tcStartEffect="" (string) # start fx
            tcStartEffectDuration="" (int) # start fx duration
            tcStartEffectOptions="" (string) # start fx options
            // hide attributes
            tcStop="" (float) # timecode stop
            tcStopEffect="" (string) # stop fx
            tcStopEffectDuration="" (int) # stop fx duration
            tcStopEffectOptions="" (string) # stop fx options
        >
            node content
        </node>
 
        <node (audio,video)
            // source attribute
            tcSrc = "" (string) # url to the multimedia source file without extension (ext will be elected to ogg for FF and mp4 for others)
        >
            !!! no node content, will be dynamically injected when needed !!!
        </node>
 
        <node (button)
            tcLink="http://www.hecube.net" (URLstring) # action button to link to URL
            tcGoto="" (float) # action button to jump to specified timecode in the sequence
            tcOverlay="" (string) # action button to trigger an overlayed group
            class="[ui]rwd" (string) # action button stepping rewind (see he3PlayerSeekStep)
            class="[ui]play" (string) # action button trigger play
            class="pause" (string) # action button trigger pause
            class="[ui]stop" (string) # action button trigger stop
            class="[ui]fwd" (string) # action button stepping forward (see he3PlayerSeekStep)
            class="[ui]mute" (string) # action button trigger mute (see he3PlayerMute)
            class="[ui]sndMinus" (string) # action button trigger stepping volume (see he3PlayerVolumeStep)
            class="[ui]sndPlus" (string) # action button trigger stepping volume (see he3PlayerVolumeStep)
            class="[ui]fullScreen" (string) # action button trigger player size
            class="ctime" (string) # passive button display current timecode
        >
            node content
        </node
 
        <node (article,img)
            tcOverlayed="" (string) # defines an overlayed group to be trigger by an overlay button
        >
            node content
        </node>

INIT OPTIONS

note: [c] cookie mode capabilities

INITIALISATION

        he3PlayerWidth:                         1024, (int) # the main container section width
        he3PlayerHeight:                         768, (int) # the main container section height
        he3PlayerNativeWindow:                     true, (bool) [c] # init in native window size (he3PlayerWidth,he3PlayerHeight) or resize window size (see he3PlayerRatioWindow,he3PlayerReferenceWindow)
        he3PlayerRatioWindow:                     0.5, (float) # defines the resize ration, if set to 0 follow full browser window size
        he3PlayerReferenceWindow:                 "width", width|height (string) # choice of the dimension we refer to for full browser window size following
        he3PlayerAutoplay:                         false, (bool) [c] # init in autoplay, can be bypassed by runtime transport status in cookie mode [c]
        he3PlayerMute:                             false, (bool) [c] # init in mute
        he3PlayerSeekStep:                         3, (float) # seekink stepping configuration
        he3PlayerVolumeDefault:                 0.5, (float) [c] # default init volume value, from 0 to 1
        he3PlayerCookieName:                     "mywebdoc", (string) # will name the session cookie (experimental) that stores runtime properties between pages, it should represent a webdoc name
        he3PlayerCookieRecall:                     "transport,nativeWindow,volume,mute", (string) # will (de)activate data recal at init from the session cookie (experimental), bypassing some of the init options [c]
        he3PlayerFirebug:                         true (bool) # enables Firebug debugging messages (FF only!)

Ce développement du Player 3WDOC a été rendu possible grâce aux ressources suivantes :

5e Arrondissement de Paris, 75005 Paris, France

[geo_mashup_map height=”235″ width=”600″ map_type=”G_HYBRID_MAP” zoom=”15″ add_overview_control=”true” add_map_type_control=”true”]

Pour aller plus loin