请求全屏HTML5videoonPlay

当用户点击元素上的播放按钮时，我正在使用以下代码触发全屏：

 var video = $("#video"); video.on('play', function(e){ if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); } }); 

但是当我点击播放按钮时没有任何反应。

任何想法都是为什么？

编辑：这是我的HTML代码：

Answer 1

这里有几件事情：

首先，在您的代码中， video是一个jQuery对象，而不是实际的video元素。 对于jQuery对象，您可以像这样引用它：

 var actualVideo = video[0]; // (assuming '#video' actually exists) 

其次，为了获得安全性和良好的用户体验，浏览器只允许您在用户触发的事件中触发全屏，例如“点击”。 一旦您访问它，就不能让每个网页都全屏显示，并且您可以使video自动开始播放，这违反了该规则。

因此，另一种解决方案是在点击事件中请求全屏，如下所示：

 var video = $("#video"); video.on('click', function(e){ var vid = video[0]; vid.play(); if (vid.requestFullscreen) { vid.requestFullscreen(); } else if (vid.mozRequestFullScreen) { vid.mozRequestFullScreen(); } else if (vid.webkitRequestFullscreen) { vid.webkitRequestFullscreen(); } }); 

理想情况下，你可能想要建立一个更完整的玩家ui，但这应该给你一般的想法。

Answer 2

一种不那么冗长的方式来切换全屏组合这个和其他问题的答案。

p表示video元素的DOM对象， window.isFs只是用于存储当前全屏状态的随机变量。

如果你的player是一个jQuery对象，那么使用var p = player.get(0)获取底层DOM元素。

这应该处理所有浏览器风格：基于webkit，firefox，opera和基于MS的浏览器。

 var p = document.querySelector('#videoplayer'); if (!window.isFs) { window.isFs = true; var fn_enter = p.requestFullscreen || p.webkitRequestFullscreen || p.mozRequestFullScreen || p.oRequestFullscreen || p.msRequestFullscreen; fn_enter.call(p); } else { window.isFs = false; var fn_exit = p.exitFullScreen || p.webkitExitFullScreen || p.mozExitFullScreen || p.oExitFullScreen || p.msExitFullScreen; fn_exit.call(p); }