我想让我的HTML5游戏在发布时全屏显示.当我点击一个按钮时,它会全屏显示.但是当我使用window.onload使其进入全屏上载时,它在控制台上回复无法在'Element'上执行'requestFullScreen':API只能由用户手势启动.我正在使用铬.有解决方法吗？
我的代码:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = openfullscreen();
function launchIntoFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function openfullscreen() {
launchIntoFullscreen(document.documentElement);
}
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
window.close();
}
function fix() {
var screenwidth = screen.width;
var screenhei = screen.height;
document.getElementById('ifam').width = screenwidth;
document.getElementById('ifam').height = screenhei;
}
</script>
<style>
#ifam {
position:fixed; …我正在使用带有角度材料前端的cordova开发一个跨平台应用程序.
我在md-card列表中使用HTML5视频标签来播放带有外部网址的视频.内联时视频播放正确,并按预期显示本机控件.
<video class="project-video" video-directive item="$ctrl.project" ng-src="{{$ctrl.project.videoUrl | trustUrl}}" preload="auto"
controls poster="{{$ctrl.project.video.thumbnail_url}}">
Your browser does not support the video tag.
</video>
但是,当我单击"切换全屏"按钮时,视频会进入全屏,但默认控件会消失.在此之后我无法回到应用程序 - 本机安卓后退按钮不会关闭整个屏幕 - 而是关闭整个应用程序.
我正在寻找的解决方案将使控件始终显示在全屏模式下; 这可以解决在iOS上运行相同代码的框.
因此,我不想花时间为Android开发我自己的自定义视频控件,如果我可以帮助它!因此,请不要发布关于如何做到这一点的答案(SO和其他地方已有很多).
我正在使用魅族m2注意Android设备.
谢谢!
编辑:
控件仍在那里,但在css的阴影DOM树中显示为大小为0 x 0px.即使我使用!important标志在chrome dev工具中更改它们的大小,它们也不会显示出来.
有任何想法吗？
android html5-video cordova android-fullscreen html5-fullscreen
无论我如何将DOM中的元素作为html5视频上的叠加(静态或动态),Firefox中的这些元素都不可见,尽管z-index设置为2147483647,不透明度为1和显示块.
看到2个类似的答案,在Chrome中工作,但不在FF中:
我为我的应用程序实现了全屏切换功能,它实际上运行良好,在最新的Chrome,Firefox,IE和Opera上进行了测试.我有一种激活方法,一种用于停用全屏模式:
public deactivateFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
document.webkitCancelFullScreen();
} else if (element.mozRequestFullScreen) {
document.mozCancelFullScreen();
}else if(element.msRequestFullscreen){
document.msExitFullscreen();
}
}
public activateFullscreen(element) {
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}else if(element.msRequestFullscreen){
element.msRequestFullscreen();
}
}
因此,当从UI触发时,它们都能正常工作.唯一的问题是一旦我进入全屏模式使用F11我无法使用该deactivateFullscreen功能退出它.据我所知,对于浏览器,一旦我点击就没有设置标志F11.我尝试使用以下方法测试它:
public isFullscreen(element) {
if(element.webkitIsFullScreen || element.mozFullscreen || element.msFullscreenElement || element.fullscreenElement || element.fullscreen || element.webkitFullscreenElement || element.mozFullScreenElement){
return true;
}
return false;
}
无论我是否全屏,这总是返回false.有没有其他方法可以检测浏览器当前是否处于全屏模式？或者我在这里错过了一些概念？
我尝试的另一件事是捕获keydown事件 …
我在使用HTML5 video标签时遇到问题iconic.
这是我的模板的一部分:
<ion-view>
<ion-content overflow-scroll="true" data-tap-disable="true">
<div class="list card">
<div class="item item-body" style="padding: 5% 5% 5% 5%">
<div class="player">
<video controls="controls" autoplay id="sr"></video>
</div>
</div>
</div>
</ion-content>
</ion-view>
这是我的控制器:
.controller('viewVideoCtrl', function ($scope, $state, $stateParams) {
var videoPath = URL + "uploadFiles" + $stateParams.videoPath;
var videoObject = document.getElementById("sr");
videoObject.src = videoPath;
var webkitBeginFullScreen = function () {
alert("video has fullScreen!");
};
var onVideoEndsFullScreen = function () {
alert("fullScreen has end!");
};
videoObject.addEventListener('webkitbeginfullscreen', webkitBeginFullScreen, false);
videoObject.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false); …javascript html5 html5-video ionic-framework html5-fullscreen
我正在使用 HTML5 元素开发自定义视频播放器video，但无法让全屏按钮与Fullscreen API一起使用。
当我点击它时，我收到错误消息：
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
但是，我正在使用用户手势发起调用requestFullscreen...除非我误解了用户手势的构成。单击元素是一种用户手势，不是吗？
我意识到 SO 上有很多关于全屏 API 的问题，但看起来很多人都想在没有用户交互的情况下启动全屏模式。
我究竟做错了什么？
有一支笔带有此代码，但当我找到解决方案时，我可能会更改它。我不会改变这里的代码。
这是代码：
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
/* Get our elements. */
const player = document.querySelector('.player');
const video = player.querySelector('.viewer');
const progress = player.querySelector('.progress');
const progressBar = player.querySelector('.progress__filled');
const toggle = player.querySelector('.toggle');
const skipButtons = …我正在创建一个小部件，单击一个按钮后，我希望将其全屏显示。我已经实现了全屏API，并且在所有浏览器上都可以正常运行。但是，我正在创建此小部件以仅在iPad上用作交互式信息亭。我可以自由使用最合适的浏览器，但无法在iPad上使用全屏功能。尝试了多种不同的选择，但还不够……我有以下代码可在普通桌面浏览器上运行：
var element = document.getElementById('element');
var fullscreenButton = document.getElementById('fullscreenButton');
fullscreenButton.addEventListener('click', function(){
if(element.requestFullscreen){
element.requestFullscreen();
}else if(element.webkitRequestFullscreen){
element.webkitRequestFullscreen();
}else if(element.mozRequestFullScreen){
element.mozRequestFullScreen();
}else if(element.msRequestFullscreen){
element.msRequestFullscreen();
} else{
element.webkitEnterFullscreen();
}
});
我有什么办法可以创建一种应用程序（基本上是幻灯片放映），以便以任何方式在iPad上进入全屏模式？预先感谢所有提示/帮助。
我的应用程序显示移动设备的一些页面。此类页面会<viewport>仔细计算标签，以便它们 100% 适合设备屏幕，例如：
<meta id="sysviewport" name="viewport" content="initial-scale=0.79, minimum-scale=0.79, maximum-scale=0.79, user-scalable=no, width=device-width">
在应用程序中，您可以通过调用 HTML5 api 进入全屏模式：
$(document.documentElement).fullScreen(true);
（jQuery 模块只是调用requestFullScreen()查找供应商前缀等。）
发生的情况是，在全屏模式下，视口比例被忽略（我猜是重置为“1”）。当我退出全屏模式时，视口比例再次受到尊重。
这是一个错误吗？文档中的灰色区域？或者是全屏模式的预期功能？也有人可以确认这种情况也发生在移动 Safari 上吗？
我<body>在全屏模式下通过 azoom或手动缩放自己做了一些测试transform，但与viewport缩放相比，性能很糟糕。
我的屏幕上有两个按钮。每个人都会触发一段 javascript 代码来进入和退出全屏模式。
按钮 1：进入全屏模式
按钮 2：退出全屏模式
如果我首先单击按钮 1，它会将我带到全屏模式，然后如果我单击按钮 2，它将退出全屏模式。
但是，如果我使用F11或通过chrome menu进入全屏模式，意外地按钮 2不再工作。
为什么会发生这种情况以及如何解决？
按钮 1 代码：
goFullscreen();
function goFullscreen() {
var el = document.documentElement,
rfs = el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
rfs.call(el);
}
按钮 2 代码：
document.webkitCancelFullScreen();
我也试过这个，但没有运气：
document.webkitExitFullscreen();
我最近为 javascript 编写了一个菜单界面，它可以让您动态地向其中添加选项，并且主要与 mouseEnter Events 一起使用。我通过请求/退出全屏向它添加了一些基本的视频控件，这些控件大部分时间显示在这些 mouseEnter 事件之一上，Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.但是（奇怪的部分:) 有时它可以工作，我不确定浏览器 api 如何决定一个动作是用户手势与否 oO 任何帮助将不胜感激，谢谢
html5-fullscreen ×10
javascript ×6
html ×3
html5 ×3
html5-video ×3
android ×2
cordova ×1
firefox ×1
fullscreen ×1
ios ×1
ipad ×1
jquery ×1
typescript ×1
viewport ×1
z-index ×1