单击播放按钮时html5视频不会开始答案

【问题标题】：html5 video won't start when play button is clicked单击播放按钮时html5视频不会开始
【发布时间】：2012-04-24 06:42:16
【问题描述】：

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

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

我认为它与 DOM 的通信不正确。视频控件默认为 html5

<video> 与 .divWrapper 类位于 div 中，此 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>

这是阻止默认的sn-p。

$("#" + 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();});  
});

【问题讨论】：

您当前使用的代码怎么样？然后你可以得到帮助，因为像我这样的大多数人无法阅读你的屏幕或思想;-)
抱歉，只是想找出最好的方式来表达这个问题而不会造成混淆。

标签： jquery dom html5-video

【解决方案1】：

你的代码看起来不错

检查视频是否直接在浏览器中播放（点击'n'拖放到浏览器中），以确定视频文件是否损坏
1. 你能播放另一个 mp4 文件吗？如果没有，请查看我刚刚写的这篇文章并检查服务器 mime 类型 -> Playing a movie/DVD on a website

【讨论】：

longilong- 感谢您的回复。 mp4 在浏览器中工作，并且 mime 类型是正确的 :( 更令人困惑的是，即使使用 prevent default，视频控件也可以工作，但播放按钮仅在我删除 prevent default 时才有效...

【解决方案2】：

对于仍然遇到这个问题的任何用户：这里的问题是 .vidWrapper 元素上的 click 事件处理程序以及它返回 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 中的一个错误，因为即使阻止了父级上的默认单击事件，播放按钮在其他浏览器中仍然有效。

【讨论】：