Question

就像标题所暗示的那样，我有一个HTML5视频，它目前位于包装div后面，如下所示：

<div class="video-wrap">
                <video poster="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.jpg" style="width:100%" title="What is  Customer Devotion?" id="html5_video_qlpjkwou10fcg14i">
                    <source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.m4v" type="video/mp4">
                    <source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.webm" type="video/webm">
                    <source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.ogv" type="video/ogg">
                    <source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.mp4" type="video/ogg">
                </video>
            </div>

问题在于，当视频播放时，由于收缩div，无法获得任何本机右键单击控件。即我无法暂停，播放，循环等。

有没有办法解决这个问题而不删除div？

感谢。

Answer 1

需要在视频标记中添加

controls =“”属性。

示例

$(".nav").on("click", "a", function (event) {
    var target = $(event.target)
    if (target.is("a"))
        window.location.replace(target.attr("href"));
})

demo

Answer 2

一个很好的解决方法可能是弹出视频。这样，用户可以直接与视频而不是div进行交互。

HTML5右键单击隐藏在包装div后面的视频选项

2 个答案: