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

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

Answer 2

你可以在你的ajax调用之前调用video.play（）。喜欢 HTML

＆＃13;

<video id="video">...</video>
<a href="javascript:play()"></a>

＆＃13;

JS

＆＃13;

function play() {

$("#video")[0].play(); // call play here !!!

$.ajax(
"your url",
{your data},
function() {
 $("#video")[0].play(); // usually we call play() here, but it will be pause beccause it can not be play if not in click or touch event sync
 ....
}
);
}

＆＃13;

Answer 3

您的视频标记没有ID。如果您有两个<video>标签怎么办？你想要：

<video id="blah"...

然后：

video = document.getElementById('blah');

Answer 4

可能是语法错误，因为您似乎在'; ?>和poster属性的末尾以src的形式将一些PHP泄漏到HTML中。

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

4 个答案: