js全螢幕及音樂控制問題

edited 十月 2013 in Javascript

問題範例:https://www.dropbox.com/sh/se50ryi0igb4n16/K5aT3AslIS/qq.rar

Q1:如何讓網頁一開啟就呈現全螢幕?
在範例aa.html裡我的寫法是
<script language="JavaScript">
window.moveTo(0, 0);
window.resizeTo(window.screen.availWidth, window.screen.availHeight);
</script>
但只有IE成功,其他像chrome. firefox. opera都不會自動全螢幕...

Q2.音樂控制問題
先說說我想呈現的效果
範例aa.html打開後會播放背景音樂a.mp3
點選連結"播放音樂B"會開一個新視窗
這時音樂a.mp3會關閉改播b.mp3
當關閉新視窗後
音樂又會從b.mp3改回a.mp3
可以用IE看看,IE可以順利執行
但除了IE其他瀏覽器都沒有成功.....

chrome--
一開啟頁面a.mp3和b.mp3都開始播,我明明關閉b.mp3的自動播放功能,為什麼會這樣???
而且關閉"播放音樂B"的視窗後,並沒有執行母視窗的函式

firefox--
沒有出現背景音樂....但關閉"播放音樂B"的視窗後,有執行母視窗的函式alert

opera--
沒出現音樂,關閉"播放音樂B"的視窗,也沒有執行母視窗的函式....

請幫幫我
應該怎麼解決這些問題:'(

原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=6932

評論

  • edited 九月 2012
    非 ie 的全螢幕作法:
    http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities
    function goFullscreen(id) {
        // Get the element that we want to take into fullscreen mode
        var element = document.getElementById(id);
        
        // These function will not exist in the browsers that don't support fullscreen mode yet, 
        // so we'll have to check to see if they're available before calling them.
        
        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!
      }
    

    音樂的控制看這個:
    http://stackoverflow.com/questions/6426368/best-way-to-embed-audio-in-a-webpage
    <audio id="background_audio" autoplay="autoplay">
      <source src="static/audio/clip.ogg" type="audio/ogg" />
      <source src="static/audio/clip.mp3" type="audio/mpeg" />
    </audio> 
    
    <![if (!IE)|(gte IE 9)]>
    <a href="#" onclick="document.getElementById('background_audio').muted = true; return false">mute sound</a>
    <![endif]>
    
    <!--[if lt IE 9]>
    <bgsound id="background_snd" src="static/audio/clip.mp3" autostart="true" loop="1">
    <a href="#" onclick="document.all['background_snd'].src=''; return false">mute sound</a>
    <![endif]-->
    
  • edited 九月 2012
    kiang 非常感謝您的回覆 :-)
    但這支API似乎需要點擊物件後才會開啟螢幕
    而且IE不支援 :-(

    我現在試著用全視窗呈現
    寫法是
    <script language="JavaScript"> window.open("home.htm","","width="+screen.width+",height="+screen.height +",left=0,top=0");
    window.open('','_parent','');
    window.opener = null;
    window.close();
    </script>
    
    透過index.htm呼叫home.htm來另開一個無工作列、動態列的乾淨視窗
    但在chrome和firefox下都會把home.htm攔截掉
    請問有辦法避免這個問題嗎??
  • edited 九月 2012
    基本上彈出視窗預設被擋掉是常見的,可以偵測瀏覽器來選擇不同方式
Sign In or Register to comment.