zoukankan      html  css  js  c++  java
  • video视频点击全屏播放设置

    // 反射調用
    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('video');
        var cssText = '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('video');
        docHtml.style.cssText = "";
        docBody.style.cssText = "";
        videobox.style.cssText = "";
        document.IsFullScreen = false;
      }
    }
    document.getElementById('video_play').addEventListener('click',function(){
      launchFullscreen(document.getElementById('video'));
      window.setTimeout(function exit(){
        //檢查瀏覽器是否處於全屏
        if(invokeFieldOrMethod(document,'FullScreen') || invokeFieldOrMethod(document,'IsFullScreen') || document.IsFullScreen){
          exitFullscreen();
        }
      },5*1000);
    },false);

  • 相关阅读:
    程序员的7中武器
    需要强化的知识
    微软中国联合小i推出MSN群Beta 不需任何插件
    XML Notepad 2006 v2.0
    Sandcastle August 2006 Community Technology Preview
    [推荐] TechNet 广播 SQL Server 2000完结篇
    《太空帝国 4》(Space Empires IV)以及 xxMod 英文版 中文版 TDM Mod 英文版 中文版
    IronPython 1.0 RC2 更新 1.0.60816
    Microsoft .NET Framework 3.0 RC1
    《Oracle Developer Suite 10g》(Oracle Developer Suite 10g)V10.1.2.0.2
  • 原文地址:https://www.cnblogs.com/Jason-qiang/p/8629076.html
Copyright © 2011-2022 走看看