单击播放按钮时,html5视频无法启动

时间:2012-04-24 06:42:17

标签: jquery dom html5-video

我到处寻找类似的问题而没有运气。

我有一个html5 mp4视频,点击播放按钮时无法播放。我知道点击是因为点击时播放按钮会突出显示。其他默认控件是响应式的,视频无法播放。

我认为它没有正确地与DOM通信。视频控件是默认的html5

<video>位于div,类.divWrapper此div确实有一个防止默认值,以阻止名为HandleMouseDown的函数触发,但这不应该干扰用播放按钮。特别是因为它对其他视频控件没有影响。

这是html

<div class="vidWrapper">  

   <video width="430" height="261" preload="metadata" controls>  

      <source src="vids/JB_COMMERCIAL_WEB.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>  
      <source src="vids/JB_COMMERCIAL_WEB.ogv" type='video/ogg; codecs="theora, vorbis"'>  
           <object width="640" height="384" type="application/x-shockwave-flash"  
            data="vids/JB_COMMERCIAL_WEB.swf?image=JB_COMMERCIAL_WEBplaceholder.jpg&file=vids/JB_COMMERCIAL_WEB.mp4">  
                <param name="movie" value="JB_COMMERCIAL_WEB.swf?image=JB_COMMERCIAL_WEBplaceholder.jpg&file=vids/JB_COMMERCIAL_WEB.mp4" />
           </object>
   </video>
</div>

以下是防止默认代码段。

$("#" + section + "Copy").slideDown("normal", function()   
{ dropdownSection = section; document.onclick = HandleMouseDown;  
$(".vidWrapper").click(function(HandleMouseDown) {return false;});});
编辑:我可以通过插入jquery来强制播放视频来播放视频。现在我有一个不同的问题。视频播放但不会暂停。

我的问题是,如何修改代码,以便视频在点击时暂停?

这是最新的代码:

$("#" + section + "Copy").slideDown("normal", function() { dropdownSection = section; document.onclick = HandleMouseDown; $(".vidWrapper").click(function(HandleMouseDown) {return false;});   
$(".vidWrapper").click(function() {$('video', this).get(0).play();});  
}); 

2 个答案:

答案 0 :(得分:0)

你的代码看起来不错

  1. 检查视频是否直接在浏览器中播放(点击“直播”到浏览器中),以确定视频文件是否没有损坏

    1. 你可以播放另一个mp4文件吗?如果没有,请查看我刚写的这篇文章并检查服务器mime类型 - &gt; Playing a movie/DVD on a website

答案 1 :(得分:0)

对于仍然遇到此问题的任何用户:此处的问题是click元素上的.vidWrapper事件处理程序以及它返回false这导致默认点击事件的事实不仅要防止.vidWrapper元素,还要阻止视频本身。

此刻,问题似乎只出现在Firefox中。

使用e.preventDefault代替return false

时也会出现问题

这是另一个例子:https://jsfiddle.net/qpusancf/(在Firefox 53.0.3上测试)

从事件处理程序中删除return false;语句应该可以解决问题。

或者,如果您需要阻止父元素上的默认事件,您可以检查事件目标是否具有父元素的类,并且仅在默认事件发生时才阻止它。

使用jQuery:

$(".vidWrapper").click(function(event) {    
    if($(event.target).hasClass('vidWrapper')) {
        event.preventDefault();
        // Additional event handling code ...
    }
});

OP表示其他视频控件不受影响是正确的。这种行为可能是Firefox中的一个错误,因为播放按钮仍然可以在其他浏览器中使用,即使父进程上的默认点击事件被阻止。