HTML5视频全屏onclick

Question

HTML5视频全屏onclick

4

有人能帮忙吗？我被建议按照以下方式设置我的文件，以便在单击图像时触发一个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>

- Packy

我认为目前支持requestFullscreen的所有浏览器都需要一个供应商前缀：mozRequestFullScreen等。而且，我认为"FullScreen"与"Fullscreen"的大小写可能不一致。 - apsillers

1

哦，对了；jQuery集合没有webkitRequestFullScreen方法。jQuery集合内的第一个元素($(...)[0])具有该方法。 - apsillers

可能是重复的问题：如何将HTML5视频全屏播放？ - apsillers

我仍然有点困惑如何使这个工作起来。那个链接似乎没有回答这个问题。看起来这会是一个经常使用的脚本。 - Packy

根据链接，在 jQuery 对象内部需要调用 *requestFullscreen 函数。您可以使用 $(...).get(0) 或方括号访问 $(...)[0] 来获取 DOM 元素。这就是如何获取元素的方法。我目前不了解您仍然需要哪些帮助，因此不确定如何更好地解释它。您能否准确说明您不理解的部分？ - apsillers

显示剩余2条评论

2个回答

-1

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

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

- Anileweb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jsPlayer · Accepted Answer

这是我最近在项目中使用的东西。

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