在AJAX页面加载后播放的HTML5视频 [英] HTML5 Video to play after AJAX page load

问题描述

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

I am struggling to get an HTML5 video to play when arriving at the page via an AJAX request.

如果刷新页面，或直接登陆页面，它工作正常。但是当通过AJAX导航到页面时，它无法播放。

If you refresh the page, or land directly on the page, it works fine. But when navigating to the page via AJAX it does not play.

代码为：

<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页面加载成功时触发以下代码：

I have tried firing the following code on success of AJAX page load:

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

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

还简单地说：

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

我也尝试使用像video.js这样的插件，但无济于事。

I have also tried using plugins such as video.js, but to no avail.

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

I can't help but think I am missing something really simple. Surely if the video is on the page and has autoplay set, then it should just play regardless of whether you arrive at the page via AJAX or directly?

AJAX请求页面只更新#main元素（视频在里面）和history.pushState - 可能与它有关吗？它似乎不太可能...

The AJAX request for the page only updates the #main element (which the video is inside) and the does history.pushState - could that be anything to do with it? It doesn't seem likely...

推荐答案

对于任何挣扎于同一问题的人，我发现在ajax调用之后视频的属性'暂停：真'即使认为自动播放已设置，我在'loadeddata'上调用video.play（）。

For anyone struggling with the same issue, I found that after the ajax call the video had the property 'paused: true' even thought autoplay was set and I was calling video.play() on 'loadeddata'.

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

The solution was to trigger video.play() when pause is detected. I also found that it worked smoother not having the 'autoplay' attribute on the video and became jerky after multiple 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();
});

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

Also, for anyone wondering why I might want this ability, it is for a video playing on the background of a webpage, hence no need for user to play/pause it.

这篇关于在AJAX页面加载后播放的HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！