我有一个小亭子，我正准备参加一个使用27英寸iMac，OSX Lion的会议。浏览器是Chrome。我正在使用灯箱来显示快速视频。我使用的灯箱是fancybox。
当灯箱中出现视频时，我将灯箱编程为“全屏”，这是显示器的大小。但是QUICKTIME内容并非全屏，它只是一个非常大的白色灯箱内的窗口。
当我右键单击视频时，有一个FULLSCREEN选项可以提供我想要的内容：QuickTime内容全屏显示，填满整个27英寸Mac屏幕，看起来很漂亮。
我需要的是视频无需右键单击即可自动打开全屏，因为这适用于会议，用户无法保持右键单击视频以使其正常工作。
这是我的代码：
<div id="videocontainerone" style="display:none; position:relative; top:0px;">
<object width="2560" height="1240">
<param name="movie"
fullscreen="full"
quitwhendone="true"
value="videos/one.mov">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"> </param>
<embed
src="videos/one.mov"
fullscreen="full"
quitwhendone="true"
allowscriptaccess="always" allowfullscreen="true" width="2560" height="1240">
</embed>
</object>
</div>
灯箱由js打开，但我的预感是，我需要的是实际调整quicktime设置和/或嵌入选项。但打开视频的js很简单： 在一份文件中。我只是这样做：
$(".fancybox").fancybox({
frameWidth: 2560,
frameHeight: 1240,
overlayShow: true,
overlayOpacity: 0.7
});
任何帮助将不胜感激！先感谢您。
编辑： 我试图按照2006年的文章中的说明创建.htaccess文件和.qtl文件： http://www.kenvillines.com/archives/82.html 并且它可以拉动电影，但仍然没有自动全屏。 任何回答此问题的人都会得到啤酒！ 感谢。
答案 0 :(得分：0)
所以我找到了答案。简而言之：
通过将目标视频放入display：none divs并使用href链接到各种视频的＃videoone，＃videotwo等，并使用fancybox插件进行操作。
我将视频格式更改为HTML5，因为它在自助服务终端内部运行。
对于全屏效果，我使用的是element.webkitRequestFullScreen（）;在html5视频元素本身，仍然使用fancybox，但把它全屏（我的意思是视频自身是全屏，这是我想要的）。
我在这里发布整个页面的代码:(我希望我的缩进正确，我通常不发布这么多代码，但它很有用。）....希望这会对某人有所帮助。
<!doctype html>
<html>
<head>
<link rel=stylesheet href="style.css" type="text/css" media=screen>
<!-- Add jQuery library -->
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"> </script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.1" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.1"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.4"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.4"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
console.log(element);
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var videotimer
$(".fancybox").fancybox({
frameWidth: 2560,
frameHeight: 1240,
overlayShow: true,
overlayOpacity: 0.7
});
$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
console.log("key pressed is "+keycode);
if(keycode == '13'){
closeWindow();
}
});
$("a.fancybox").click(function() {
//get the name of the video from the parent div
videoname = $(this).parents("div:first").attr("id");
link = '"videos/'+videoname+'.mov'+'"'
tag = $(this).attr("href");
videotimer=setTimeout(function() { closeWindow(); },$(this).attr("id"));
videotimer=setTimeout(function() { playVideo(tag); },3);
});
$(".fancybox-close").live("click", function(){
console.log(videotimer) ;
clearTimeout(videotimer);
});
});//end document.ready
function closeWindow(){
console.log("video closed");
document.webkitCancelFullScreen();
parent.$.fancybox.close();
clearTimeout(videotimer);
}
function playVideo(tag){
console.log ("tag is "+tag);
$(tag).find('video').get(0).currentTime=0;
$(tag).find('video').get(0).play();
}
</script>
<!--div id="top_bar"></div-->
<div id="container">
<div id="top_bg">
<div id="header">
<img src="images/logo.png" alt="logo" />
<br />
<br />
<span class="gotham"> 6 Reasons </span>
<span class="gothamthin">we rock <sup>TM</sup>.
</span>
<!--a class="fancybox" rel="group" href="images/one.jpg"> <img width="25" height="25" src="images/logo.png" alt="" /></a-->
</div>
<div id="reasons_container">
<div class="sub_row">
<div id="play_all">
<a id="994000" class="highlight fancybox"
href="#videocontainerall"
onclick="goFullscreen('vidall')">play all</a>
</div>
</div>
<div class="reasons_row">
<div id="one" class="home_box featured_box">
<a id="9000" class="fancybox rollover_one rollover" rel="group" href="#videocontainerone" onclick="goFullscreen('vidone')">
<span class="reasontext reasontext1">REASON 1</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id ="two" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainertwo"
onclick="goFullscreen('vidtwo')">
<span class="reasontext reasontext1">REASON 2</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id="three" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group"
onclick="goFullscreen('vidthree')"
href="#videocontainerthree">
<span class="reasontext reasontext1">REASON 3</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
</div><!-- end reasons row -->
<div class="reasons_row">
<div id="four" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainerfour"
onclick="goFullscreen('vidfour')">
<span class="reasontext reasontext1">REASON 4</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id="five" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainerfive"
onclick="goFullscreen('vidfive')">
<span class="reasontext reasontext1">REASON 5</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc</span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
<div id="six" class="home_box featured_box">
<a id="5000" class="fancybox rollover_one rollover" rel="group" href="#videocontainersix"
onclick="goFullscreen('vidsix')">
<span class="reasontext reasontext1">REASON 6</span>
<span class="reasontext reasontext2">etc</span>
<span class="reasontext reasontext3">etc<sup>TM</sup></span>
<span class="reasontext reasontext4">PLAY</span>
</a>
</div>
</div><!-- end reasons row -->
</div><!-- end reasons container -->
</div><!-- end top bg -->
</div>
<div id="footer">
<div style="float:center; position:relative; margin:20px"> OUR PARTNERSHIPS </div>
<br />
<div id="partnerships_container">
<img src="images/logos.jpeg" />
</div>
</div><!-- end footer -->
<!-- The Video Objects -->
<!-- The Video Objects -->
<div id="videocontainerone" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidone" class="player" >
<source src="videos/one.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainertwo" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidtwo" class="player" >
<source src="videos/two.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerthree" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidthree" class="player" >
<source src="videos/three.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerfour" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidfour" class="player" >
<source src="videos/four.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerfive" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidfive" class="player" >
<source src="videos/five.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainersix" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidsix" class="player" >
<source src="videos/six.mov" type="video/mp4" >
</video>
</div>
</div>
<div id="videocontainerall" style="width:2560px; height:1240px; display:none; position:relative; top:0px;">
<div style="width:2560px; height:1240px; background:#fff">
<video width="2560" height="1240" id="vidall" class="player" >
<source src="videos/all.mov" type="video/mp4" >
</video>
</div>
</div>
<!-- END The Video Objects -->
<!-- END The Video Objects -->
</body>
</html>