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

【问题标题】：html5 video - making the whole video clickable on Android to play?html5 视频 - 让整个视频在 Android 上可点击播放？
【发布时间】：2013-06-24 00:16:52
【问题描述】：

我已经在我的移动网络应用中添加了一个 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>

谢谢

【问题讨论】：

HTML5 视频有各种形状和大小。我们需要更多详细信息 - 特别是您使用的 HTML5 播放器。发布代码也有帮助。

标签： javascript jquery html video mobile

【解决方案1】：

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

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

【讨论】：

嘿，谢恩，谢谢。我不熟悉只使用这个我一直虽然它必须是 $(this)。谢谢你
自从我完成 jQuery 以来已经有一段时间了，这是从旧项目中的大量代码修改而来的。如果肯定是错误的，我会很乐意更新答案。
不，它工作正常，如果我将更新到 $(this) 我得到错误：对象没有方法播放

【解决方案2】：

你可以做一个简单的click 事件拦截。

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

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

【讨论】：

【解决方案3】：

您可以创建一个画布叠加层，当点击它时，它会播放视频并隐藏画布。然后当视频完成时，您可以“取消隐藏”画布元素。这样，您还可以在画布中为用户放置一个播放图标

【讨论】：