jquery AJAX 页面加载后播放的HTML5视频

ulmd4ohb  于 2023-01-12  发布在  jQuery
关注(0)|答案(5)|浏览(212)

我正在努力获得一个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-这可能与它有关吗?看起来不太可能...

w6mmgewl

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.
生产日期:

<video id="video" loop muted>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

联森:

video = jQuery('#video').get()[0];

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

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

此外,对于任何人想知道为什么我可能会想要这个能力,这是一个视频播放的网页背景,因此不需要用户播放/暂停它。

kwvwclae

kwvwclae2#

你可以调用video.play()之前你的 AJAX 调用.像html

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

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
 ....
}
);
}
1sbrub3j

1sbrub3j3#

您的视频标签没有ID。如果您有两个<video>标签会怎样?您需要:
<video id="blah"...
然后:
video = document.getElementById('blah');

jjjwad0x

jjjwad0x4#

这可能是一个语法错误,因为在postersrc属性的末尾似乎有一些PHP以'; ?>的形式泄漏到HTML中。

ux6nzvsh

ux6nzvsh5#

看来这些答案都不管用了,我试了那个公认的答案,也不管用。
看起来Chrome找不到视频对象,它处于未定义状态。
你可以做一些其他的事情。非常简单。你使用全局事件处理器.ajaxSuccess作为一个标记,表示请求已经被处理,视频现在可以播放了。
这样你就可以确定视频对象的存在。对于Chrome,你可以做一些if语句。

video = jQuery('#video').get()[0];

jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
        if( video ) {
            video.play();
        } else { 
          // Chrome can't find the video object and throws a 'undefined'
          // Therefore you have to activate the video manually

            jQuery("#videoID")[0].play();
        }
});

相关问题