HTML5 视频 - 双击全屏

Question

我希望在用户双击视频区域时让我的视频全屏显示，而不仅仅是在他们单击控件中的小图标时。有没有办法添加事件或其他东西来控制用户点击视频时发生的情况？

<video controls autoplay>
  <source src="/v/foo.mp4">
</video>

谢谢!

Answer 1

按照 Musa 的建议，附加一个双击事件——类似于 $('video').on('dblclick', callback)

element.requestFullScreen 可能是“正确”的方式，但浏览器支持 isn't great yet ，尤其是在移动设备上。

如果您不需要真正的全屏，并且填充浏览器就足够了，您可以在 dblclick 回调中应用一些 CSS。