HTML5实现浏览器播放全屏模式!


先写点css样式:

*{margin:0;padding:0}

      .btn1{

                 position:absolute;right:0;bottom:0;

                  z-index:23;

       }

       .div1{

              position:relative;z-index:1;

              width:423px;

              height:230px;

         }

这是全屏的封装函数:

function   aaa(element){

         if(element.requestFullscreen){

                   element.requestFullscreen();

         }else if(element.mozRequestFullScreen){

                   element.mozRequestFullscreen();

         }else if(element.webkitRequestFullscreen){

                   element.webkitRequestFullscreen();

         }else if(element.msRequestFullscreen){

                  element.msRequestFullscreen();

         }

}

这是缩小的封装函数:

function   bbb(){

          if(document.exitFullscreen){

                document.exitFullscreen();

          }else if(document.mozExitFullscreen){

               document.mozExcitFullscreen();

           }else if(document.webkitExitFullscreen){

               document.webkitExitFullscreen();

          }

}

函数调用

window.onload=function(){

         varoV=document.getElementById('ov');

         varoBtn=document.getElementById('btn1');

        oBtn.onclick=function(){

              aaa(document.getElementById('ov'));

         };

         oV.ondblclick=function(){

             bbb();

         };

};

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,808评论 2 17
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,887评论 0 1
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,092评论 1 10
  • 有时我们在 App 中提交一些统计信息或者用户反馈信息时,为了能更好地进行分析,通常会附带上当前应用程序的名称、版...
    高高叔叔阅读 459评论 0 2
  • 我是一个只要喜欢做事就不分主次的人,一旦喜欢这件事就会放下重要的事也会一心只想做自己喜欢的事,这不是发现了简书软件...
    马金戈阅读 92评论 0 0