安卓手机HTML5 video全屏播放实例代码-百分百源码网

安卓手机HTML5 video全屏播放实例代码

发布时间：01/15 来源：浏览：关键词：

下面给大家看一段安卓手机HTML5 video全屏播放实例代码，这段代码测试过android系统手机哦，当然还有不少手机不兼容是因为手机浏览器不支持html5导致的哦。

有的需求是视频自动全屏播放，这一点在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>

打赏