1

私は、27 インチ iMac、OSX Lion を使用する会議の準備をしているキオスクを持っています。ブラウザはクロームです。ライトボックスを使用してクイックタイム ビデオを表示しています。私が使っているライトボックスは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 によって開かれますが、必要なのは実際にはクイックタイムの設定や埋め込みオプションを微調整することだと思います。しかし、ビデオを開くための js は単純です: document.ready で私はただ行う:

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

どんな助けでも大歓迎です！前もって感謝します。

編集: この 2006 年の記事で指示されているように、.htaccess ファイルと .qtl ファイルを作成しようとしました: http://www.kenvillines.com/archives/82.html と、映画をプルアップしますが、まだ自動ではありません全画面表示。これに答えた方にはビールをプレゼント！
ありがとう。

4

1 に答える 1

0

だから私は答えを見つけました。一言で言えば：

ターゲット動画をdisplay：none divに配置し、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>
于 2012-10-12T21:39:02.833 に答える