jquery - HTML5 视频全屏 onclick

标签 jquery html

任何人都可以帮忙解决这个问题吗?建议我像下面一样设置我的文件,以便单击图像会触发未显示的 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>

最佳答案

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

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

关于jquery - HTML5 视频全屏 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27427023/

相关文章:

javascript - 如何在动态创建的文本框中设置值

javascript - 导航栏在滚动 Bootstrap 4 上更改颜色

jquery - 使用 jQuery 垂直对齐 Div 设置 margin-top

jquery ajax调用返回JSON解析错误

javascript - 当我在一个页面中使用多个 Controller 时,Angular JS 只有一个 Controller 工作

javascript - 带有 Fancybox 的 IE8 中的 jQuery 问题

html - 显示图像的文本浏览器显示 "QFSEngine::open: No file specified "警告

javascript - Javascript 中的随机图像生成

javascript - 对多个 View 使用 angular-tour 会产生意想不到的结果

html - iOS Web App 启动画面未加载