标签: fullscreen

我正在试图通过JavaScript在iPad/iPhone上全屏播放HTML5视频元素,但是当我尝试使用videoElement.webkitEnterFullScreen()时,我看到了一个INVALID_STATE_ERR:Dom Exception 11.

我的守则

对于示例

现在,看起来在这里添加了对此行为的特定支持:

这特别是在没有用户手势的情况下防止全屏显示.

我的问题:

这有解决方法吗？

我看到Vimeo的HTML5视频播放器模仿了这种行为,就像在这里看到的那样 (在iPad/iPhone上)

所以,似乎有可能.我错过了什么吗？

我的iPad应用程序上有一个MPMoviePlayerController,当它的帧是常规(不是全屏)时效果很好.

当我点击全屏按钮时,播放器全屏显示,但电影停止.我永远看到标题为"正在加载...",黑色背景,并禁用标准控件(后退,播放和下一个).

我为玩家声明了一个实例变量:

MPMoviePlayerController *player;

在我的实施中:

MPMoviePlayerController *player = [[MPMoviePlayerController alloc] initWithContentURL:videoUrl];

player.shouldAutoplay = NO;
player.movieSourceType = MPMovieSourceTypeFile;
player.controlStyle = MPMovieControlStyleEmbedded;
player.allowsAirPlay = YES;

player.view.frame = CGRectMake(xPos, yPos, width, height);

[self.view addSubview:player.view];

[player prepareToPlay];

你有什么主意吗？我正在使用iOS 6 SDK,我正在测试iPad 6.0模拟器上的应用程序和带有iOS 6 beta(最新)的真正iPad2.

设计:

ViewController:有一个玩家视图和一个容器视图.

播放器视图:加载AVPlayer并在播放器视图底部有一个子视图(PlayerControlView)来加载播放器控件(播放/暂停/进度条/全屏等...)

PlayerControlView:一个自定义的UIView,它具有播放器控件.

我能够在正常模式下加载AVPlayer和播放器控件(即不是全屏).播放很好,所有控件都正常工作.

问题:

当用户点击播放器控件上的全屏图标时,我希望AVPlayer全屏显示.我可以通过更改播放器视图的框架并将AVPlayerLayer的Zposition设置为100来使AVPlayer全屏显示.

问题是只有当我不对playerControlView进行任何更新时(即进度条/点击播放按钮等),AVPlayer才会保持全屏状态.一旦在滑块上完成播放进度更新,AVPlayer就会退出全屏并返回正常模式.

播放器控件不会重新定位到播放器视图的底部.他们自己仍然处于以前的位置.在正常模式下,播放器控件在方向更改时正确布局.

如果我采取的方法是正确的方法,有人可以告诉我吗？如果没有,请建议正确的设计,以实现AVPlayer的功能齐全的播放器控件.

提前谢谢,Naveen

我有一个带有弹出框的应用程序,它出现在状态栏项目上.问题是,当你在全屏应用程序中点击图标时,然后将鼠标从菜单栏移​​开以点击弹出窗口中的内容,菜单栏向上移动,弹出窗口也是如此.它很烦人.

有谁知道解决这个问题的方法？我尝试将一个隐形菜单附加到弹出窗口,但我不能让菜单看不见.

屏幕截图为清晰,恼人的部分是我挥动鼠标的地方:

我试图获得一个全屏运行所有页面的网站,我已经看过这里:Safari中的iPad WebApp全屏,然后我的索引页面很好地填满了屏幕,但每当我点击链接到另一个页面时,即使该页面全部使用元标记进行设置,它将铬条拉回来并且所有对齐都会消失.

必须有一种方式,或者是在后期版本中修复的safari限制.

我花了很多时间搞清楚如何确定我的NSWindow是否处于全屏模式,以及如何启用/禁用它进入或退出全屏模式.当我将视图设置为另一个视图的动画或执行某些进入或退出全屏模式的内容时,这非常有用.类似于锁定窗口的大小.

答案如下.

jPlayer的全屏可以在IFRAME标签内部工作吗？因此,"全屏"受iframe大小的限制.

