Question

我创建了一个视频，点击灯箱中的缩略图后播放（使用Drupals模块：Colorbox）。

但它不会在Firefox中玩！有什么建议？

这是指向页面的链接：https://www.workbooks.com/video-final

HTML：

<div style="display: none;">
<div id="id-of-content">
<video id="wb_video" width="570" height="320" controls poster="/sites/default/files/image/crm-systems-poster_0.png" onclick="this.play();"/>
  <source src="/sites/default/files/image/CRM-Systems-Video.ogv" type="video/ogg">
  <source src="/sites/default/files/image/CRM-Systems-Video.mp4" type="video/mp4">

  <img src="http://www.workbooks.com/sites/default/files/image/crm-system-image.png" title="CRM System image">

</video>
</div>
</div>

<div class="newvideo"><a class="colorbox-inline" href="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.mp4?width=580&height=330&inline=true#id-of-content"><img src="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.png" onclick="$('#wb_video').play();"></a></div>

CSS：

.newvideo a{
    display:inline-block;
    position:relative;
}
.newvideo a:after{
    background:url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png) center center no-repeat;
    bottom:0;
    content:"";
    display:block;
    left:0;
    position:absolute;
    right:0;
    top:0;
}
.newvideo a:hover:after{
  background-image:url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage-11.png);
}

Answer 1

从img标签中删除JS'onclick'对我有用

<div class="newvideo"><a class="colorbox-inline" href="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.mp4?width=580&height=330&inline=true#id-of-content"><img src="http://www.workbooks.com/sites/default/files/image/CRM-Systems-Video.png" onclick="$('#wb_video').play();"></a></div>

的onclick = “$（ '＃wb_video'）播放（）;”。 - 删除了它，它工作

Firefox拒绝播放<video>

1 个答案: