2012-10-11 88 views
1

我有一個自動售貨亭,我正在準備使用27英寸iMac,OSX獅子會議。瀏覽器是Chrome。我正在使用Lightbox來顯示快速視頻。我使用的燈箱是fancybox。你如何強制quicktime全屏鍍鉻

當一個視頻出現在燈箱中時,我將燈箱編程爲「全屏」,這是顯示器的大小,但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很簡單:在的document.ready 我只是做:

$(".fancybox").fancybox({ 
    frameWidth: 2560, 
    frameHeight: 1240, 
    overlayShow: true, 
    overlayOpacity: 0.7 
}); 

任何幫助,將不勝感激!先謝謝你。

編輯: 我試圖創建一個.htaccess文件和文件.qtl的指示,這個2006文章: http://www.kenvillines.com/archives/82.html ,它並拉起電影,但仍沒有自動全屏。 任何回答此問題的人都會得到一杯啤酒!
謝謝。

+0

一些討論,在這裏 - https://discussions.apple.com/thread/2000464?start=0&tstart=0 – jedierikb

+0

感謝您的鏈接....它指向相同的「.qtl」戰略我在上一篇文章的最後一次編輯中嘗試過。仍然不會全屏。這似乎是一個衆所周知的問題。我會願意使用quicktime之外的另一種嵌入方法。我會做任何有效的工作!感謝指針,但仍然不是基於該線程的解決方案。 – Shem

+0

也許嘗試流動播放器 - 良好的視頻標籤支持 – jedierikb

回答

0

所以我找到了答案。簡而言之:

通過放置目標視頻來工作:無divs並使用href鏈接到各種視頻的#videoone,#videotwo等,並使用fancybox插件進行操作。

自從它在信息亭內運行以來,我將視頻格式更改爲HTML5。

對於全屏效果,我使用了element.webkitRequestFullScreen();在html5視頻元素本身,它仍然使用fancybox,但把它放在全屏(我的意思是VIDEO ITSELF是全屏,這是我想要的)。我希望得到縮進權,我通常不會發布這麼多的代碼,但它很有用。)....希望這可以幫助某人。

<!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>