Vidéo HTML5 à lire après le chargement de la page AJAX

J’ai du mal à faire jouer une vidéo HTML5 lorsque j’arrive sur la page via une requête AJAX.

Si vous actualisez la page ou atterrissez directement sur la page, cela fonctionne correctement. Mais lorsque vous accédez à la page via AJAX, celle-ci ne sera pas lue.

Le code est:

J’ai essayé d’utiliser le code suivant en cas de succès du chargement de page AJAX:

 video = document.getElementById('video'); video.load(); video.addEventListener('loadeddata', function() { video.play(); }, false);

Et aussi 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 m’empêcher de penser qu’il me manque quelque chose de très simple. Si la vidéo est sur la page et que la lecture automatique est définie, elle devrait simplement être lue, que vous arriviez sur la page via AJAX ou directement.

La demande AJAX pour la page met uniquement à jour l’élément #main (dans lequel se trouve la vidéo) et history.pushState – cela a-t-il quelque chose à voir avec cela? Cela ne semble pas probable …

Pour toutes les personnes aux sockets avec le même problème, j’ai constaté qu’après l’appel ajax, la vidéo avait la propriété “suspendue: vrai”, même si la lecture automatique était définie et j’appelais video.play () sur “loadeddata”.

La solution était de déclencher video.play () quand une pause est détectée. J’ai également constaté que cela fonctionnait mieux, sans l’atsortingbut ‘autoplay’ sur la vidéo, et devenait saccadé après de multiples initialisations.

DOM:

JS:

 video = jQuery('#video').get()[0]; video.addEventListener('loadeddata', function() { video.play(); }); video.addEventListener('pause', function() { video.play(); });

De plus, si vous vous demandez pourquoi je pourrais vouloir cette fonctionnalité, il s’agit d’une vidéo jouée sur l’arrière-plan d’une page Web; il n’est donc pas nécessaire pour l’utilisateur de la lire ou de la mettre en pause.

vous pouvez appeler video.play () avant votre appel ajax. comme html

Votre tag vidéo n’a pas d’identifiant. Et si vous aviez deux balises ? Tu veux:

et alors:

video = document.getElementById('blah');

Potentiellement, c’est une erreur de syntaxe, car vous semblez avoir une fuite de PHP dans le code HTML sous la forme de '; ?> '; ?> à la fin des atsortingbuts poster et src .