Vidéo HTML5 à jouer après l'AJAX chargement de la page

J'ai du mal à obtenir une vidéo HTML5 pour jouer quand vous arrivez à la page via une requête AJAX.

Si vous actualisez la page, ou directement sur la page, il fonctionne très bien. Mais lors de la navigation à la page via AJAX il ne joue pas.

Le code est:

<video id="video" autoplay="autoplay" loop="loop" muted="muted" poster="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.jpg">
                   <source src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.mp4" type="video/mp4">
                   <source src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.webmhd.webm" type="video/webm">
                   <img src="http://localhost/wp-content/themes/studioindigo/videos/contactbackground.jpg" alt="your browser does not support html5 video">
               </video>

J'ai essayé de tir le code suivant sur le succès de l'AJAX chargement de la page:

video = document.getElementById('video');
    video.load();

    video.addEventListener('loadeddata', function() {
        video.play();
    }, false);

Et aussi, tout simplement:

video = document.getElementById('video');
video.play();

J'ai aussi essayé d'utiliser des plugins tels que video.js, mais en vain.

Je ne peux pas aider mais je pense que je suis absent quelque chose de vraiment simple. Sûrement, si la vidéo est sur la page et a la lecture automatique ensemble, puis il devrait jouer, indépendamment de savoir si vous arrivez à la page via AJAX ou directement?

La requête AJAX uniquement pour la page des mises à jour de la #élément principal (la vidéo est à l'intérieur) et de l'histoire.pushState - peut-être quelque chose à faire avec elle? Il ne semble pas probable...

Vos balises vidéo n'a pas d'id, vous avez étrange '; ?> dans votre balisage
Merci de voir ma propre solution à ce ci-dessous dans le cas où vous rencontrez le même problème.

OriginalL'auteur Paul Thomas | 2014-03-04

7

Pour quiconque est aux prises avec le même problème, j'ai constaté qu'à la suite de l'appel ajax la vidéo a la propriété 'de pause: true' même de la pensée de lecture automatique est réglé et que j'étais l'appel vidéo.play() sur "loadeddata se'.

La solution était de déclencher la vidéo.play() lors de la pause est détecté. J'ai aussi trouvé qu'il a travaillé plus lisse de ne pas avoir la "autoplay", l'attribut de la vidéo et devint saccadée après plusieurs initialisations.

DOM:
```
<video id="video" loop muted>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>
```
JS:
```
video = jQuery('#video').get()[0];

video.addEventListener('loadeddata', function() {
    video.play();
});

video.addEventListener('pause', function() {
    video.play();
});
```
Aussi, pour ceux qui se demandent pourquoi je pourrait vouloir cette capacité, c'est pour la lecture d'une vidéo sur l'arrière-plan d'une page web, donc aucun besoin de l'utilisateur pour lire/mettre en pause.

Je ne pense pas que c'est une bonne idée pour vos utilisateurs que vous écoutez de la pause de l'événement et de la remplacer par play.... le seul moyen pour l'utilisateur d'arrêter la vidéo est alors de quitter votre site web.

OriginalL'auteur Paul Thomas
0

Votre vidéo tag n'a pas d'ID. Que faire si vous aviez deux <video> tags? Vous souhaitez:

<video id="blah"...

et puis:

video = document.getElementById('blah');

Désolé, c'est à partir d'une ancienne version. Il a eu l'ID quand j'ai été le tester. J'ai mis à jour le code ci-dessus maintenant.

OriginalL'auteur waterlovinguy
0

Potentiellement c'est une erreur de syntaxe, parce que vous semblez avoir du PHP qui s'infiltre dans le code HTML dans le formulaire de '; ?> à la fin de la poster et src attributs.

Désolé... c'est mon mal de nouveau. J'ai copié à partir du fichier php. J'ai maintenant mis à jour le code qui est sortie dans les DOM. Je suis assez confiant, tout le balisage est à droite, alors qu'elle joue lors du chargement de la page. Tout simplement pas lors de la navigation via AJAX.

OriginalL'auteur Houdmont

Vous devez vous connecter pour publier un commentaire.