background preloader

Audio/Video players : html5 JS

Facebook Twitter

Accessible HTML5 Video with JavaScripted captions - Opera Developer Community. By Bruce Lawson NOTE, September 22nd 2011: There is a new and shiny way to add subtitles to HTML5 video using the new <track> element, but this isn't yet implemented. The hacky technique discussed below works now, but it isn't the "right" way to do it. Accessibility of video It’s great that HTML5 allows us to embed video into web pages that can then be displayed directly by browsers, without having to rely on third-party plugins. (For more information on the true power of HTML5 video, see Introduction to HTML5 video.) The elephant in the corner regarding all video — whether it be HTML5 or proprietary — is accessibility. What are conscientious developers to do to provide textual alternatives for those who can’t access the contents of the video? <video> Your browser doesn't support the open Ogg Theora codec. However, the spec says: …this content is not intended to address accessibility concerns.

This proof-of-concept doesn't work in Safari. Var nodes = document.querySelectorAll(' Read more. HTML5 <audio> and <video> HTML5 video player. Flowplayer - Flash Video Player for the Web. HTML5 Video Player | VideoJS. HTML5 video player in CSS with Silverlight and Flash : MediaElement.js.

Kaltura: Open Source Video Platform. JW Player for HTML5. 5 Tools For Integrating HTML5 Video in Your Website. This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. No matter where you sit in the HTML5/Flash debate, the fact is, more and more mobile or low-powered devices are being shipped either without or with very minimal support for Flash video. Web developers who design sites that utilize video need to be cognizant of this reality and design and build their sites accordingly. While it's great that video hosting services like Vimeo and YouTube support HTML5 and that solutions for larger sites are available from places like Encoding.com and Brightcove, that still leaves users who want to host their own video content — but don't necessarily use a platform like Brightcove — in a bit of a predicament.

Here are a few of the solutions currently available that we particularly like: 1. LongTail Video recently released a beta release for the JW Player for HTML5. 2. 3. 4. 5. BONUS: Sublime Video (Coming Soon) Your Picks. [Webdesign] « éteignez la lumière » avec jQuery pour lire vos vidéos. Depuis plusieurs années maintenant, les fonctionnalités de « ligthbox » se sont multipliées sur le web. Les plus grands sites ont également adoptés ce genre de méthodes pour améliorer le « focus » des visiteurs. Le plus connu est sans doute Youtube et la fonctionnalités « Turn down the lights » : J’en avais déjà parlé lorsque j’avais présenté le plugin « facebox ». Peu de temps après avoir implémenté cette fonctionnalité sur mon blog, j’avais rapidement publié une méthode pour assombrir le fond de la page. Bref, tout ça pour dire que j’ai trouvé un petit plugin jQuery bien sympathique qui fait la même chose. « Turn off the lights » est un plugin pour jQuery qui permet d’assombrir le fond d’une page web afin d’augmenter la concentration de vos visiteurs sur certains éléments d’un article.

La technique consiste en l’ajout d’un élément cliquable qui, une fois actionné, ajoute un DIV de la dimension de la page dont le fond est sombre et semi-transparent. Le z-index est ici déterminant. Hey!Spread - Video Distributing Web Service.