2010-12-07 24 views
0

J'utilise JavaScript pour insérer des éléments vidéo dans le DOM mais cela ne fonctionne pas dans Opera (v10.63). L'élément est inséré mais la vidéo n'apparaît pas/joue. Fonctionne dans Firefox, Chrome et Safari. Je fais encore des tests pour voir si je peux le faire fonctionner mais je me demandais si quelqu'un d'autre avait rencontré ce problème.L'insertion dynamique de l'élément vidéo html5 ne fonctionne pas dans Opera

Sur une autre note qui pourrait être utile à d'autres, il semble que la délégation d'événements n'est possible qu'avec Firefox et non Opera, Chrome ou Safari. C'est basé sur des tests de code que j'ai fait, donc ça pourrait être faux mais je ne peux pas le faire fonctionner.

Un grand merci

+0

Bizarre, avez-vous un lien vers une démo? – hallvors

+0

Salut Hallvors, après de nombreux tests, j'ai compris que vous ne pouvez pas insérer dynamiquement l'élément vidéo car aucun des événements vidéo n'est déclenché, ce qui rend la plaque inutile. Mais ce que vous pouvez faire est de coder les éléments vidéo dans le code HTML, puis d'insérer dynamiquement les éléments source. – screenm0nkey

Répondre

0

Il est possible d'ajouter l'élément vidéo au DOM en utilisant JavaScript dans Opera 10.63. Le code ci-dessous, par exemple, devrait fonctionner (je l'ai testé dans Opera 10.61 et Opera 11).

var vid, makevid; 
makevid = function(e){ 
    vid = document.createElement('video'); 
    vid.src = 'path/to/an/oggtheorafile.ogv'; 
     vid.setAttribute('autoplay',true); 
    document.getElementsByTagName('body')[0].appendChild(vid); 
} 
window.addEventListener('load',makevid,false); 

Cependant, vous devez être sûr que vous utilisez un format vidéo compatible. Opera 10.63 prend en charge Ogg/Theora et WebM. Si vous utilisez MPEG4/H.264, la vidéo ne sera pas lue dans Opera.

(Edited pour corriger support du format vidéo dans Opera 10.6x Il ne supporte en effet WebM.)

EDIT 2: Notez que si vous utilisez JavaScript pour insérer un élément vidéo dans les DOM, vous devrez également activer les contrôles en utilisant vid.setAttribute('controls',true); ou en créant des contrôles personnalisés.

0

Vous pouvez essayer d'utiliser le HTML5 Inner Shiv. Je sais que c'est plus destiné à IE, mais ça vaut le coup.