HTML5 视频 - onclick 播放到全屏

Question

我有一个简单的 HTML5 视频播放器。我希望这样当用户点击网站上的 div 时，这会打开视频全屏。

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <div class="top-video">
        <video controls="" muted="" autoplay="" playsinline="" id="topVideo">
          <source src="https://player.vimeo.com/external/419906207.hd.mp4?s=7c6f9edf7137540923b2931ac0359420124e5d6e&profile_id=174&amp;loop=0&amp;autoplay=1" type="video/mp4">
        </video>
    </div>  

我尝试过使用 jQuery 来解决这个问题，但不能，有人有解决方案吗？

Answer 1

根据 MDN 文档，Element.requestFullscreen() 可以为您提供帮助

$('#div-you-need-to-click').click((e) => {
  $('#topVideo')[0].requestFullscreen();
})