Web

Du nouveau pour la balise vidéo sur iOs

CB
Avec iOS 10, la balise <video> s'enrichit de nouvelles fonctionnalitées.
Jusqu'il y a peu le lancement d'un fichier audio ou vidéo sur iOS nécessitait une action de l'utilisateur.
Impossible de démarrer automatiquement une musique, un bruitage ou une animation sans son autorisation.
Sur iPhone, impossible de visualiser un film sans qu'il passe automatiquement en plein écran, difficile donc de réaliser des applications Web incorporant des animations…
Cliquez ici pour lire l'article - Read more

Popcorn.js

PoppCorn
Popcorn.js est une librairie javascript dont le but est d'offrir de nombreuse fonctions multimédia au tag video HTML5.
Popcorn permet de piloter une vidéo au format HTML5 mais aussi de contrôler d'autres éléments sur la page HTML en relation avec le déroulement de votre vidéo.,
Par exemple vous pouvez ajouter des sous titres, rafraîchir un élément de votre page, afficher un slide show d'images synchronisé avec la lecture de votre film, etc....

Facile à mettre en oeuvre, de nombreux Plug-ins vous assisterons afin de rapidement mettre en oeuvre votre création.


Cliquez ici pour accéder au site - Click here to visit

The State Of HTML5 Video

chart_HTML5market
Le site de longtailvideo qui produit le lecteur JW Player 6 propose de nombreuses statistiques sur l'implémentation de la balise HTML5 <video>.

Au fil de votre lecture vous découvrirez des statistiques sur le pourcentage de navigateurs compatibles HTML5, quel type de format audio et vidéo ces derniers sont capables de lire et aussi, et surtout, quels attributs et APIS sont supportés par les différents navigateurs au jour d'aujourd'hui.


Cliquez ici pour accéder au site - Click here to visit

captionator.js

captionator
Une autre bibliothèque javascript pour ajouter des sous titres au tag video HTML5. Le grand avantage de cette bibliothèque c'est le support du format WebVTT, format utilisé par la balise <track> qui complète la balise <video>.
La démo permet de choisir son langage.
Actuellement WebVTT n'est pas supporté par les navigateurs de Smartphone, mais grâce à la bibliothèque captionator tout fonctionne parfaitement.

Cliquez pour voir un exemple de l'utilisation de WebVTT.

Cliquez ici pour accéder au site - Click here to visit

Cuepoint.js

cuepoint
Voilà une bibliothèque javascript qui permet d'ajouter des sous titres à une vidéo au format HTML5. Assez facile à mettre en œuvre cette solution qui s'appuie sur la bibliothèque jQuery vous permettra de travailler sur de cours projets, le script ne permet actuellement pas de switcher d'une langue à l'autre mais avec un peu d'astuce ce doit être réalisable.

Cliquez ici pour accéder au site - Click here to visit

Locus

Locus
Locus est un jeu-promenade réalisé par Francis Gorgé et Abdul Alafrez, originellement créé en 2000 pour présenter les multiples fonctionnalités de QuickTime.

Locus is a casual-game by Francis Gorgé & Abdul Alafrez.
Locus was originally created in 2000 to present QuickTime 7 functionality's.


Douze ans plus tard, l'idée de reprogrammer Locus en utilisant HTML5, javascript et CSS m'est venu naturellement pour explorer ces technologies.
Twelve years later, I recreate Locus with the help of Tumult Hype using HTML5, javascript and CSS.

Cliquez ici pour jouer à Locus - Click here to play


HTML5 Game engines

HTML5Games
La réalisation de jeux utilisant la norme HTML5 est en plein développement sur le WEB.
On commence à trouver de nombreuses bibliothèques javascript et même des environnements complets dédiées à la création de jeux compatibles avec la plupart des navigateurs modernes.
Si vous souhaitez vous lancer dans l'aventure, il va falloir maitriser l'élément canvas et trouver les bons outils.

Voici trois liens qui devraient vous aider dans votre quête :
Free HTML5 Game Engines
HTML5 Game Dev
Game Engines
HTML5 game engines

JW Player

LOngTail
La dernière version du lecteur vidéo JW Player propose une fonction fortement intéressante : Désormais le format HTML5 est reconnu et vous pouvez grâce à lui ne compresser vos vidéos qu'au format MP4.
Si la plate-forme supporte HTML 5 et MP4, le lecteur HTML 5 entre en jeu, si ce n'est pas le cas c'est le lecteur flash qui prend le relai. Plus besoin de compresser en OGV ou WebM.

Hype