编辑:

这是我在一个插入jPlayer的方式IFRAME:

<div id="movieContainer" >
  <object id="videoTut" name="videoTut" type="text/html" data="/videotutorial/videotut.html">
  </object>
</div>

其中videotut.html包含一个包含jPlayer的完整HTML页面,如果单独加载则可以正常工作.并object使用类似代码修改标记document.getElementById('movieContainer').innerHTML = '....

另请参阅:https://groups.google.com/forum/#!topic/jplayer/IQxIIYhtAnE

(PS如果您想帮助我为jPlayer提供多视频设计,请在此处进行:jPlayer多视频演示代码？)

我现在的最终目标是在视频播放结束时在视频顶部显示一个链接.使用JW播放器功能我已确定如何在视频完成时显示链接但仅在标准视图中显示.如果用户以全屏方式查看视频,则不会显示该链接.我已经做了大量阅读并理解,当它处于全屏模式时,视频处于闪存状态,如果不将链接集成到swf文件中,我无法覆盖闪存功能,我不想这样做.

我所做的是使用皮肤删除JW Player视频播放器中的全屏按钮.然后我创建了一个按钮,使用HTML5全屏功能全屏显示视频.(我知道IE不适用于此......现在没问题).我还可以创建一个全屏状态更改事件侦听器,以便我的链接显示在视频的顶部.但它不起作用.

无论我如何设置保存链接的DIV,它都不会出现在视频的顶部.

有人能指出我正确的方向吗？

感谢任何人都能给我的帮助.

代码示例:

#container{
       position:relative;
   z-index:0;
}

#overlay {
   visibility:hidden; 
   width: 700px; 
   height:50px; 
   color:#FFF; 
   position: absolute; 
   top: 532px; 
   margin:8px; 
   padding:5px; 
   background-color:#000;   
   text-align:center;
}

#overlayfullscreen{
   visibility:hidden;
   text-align:center;
   color:#FFF;
   font-size:26px;
   z-index: 1000;
   position: absolute;          
   top: 800px;
   margin:8px; 
   padding:5px; 
   overlay:hidden;          
}



<div id="container">
    Loading the player, if not working please update your browser.
</div>                      

<button onClick="goFullscreen('container'); return false">Click for Fullscreen</button>





var path = '<?php echo $video_path ?>';

jwplayer("container").setup(
{
autostart: <?php echo $autostart ?>,        
file: "<?php echo $full_video_path ?>", …

我正在创建自己的HTML 5浏览器播放器.所有控件分开工作,使得在IE 10,Chrome,Safari和Firefox中全屏工作非常好.

我的JavaScript技能并不是最好的,所以如果有人能够以一种简单的方式为我解释事情就会很棒.

我在一些网站上看到IE不支持全屏,如果是这样的话,为什么我可以通过IE10上的浏览器播放器控件进入全屏？(讨厌微软如此垃圾,一切都在后面!)

将不胜感激,帮助和建议!提前致谢!

这是我到目前为止的全屏功能:

function toggleFullScreen() {
    if(vid.requestFullScreen) {
    vid.requestFullScreen();   
    } else if(vid.webkitRequestFullScreen) { 
    vid.webkitRequestFullScreen();   
    } else if(vid.mozRequestFullScreen) { 
    vid.mozRequestFullScreen();
    }
    }

这是关于退出全屏模式的文档.

我使用这个代码,我学会了使浏览器全屏(它工作),但我试图修改它的版本以退出全屏失败.处理这些非标准API有点棘手,每个浏览器实现它有点不同.

这是代码:

// Bring the page into full-screen mode - Works!
function requestFullScreen(element) {

    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || 
        element.webkitRequestFullScreen           || 
        element.mozRequestFullScreen              || 
        element.msRequestFullScreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if ( typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

// Exit fullscreen - Doesn't work!
function exitFullScreen(element){
    var requestMethod = element.exitFullscreen || 
        element.mozCancelFullScreen            || 
        element.webkitExitFullscreen           || 
        element.msExitFullscreen;
    if (requestMethod) { …