Question

任何人都可以帮忙解决这个问题。我被建议设置我的文件，如下图所示，点击一个图像触发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>

JS

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

    </script>

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

Answer 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>

HTML5视频全屏onclick

2 个答案: