HTML5视频在AJAX页面加载后播放

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调用之后视频的属性'暂停:true'甚至认为autoplay已设置,我在'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();
});

此外,对于任何想知道为什么我可能想要这种能力的人来说,它是在网页的背景上播放视频,因此无需用户播放/暂停它.