分享

html5 video andorid(安卓)系统 全屏播放视频代码实现

 andorcba 2015-08-25
IOS系统在播放视频时,能够默认全屏播放视频,但在安卓系统下却不能够直接默认全屏,通过以下代码,可以让android系统也能够默认全屏播放视频。

代码如下:


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('play',function(){
        this.play();
        video[fullscreenvideo]();
    },false)

    video.addEventListener('ended',function(){
        doc.webkitCancelFullScreen(); //播放完毕自动退出全屏
    },false);

};
var video = document.getElementById('videoId');
autoFullScrenn(video);

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多