Question

我已将html5视频添加到我的移动网络应用中，目前为了播放此视频，用户必须点击视频左下方的小播放图标。是否可以设置视频，以便用户点击它播放的任何部分？

在Android 2.3.3上进行测试，在iOS上整个视频似乎都是可点击的

我目前的代码：

<video src="video/video.mp4" type="video/mp4" width="300" height="188" class="video" controls preload="none" poster="img/test.png" webkit-playsinline>
    </video>

由于

Answer 1

使用jQuery你可以尝试这样的事情：

$('.video').click(function() {
    this.play();
});

Answer 2

您可以执行简单的click事件拦截。

jQuery('video').click(function() {
    if (this.paused) {
        this.play();
    } else { 
        this.pause();
    }
    return false;
});

问题在于它会覆盖视频上的任何默认控件。这意味着用户将无法使用默认浏览器控件。如果您想要视频的自定义行为，那么您应该使用VideoJS这样的框架。这个框架具有您正在寻找的“点击播放”行为，以及为视频播放控件的所有方面设置样式的能力。

Answer 3

你可以创建一个画布覆盖，当点击它时，它会播放视频并隐藏画布。然后，当视频完成后，您可以“取消隐藏”画布元素。这样你也可以在画布上为用户添加一个播放图标

html5视频 - 让整个视频在Android上可点击播放？

3 个答案: