HTML5, Player – Demo HTML5 à l’aide du player 3WDOC
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)
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
Les paramètres vidéo du format .mp4
Les paramètres audio du format .mp4
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
2. Définir les options de transcodage
3. Choisir l’entrée, la source vidéo
4. Définir les paramètres du transcode
5. Définir le mode d’encapsulation
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
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 :
- jQuery: The Write Less, Do More, JavaScript Library
http://jquery.com/ - jQuery UI
http://jqueryui.com/ - Modernizr JavaScript library
http://modernizr.com/ - Le plugin jQuery Cookie
http://plugins.jquery.com/
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
- HTML5 (including next generation additions still in development) Draft Standard
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html - Video on the Web – Dive Into HTML5
http://diveintohtml5.org/video.html - HTML5 Video with JavaScripted synchronised captions: demo (une video plutôt amusante au demeurant)
http://people.opera.com/brucel/demo/video/multilingual-synergy.html