美文网首页
HTML5 video播放器全屏(fullScreen)方法实例

HTML5 video播放器全屏(fullScreen)方法实例

作者: 第九jiu | 来源:发表于2016-11-28 22:54 被阅读0次

    HTML5 video播放器全屏(fullScreen)方法实例

    首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多

    在html5中,全屏方法可以适用于很多html 元素,不仅仅是video

    代码如下:

    全屏问题

    *{

    padding:  0px;

    margin: 0px;

    }

    body div.videobox{

    width: 400px;

    height:  320px;

    margin: 100px auto;

    background-color:#000;

    }

    body  div.videobox video.video

    {

    width: 100%;

    height:  100%;

    }

    :-webkit-full-screen {

    }

    :-moz-full-screen  {

    }

    :-ms-fullscreen {

    }

    :-o-fullscreen  {

    }

    :full-screen {

    }

    :fullscreen  {

    }

    :-webkit-full-screen video {

    width: 100%;

    height:  100%;

    }

    :-moz-full-screen video{

    width: 100%;

    height:  100%;

    }

    全屏

    //反射調用

    var invokeFieldOrMethod =  function(element, method)

    {

    var usablePrefixMethod;

    ["webkit", "moz",  "ms", "o", ""].forEach(function(prefix) {

    if (usablePrefixMethod)  return;

    if (prefix === "") {

    // 无前缀,方法首字母小写

    method =  method.slice(0,1).toLowerCase() + method.slice(1);

    }

    var typePrefixMethod  = typeof element[prefix + method];

    if (typePrefixMethod + "" !== "undefined")  {

    if (typePrefixMethod === "function") {

    usablePrefixMethod =  element[prefix + method]();

    } else {

    usablePrefixMethod = element[prefix +  method];

    }

    }

    });

    return  usablePrefixMethod;

    };

    //進入全屏

    function launchFullscreen(element)

    {

    //此方法不可以在異步任務中執行,否則火狐無法全屏

    if(element.requestFullscreen)  {

    element.requestFullscreen();

    } else if(element.mozRequestFullScreen)  {

    element.mozRequestFullScreen();

    } else if(element.msRequestFullscreen){

    element.msRequestFullscreen();

    } else  if(element.oRequestFullscreen){

    element.oRequestFullscreen();

    }

    else  if(element.webkitRequestFullscreen)

    {

    element.webkitRequestFullScreen();

    }else{

    var  docHtml = document.documentElement;

    var docBody = document.body;

    var  videobox = document.getElementById('videobox');

    var cssText =  'width:100%;height:100%;overflow:hidden;';

    docHtml.style.cssText =  cssText;

    docBody.style.cssText = cssText;

    videobox.style.cssText =  cssText+';'+'margin:0px;padding:0px;';

    document.IsFullScreen =  true;

    }

    }

    //退出全屏

    function exitFullscreen()

    {

    if  (document.exitFullscreen) {

    document.exitFullscreen();

    } else if  (document.msExitFullscreen) {

    document.msExitFullscreen();

    } else if  (document.mozCancelFullScreen) {

    document.mozCancelFullScreen();

    } else  if(document.oRequestFullscreen){

    document.oCancelFullScreen();

    }else if  (document.webkitExitFullscreen){

    document.webkitExitFullscreen();

    }else{

    var  docHtml = document.documentElement;

    var docBody = document.body;

    var  videobox = document.getElementById('videobox');

    docHtml.style.cssText =  "";

    docBody.style.cssText = "";

    videobox.style.cssText =  "";

    document.IsFullScreen =  false;

    }

    }

    document.getElementById('fullScreenBtn').addEventListener('click',function(){

    launchFullscreen(document.getElementById('video'));

    window.setTimeout(function  exit(){

    //檢查瀏覽器是否處於全屏

    if(invokeFieldOrMethod(document,'FullScreen') ||  invokeFieldOrMethod(document,'IsFullScreen') ||  document.IsFullScreen)

    {

    exitFullscreen();

    }

    },5*1000);

    },false);


    相关文章

      网友评论

          本文标题:HTML5 video播放器全屏(fullScreen)方法实例

          本文链接:https://www.haomeiwen.com/subject/sxoopttx.html