Texte dynamique en HTML5 Vidéo

Question

Je souhaite ajouter du texte de manière dynamique à la vidéo HTML5. Actuellement, ceci est réalisé avec Flash et en passant des variables que Flash attend à certains intervalles de temps. Quel serait l'équivalent (le cas échéant) en HTML5? Quelqu'un a-t-il des exemples?

Answer 1

Vous pouvez essayer quelque chose comme ça ...

http://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/

Answer 2

Vous pouvez rendre les images à une toile, puis ajoutez le texte à partir de là. Voici un exemple http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/

http://www.craftymind.com/factory/html5video/CanvasVideo.html

http://www.craftymind.com/factory/html5video/CanvasVideo3D.html

Answer 3

Voici une autre approche: http://blog.app-solut.com/2011/03/display-additional-overlay-elements-on-top-of-an-html5-video-element-with-javascript/

Answer 4

L'équivalent pour ce serait la piste de texte api ou l'élément de piste. Ce qui vous donne plusieurs choses. Un événement cuechange pour le script (kind = metadata), en utilisant la piste de texte api pour rendre directement les sous-titres dans la vidéo (genre = sous-titres).

Comme expliqué ci-dessus, HTML5 vous donne un DOMScripting et une API de balisage pour y parvenir. Actuellement, seul Safari supporte cela. Vous pouvez trouver un example using a polyfill here.