js-控制视频播放的全屏开启或者关闭

js-控制视频播放的全屏开启或者关闭

 

//進入全屏
 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;
    }
  }

// 点击开启视频
	var Media = document.getElementById('media-play');
	$('.play-btn').click(function(){
		Media.play();
		$('.video-wrap').fadeIn();
        // 开启全屏
		launchFullscreen(document.getElementById('media-play')); 
	});

    // 点击暂停关闭全屏
	$('#media-play').click(function(event) {
		exitFullscreen();
	});

 

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的示例代码,实现了在刷新或打开 HTML 时播放视频视频全屏播放播放一遍完关闭并隐藏的 JS 代码: ```html <!DOCTYPE html> <html> <head> <title>视频播放示例</title> </head> <body> <video id="myVideo" controls autoplay> <source src="myVideo.mp4" type="video/mp4"> <source src="myVideo.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <script> var myVideo = document.getElementById("myVideo"); myVideo.addEventListener('ended', function() { myVideo.style.display = 'none'; }, false); myVideo.addEventListener('click', function() { if (myVideo.requestFullscreen) { myVideo.requestFullscreen(); } else if (myVideo.msRequestFullscreen) { myVideo.msRequestFullscreen(); } else if (myVideo.mozRequestFullScreen) { myVideo.mozRequestFullScreen(); } else if (myVideo.webkitRequestFullscreen) { myVideo.webkitRequestFullscreen(); } }, false); </script> </body> </html> ``` 在这个示例中,我们使用了 `video` 标签来播放视频,并为其添加了 `controls` 和 `autoplay` 属性,分别用于显示控制条和自动播放。我们使用了 JavaScript 代码来处理视频播放结束事件 `ended`,在视频播放结束时关闭并隐藏视频。我们还使用了 `click` 事件来处理视频全屏播放,使用了不同浏览器的前缀来兼容不同的浏览器。 注意:在实际应用中,视频播放全屏播放可能会受到一些限制或需要用户的操作,例如自动播放可能会被浏览器禁止,全屏播放也可能需要用户的授权。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值