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();
})