HTML5 视频全屏点击答案

【问题标题】：HTML5 Video Fullscreen onclickHTML5 视频全屏点击
【发布时间】：2019-02-24 05:02:40
【问题描述】：

任何人都可以帮助解决这个问题。有人建议我设置我的文件，如下所示，单击图像会触发未显示的 HTML5 全屏视频，但出现功能错误。我需要包括一些图书馆吗？似乎没有重新识别命令requestFullscreen。

<body>
   <div class="slide" id="">
       <img src="../root/img/gc_small.png" id="videoPlay" style="margin:200px 0 0 0;">
   </div>

    <video autoplay loop muted controls="false" id="myVideo" style="width:800px;">
        <source src="video/portal.mp4" type="video/mp4">
    </video>
</body>

<script type="text/javascript">
         $(function() {
          $('#videoPlay').on('click', function(event) {
              event.preventDefault();
              $('#myVideo').requestFullscreen();
          });
      });

    </script>

【问题讨论】：

我认为all browsers that currently support requestFullscreen 需要供应商前缀：mozRequestFullScreen 等。另外我认为“FullScreen”与“Fullscreen”的大小写可能不一致。
@apsillers 我试过$('#myVideo').webkitRequestFullScreen();，但仍然得到Uncaught TypeError: undefined is not a functionresidential.html:68 (anonymous function)jquery.min.js:3 m.event.dispatchjquery.min.js:3 r.handle
哦，对了； jQuery 集合没有 webkitRequestFullScreen 方法。 jQuery 集合中的第一个元素 ($(...)[0]) 具有该方法。
making html5 video to fullscreen的可能重复
我仍然对如何让它工作感到有点困惑。该链接似乎没有回答这个问题。这似乎是一个经常使用的脚本

标签： jquery html

【解决方案1】：

这是我最近用于我的项目的东西

$(document).ready(function () {

      var myVideo =  $("video", _self)[0];
      openFullscreen(myVideo)

    })


function openFullscreen(myVideo) {
  console.log("hitting")
  var elem = myVideo
  console.log(elem)
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

【讨论】：

一段不错的代码。它适用于我的桌面，但不适用于移动设备。你让它在移动设备上工作了吗？

【解决方案2】：

您可以使用此代码，因为我使用此代码为我工作：

<!doctype html>
<html lang="en">
    <head>
        <title>FullScreen</title>
        <meta charset="utf-8">
        <style></style>
    </head>
    <body onLoad="onload();">
        <video id="element">
            <source src="video1.mp4"></source>
        </video>
        <a href="#" id="fullscreen">Go Fullscreen</a>
        <script>
            var element = document.getElementById('element');
            var fullscreen = document.getElementById('fullscreen');

            fullscreen.addEventListener('click',function(){
                <!--console.log ('it is working'); -->
                if(element.requestFullscreen){
                    element.requestFullscreen();
                } 
                else if (element.webkitRequestFullscreen){
                    element.webkitRequestFullscreen();
                }
                else if (element.mozRequestFullScreen){
                    element.mozRequestFullScreen();
                }
                else if (element.msRequestFullscreen){
                    element.msRequestFullscreen();
                }   
            });
        </script>    
    </body>
</html>

【讨论】：