Hype
Hype est Actuellement le meilleur logiciel pour créer des animations HTML5.
Une interface soignée, une TimeLine simple et précise, des options interactives, une gestion de scène agréable… bref un vrai bonheur.
Ce logiciel très facile à prendre en main peut créer bien davantage que des animations, la réalisation d'un petit site Web animé est très envisageable.

Cliquez ici pour accéder au site - Click here

Video for Everybody Generator

stacks_image_309
Camdesign met en ligne, un générateur de code HTML5 pour encapsuler vos vidéos sur votre site.
Vous entrez les url de vos fichiers, les dimensions, le titre et choisissez parmi les différentes options pour la création du code : HTML5, HTML5 + Flash, ou Flash. Vous avez aussi le choix du player flash parmi trois lecteurs : Flow Player, FlashFox et JW Player.

Il n'y plus qu'à copier le code généré et à l'intégrer dans vos pages Web.

Cliquez ici pour accéder au site - Click here

L'église Saint-Jacques en 3D relief anaglyphe

saintjacques
Si vous êtes un amateur de panorama ne manquez pas la dernière création d'Alain Hamblenne : L'église Saint-Jacques en 3D relief anaglyphe. Pour profiter pleinement de cette œuvre il faudra vous équiper de lunettes anaglyphe (rouge et cyan).
(n'hésitez pas à passer en mode plein-écran et à vous arrêter sur les détails)

Vous pouvez aussi allez admirer un panorama plus ancien utilisant la même technique: La gare des Guillemins à Liège et en apprendre davantage sur Alain et sur les techniques et outils utilisés pour la réalisation de ses panoramas.

HTML5 Video Player

stacks_image_82
Un nouveau logiciel convivial pour compresser et exporter vos vidéos et le code indispensable au format HTML5. Cet utilitaire compresse vos vidéos dans les trois formats compatibles HTML5 et propose un habillage élégant à votre lecteur WEB. Ce logiciel vous permet aussi de créer des carousels de vidéos permettant à l'utilisateur d'enchainer la lecture de plusieurs films.
Mais ce logiciel est à un prix prohibitif pour ce genre d'utilitaire : 39.95$

De plus comme le logiciel EasyHTML5 video, aucun réglage ne permet de jouer sur la qualité de la compression des vidéos.

Cliquez ici pour accéder au site - Read more

HTML5 Balise Vidéo

stacks_image_79
Une des grandes nouveautés de HTML5 est la balise video.
L'élément <video>, proche cousin de l'élément <audio> offre en HTML5 une solution simple, pour intégrer une vidéo dans une page web.

L'attribut src définit l'adresse du fichier vidéo, tout comme pour la balise img lorsqu'il s'agit d'une image. Il est préférable d'indiquer les dimensions avec les attributs height et width, et si tout va bien, la vidéo devrait s'afficher dans le navigateur... si celui-ci supporte le format de vidéo indiqué dans la source.

Cliquez ici pour lire l'article - Read more

EasyHTML5 video

stacks_image_306
Pour ceux qui ne veulent pas se compliquer la vie, ce logiciel disponible pour MAC et PC va encoder vos vidéos dans les formats compatibles HTML5 soit : mp4, WebM et OGG.
Il offre aussi une option Flash pour les navigateurs ne supportant pas le TAG html5 video. Le logiciel crée aussi une page html avec le code adéquat ..
il y a plus qu'a.

Cliquez ici pour accéder au site - Read more

Test du lecteur SublimeVideo

sublime
Le lecteur SublimeVideo compatible HTML 5 et mobile est en démonstration sur cette page.
SublimeVideo propose désormais un contrat permettant d'utiliser gratuitement son Player.

Le lecteur utilise le tag video HTML 5 et est compatible avec la plupart des navigateurs, si le tag html 5 video n'est pas reconnu par le navigateur le lecteur utilise alors un lecteur Flash.
Les deux lecteurs sont identiques visuellement et proposent les même fonctionnalités.

Cliquez ici pour lire l'article - Read more

The Wilderness DownTown

wilder
Une belle démonstration des capacités de HTML5 et tout particulièrement du nouvel élément canvas.
Entrer votre adresse (ou une de votre de choix) et valider : le site va alors créer un clip utilisant une vidéo préexistante et générer une animation à la volée en utilisant des images empruntées à Google map.
Impressionnant.

Cliquez ici pour accéder au site - Click here

Pageot 1.9.2

Pageot
minor bugs corrections

PAGEot is an application which generates EMBED and OBJECT code for the QuickTime Plug-in.
With a single click PAGEot allows you to add QuickTime movies (interactive videos, sounds, panoramas and objects...) to your HTML pages.

Cliquez ici pour télécharger Pageot