javascript - AJAX 页面加载后播放的 HTML5 视频

Question

当我通过 AJAX 请求到达页面时，我很难让 HTML5 视频播放。

如果您刷新页面，或直接登陆页面，则一切正常。但是当通过 AJAX 导航到该页面时它不播放。

代码是:

<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>

我已经尝试在 AJAX 页面加载成功时触发以下代码:

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

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

也很简单:

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

我也尝试过使用 video.js 等插件，但无济于事。

我忍不住想我错过了一些非常简单的东西。当然，如果视频在页面上并设置了自动播放，那么无论您是通过 AJAX 还是直接到达页面，它都应该播放？

页面的 AJAX 请求仅更新 #main 元素(视频在其中)和 history.pushState - 这可能与它有什么关系吗？好像不太可能...

Answer 1

对于遇到同样问题的任何人，我发现在 ajax 调用之后，视频具有属性“暂停:真”，甚至认为自动播放已设置并且我在“loadeddata”上调用 video.play()。

解决方案是在检测到暂停时触发 video.play()。我还发现它在视频上没有“自动播放”属性时更流畅，并且在多次初始化后变得不稳定。

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();
});

此外，对于任何想知道我为什么需要此功能的人来说，它适用于在网页背景上播放的视频，因此用户无需播放/暂停它。