javascript activer - Élément vidéo disparaît dans Chrome lorsque vous n'utilisez pas les contrôles





android google (4)


Eh bien, je peux aussi bien répondre à ma propre question au cas où quelqu'un en aurait besoin à l'avenir.

C'est un bug, ça marche très bien dans Chrome 19.

Ma solution de contournement dans ce cas était de vérifier s'il y avait un attribut de contrôle, sinon l'ajouter, lire la vidéo puis supprimer l'attribut de contrôle.

Découvrez-le: http://jsfiddle.net/trolleymusic/vhgss/

playVideo = function(el) {
    if (!el) { return; }
    if (el.getAttribute('controls') !== 'true') {
        el.setAttribute('controls', 'true');                    
    }
    el.paused ? el.play() : el.pause();
    el.removeAttribute('controls');
}

Donc - Je pense que c'est un bug de navigateur. Il est apparu dans un design / site beaucoup plus compliqué, mais j'ai eu une bonne réputation, simplifié mon code et mes designs, et j'ai trouvé ce qui suit:

Lors de l'intégration de <video> sans attribut de contrôle dans Chrome, le déclenchement de la lecture de la vidéo à l'aide de javascript entraîne l'effacement de l'élément vidéo.

http://jsfiddle.net/trolleymusic/2fHTv/

Le vide est un peu aléatoire, parfois en roulant hors de l'élément, il va réapparaître. Parfois, vous devez cliquer sur / mettre l'accent sur autre chose, la plupart du temps la pause de la vidéo le fera réapparaître.

J'ai aussi mis une ligne (commentée) pour montrer que ce n'est pas seulement basé sur le clic, il se produit quand play() est aussi appelé via setTimeout .

De toute façon, jouez et dites-moi ce que vous en pensez.

Merci!

Wayne

(Ooo - et l'autre vidéo est là pour montrer que l'autre élément qui est identique à l'attribut controls fonctionne bien




J'ai signalé ce bug au projet Chromium. En attendant, comme une solution de contournement (toujours présente dans Chrome 30), j'ai ajouté des contrôles à tous les éléments vidéo de la page, mais j'ai appliqué une classe appelée animation à ceux qui seront déclenchés indirectement par des événements sur la page. que directement par l'utilisateur.

<video class="animation" preload controls>

J'ai ensuite supprimé les contrôles de .animations utilisant jQuery:

$( document ).ready(function() {
  $('video.animation').removeAttr('controls');
});

Cela résout le problème pendant que nous attendons un correctif pour la régression .




Cela semble être un bug. J'ai travaillé autour de ceci en chatouillant manuellement la méthode de jeu dans $ (document) .ready pour toutes mes vidéos au lieu d'ajouter la balise autoplay:

('#videoId').get(0).play()



Vous pouvez simplement utiliser cette extension chrome Allow-Control-Allow-Origin

il suffit de cliquer sur l'icône de l'extensnion pour activer ou désactiver le partage de ressources croisées comme vous le souhaitez







javascript html5 google-chrome video webm