我正在努力获得一个HTML5视频播放时,通过AJAX请求到达页面。
如果你刷新页面,或者直接登陆页面,它可以正常工作。但是当通过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元素(视频在里面)和doesthistory.pushState-这可能与它有关吗?看起来不太可能...
5条答案
按热度按时间w6mmgewl1#
对于任何在同一个问题上挣扎的人,我发现在ajax调用之后,视频的属性"暂停"了:true '甚至认为设置了自动播放,而我在' loadeddata '上调用www.example.com()。video.play() on 'loadeddata'.
解决方案是在检测到暂停时触发www.example.com()。我还发现,如果视频上没有"autoplay"属性,它工作起来会更顺畅,并且在多次初始化后变得不稳定。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.
生产日期:
联森:
此外,对于任何人想知道为什么我可能会想要这个能力,这是一个视频播放的网页背景,因此不需要用户播放/暂停它。
kwvwclae2#
你可以调用video.play()之前你的 AJAX 调用.像html
JS系统
1sbrub3j3#
您的视频标签没有ID。如果您有两个
<video>
标签会怎样?您需要:<video id="blah"...
然后:
video = document.getElementById('blah');
jjjwad0x4#
这可能是一个语法错误,因为在
poster
和src
属性的末尾似乎有一些PHP以'; ?>
的形式泄漏到HTML中。ux6nzvsh5#
看来这些答案都不管用了,我试了那个公认的答案,也不管用。
看起来Chrome找不到视频对象,它处于未定义状态。
你可以做一些其他的事情。非常简单。你使用全局事件处理器
.ajaxSuccess
作为一个标记,表示请求已经被处理,视频现在可以播放了。这样你就可以确定视频对象的存在。对于Chrome,你可以做一些if语句。