javascript 在 AJAX 页面加载后播放 HTML5 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22179645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video to play after AJAX page load
提问by Paul Thomas
I am struggling to get an HTML5 video to play when arriving at the page via an AJAX request.
当我通过 AJAX 请求到达页面时，我正在努力让 HTML5 视频播放。
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.
如果你刷新页面，或者直接登陆页面，它工作正常。但是当通过 AJAX 导航到页面时，它不会播放。
The code is:
代码是：
<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>
I have tried firing the following code on success of AJAX page load:
我尝试在 AJAX 页面加载成功时触发以下代码：
video = document.getElementById('video');
video.load();
video.addEventListener('loadeddata', function() {
video.play();
}, false);
And also simply:
也很简单：
video = document.getElementById('video');
video.play();
I have also tried using plugins such as video.js, but to no avail.
我也尝试过使用 video.js 等插件，但无济于事。
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 还是直接到达页面，它都应该播放？
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 请求仅更新 #main 元素（视频所在的元素）和 did history.pushState - 这可能与它有关吗？好像不太可能...
回答by Paul Thomas
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'.
对于遇到相同问题的任何人，我发现在 ajax 调用后，视频的属性为 'paused: true' 甚至认为自动播放已设置，我正在调用 video.play() 上的 'loadeddata'。
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.
解决方案是在检测到暂停时触发 video.play()。我还发现它在视频上没有“自动播放”属性时工作更流畅，并且在多次初始化后变得生涩。
DOM:
DOM：
<video id="video" loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
JS:
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.
此外，对于想知道为什么我可能需要此功能的人来说，它用于在网页背景上播放的视频，因此用户无需播放/暂停它。
回答by Jian
you can call video.play() before your ajax calling. like html
您可以在 ajax 调用之前调用 video.play()。像 html
<video id="video">...</video>
<a href="javascript:play()"></a>JS
JS
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
....
}
);
}回答by waterlovinguy
Your video tag has no ID. What if you had two <video>tags? You want:
您的视频标签没有 ID。如果你有两个<video>标签怎么办？你要：
<video id="blah"...
<video id="blah"...
and then:
接着：
video = document.getElementById('blah');
video = document.getElementById('blah');
回答by Houdmont
Potentially it's a syntax error, because you seem to have some PHP leaking into the HTML in the form of '; ?>at the end of the posterand srcattributes.
这可能是一个语法错误，因为您似乎有一些 PHP'; ?>以poster和src属性末尾的形式泄漏到 HTML 中。
