首頁 > 開發者 > Android

安卓手機HTML5 video全屏播放執行個體代碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

有的需求是視頻自動全屏播放，這一點在iphone上是預設的。但是在android系統上就需要手動點擊全屏按鈕。現在video標籤的全屏API一直在草案階段，各個瀏覽器的API也是差異。所幸的是現在大部分的手機瀏覽器核心都是webkit的。所以可以藉助瀏覽器的全屏API來實現視頻的全屏，當然瀏覽器的全屏API並不局限於video標籤。在PC端處理video可以使用一個比較成熟的外掛程式videojs。所以這次代碼僅針對移動端。從網上借鑒了一些代碼，我自己精簡掉了一些移動端用不到的代碼。並添加了“全屏後自動播放”、“退出全屏後暫停”以及“播放完畢後自動結束全屏”這三個事件。目前測試了3部android手機，其中一部“全屏後自動播放”不支援。為了方便在PC測試暫時注釋掉了系統的判斷。在使用的時候放出即可。

 代碼如下 複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">  
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        video{
            display:block;
            margin:0 auto;
            max-width:100%;
        }
 
    </style>
</head>
<body>
    <video id="video" src="oceans.mp4" controls></video>
    <script type="text/javascript">
        var fullscreen = function(elem) {
            var prefix = 'webkit';
              if ( elem[prefix + 'EnterFullScreen'] ) {
                return prefix + 'EnterFullScreen';
              } else if( elem[prefix + 'RequestFullScreen'] ) {
                return prefix + 'RequestFullScreen';
              };
            return false;
        };
        function autoFullScrenn(v){
            var ua   = navigator.userAgent.toLowerCase(); 
            var Android = String(ua.match(/android/i)) == "android";
            // if(!Android) return;//非android系統不使用;
            var video  = v,doc = document;
            var fullscreenvideo = fullscreen(doc.createElement("video"));
            if(!fullscreen) {
                alert("不支援全螢幕模式");
                return;
            }
            video.addEventListener("webkitfullscreenchange",function(e){
                if(!doc.webkitIsFullScreen){//退出全屏暫停視頻
                    this.pause();
                };
            }, false);
            video.addEventListener("click", function(){
                this.play();
                video[fullscreenvideo]();
            }, false);
 
            video.addEventListener('ended',function(){
                doc.webkitCancelFullScreen(); //播放完畢自動結束全屏
            },false);
 
        };
        var v = document.getElementById('video');
        autoFullScrenn(v);
       
   
 
    </script>
 
 
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More