video 全屏,播放,隐藏控件。

requestFullscreen全屏具体实现

1.进入全屏
function full(ele) {
      if (ele.requestFullscreen) {
          ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullscreen) {
          ele.webkitRequestFullscreen();
      } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen();
      }
}

ele:要全屏的元素,可以是document.body也可以是某一个div
思路:
1.判断该浏览器是否具有requestFullscreen方法
2.有,则直接执行ele.requestFullscreen();没有则做浏览器兼容判断。

2.exitFullScreen退出全屏
function exitFullscreen() {
    if(document.exitFullScreen) {
        document.exitFullScreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

退出全屏直接使用document调用exitFullscreen方法即可。

3.获取当前全屏的节点
function getFullscreenElement() {
    return (
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullScreenElement ||
        document.webkitFullscreenElement||null
    );
}

document.fullscreenElement():获取当前全屏的元素。
假设id为div1的Element当前为全屏状态则 document.querySelector("#div1")===document.fullscreenElement

4.判断当前是否全屏
function isFullScreen() {
  return  !! (
      document.fullscreen ||
      document.mozFullScreen ||
      document.webkitIsFullScreen ||
      document.webkitFullScreen ||
      document.msFullScreen
   );
}
5.判断当前文档是否能切换到全屏
function isFullscreenEnabled() {
    return  (
        document.fullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.msFullscreenEnabled
    );
}

注意事项:

1.document下没有requestFullscreen
2.requestFullscreen方法只能由用户触发,比如:在onload事件中不能触发
3.页面跳转需先退出全屏
4.进入全屏的元素,将脱离其父元素,所以可能导致之前某些css的失效
解决方案:使用 :full-screen伪类 为元素添加全屏时的样式(使用时为了兼容注意添加-webkit、-moz或-ms前缀)
5.一个元素A全屏后,其子元素要再全屏,需先让元素A退出全屏

 单击播放/暂停。

function onDocumentClick(event) {    clearTimeout(clickTimeId);    //执行延时    clickTimeId = setTimeout(function() {        //此处为单击事件要执行的代码        if(video.paused){            video.play();        }else{            video.pause();        }    }, 250);}双击全屏/解除全屏function onDocumenDblClick(event) {    clearTimeout(clickTimeId);    console.log("鼠标双击");    console.log(isFullScreen())    if(isFullScreen()){        exitFullscreen()    }else{        full(video)    }

}

隐藏vedio控件 css :
video::-webkit-media-controls{    display:none !important;}

原文地址:https://www.cnblogs.com/blueball/p/11169486.html

时间: 2024-10-03 22:33:05

video 全屏,播放,隐藏控件。的相关文章

Chromium为视频标签<video>全屏播放的过程分析

在Chromium中,<video>标签有全屏和非全屏两种播放模式.在非全屏模式下,<video>标签播放的视频嵌入在网页中显示,也就是视频画面作为网页的一部分显示.在全屏模式下,我们是看不到网页其它内容的,因此<video>标签播放的视频可以在一个独立的全屏窗口中显示.这两种截然不同的播放模式,导致Chromium使用不同的方式渲染视频画面.本文接下来就详细分析<video>标签全屏播放的过程. 从前面Chromium为视频标签<video>渲

VC++对话框(CDialog)的全屏显示及控件居中显示

在编写一些软件时,我们会比较偏向于比较简洁.清新的用户界面,同时为了避免其它程序或者桌面等影响使用者的注意力等,我们通常习惯将软件界面全屏,布满整个显示屏幕,与此同时,我们也将对界面中的控件位置进行相应的调整,让它们按屏幕的大小和其在对话框中的相对位置,居中显示. 下面结合实例说明(完整实例可在我的CSDN资源中下载:http://download.csdn.net/detail/margin1988/8337049): 在对话框的初始化函数OnInitDialog()中分三步作如下的操作: (

video 全屏时 隐藏controls

1. 参考:“http://www.cnblogs.com/kite-Runner/p/4254709.html” 指定全屏时的css风格: video::-webkit-media-controls { display:none !important; }

audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题

(一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xxx.mp4"></video> (三)使用video代替audio (1) 有时候audio标签被屏蔽,不能被浏览器解释通过,可以选择使用video来代替: <video src="xxx.mp3"></video> (2) 若想要将音乐

完美解决微信video视频隐藏控件和内联播放问题

众所周知,微信浏览器下的html5视频播放兼容性一直是很头疼的问题,其中两个最主要的问题是隐藏播放控件和内联播放,在ios系统下这两个功能还比较好实现,重点是在android端,今天就给大家提供一个比较特殊的方法. 先看一下html代码格式: <div class="videoBox"> <i class="fa fa-play-circle-o"></i> <video id="video" x5-vi

解决微信video全屏的问题,不在本页面播放

在微信浏览器中使用video标签,点击播放会跳出本页面,自动进行全屏播放,原因是自动跳转到手机微信内置的浏览器中去播放去了!!! 在video中加上连个属性就好了,反正最近的一个项目,我是这样做的就好了, <video id="videoID"webkit-playsinline="true" x-webkit-airplay="true"  playsinline="true"x5-video-player-type=

android webview 全屏播放H5 (Playing HTML5 video on fullscreen in android webview)

最近关于webview的问题遇到的比较多,关于如何在webview中全屏播放视频,网上有很多种解决方法,这里也有一种方法,试了几种后发现还是这种比较好用. 这里就拿出来与大家分享,出自http://stackoverflow.com/questions/15768837/playing-html5-video-on-fullscreen-in-android-webview#userconsent# 代码里面已经有很好的注释了,我就不画蛇添足了. VideoEnabledWebChromeCli

html-----vedio标签(HTML5新标签VIDEO在IOS上默认全屏播放)

今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然后几经波折终于找到其解决的方法了,在video标签下的source中加入这个-webkit-playsinline=true完美解决全屏问题. 例如: <video width="100%" loop="loop" autoplay controls="

HTML5新标签video在iOS上默认全屏播放

今天做一个app时发现一个问题,应用html5中的video标签加载视频,在Android手机上默认播放大小,但是换成iPhone手机上出问题了,默认弹出全屏播放,查找了好多论坛,都没有谈论这个的.然后几经波折终于找到其解决的方法了,在video标签下的source中加入这个-webkit-playsinline=true完美解决全屏问题. 例如: <video width="100%" loop="loop" autoplay> <source

H5.video在微信中禁止全屏播放视频和直播流

这段时间在做一个直播项目,有直播需求,也有视频播放需求,要求能在微信中以半屏的方式播放,另外半屏可以做一些操作,还有些组件需要悬浮在视频上方.网上各种扒拉,各种实验,以求在微信中实现不全屏就能播放和自动播放,最终还是用了单纯的video标签.自动播放到目前还是没找到完美的解决方法. 非全屏播放视频 <video loop autoPlay src={url} controls={true} poster={pic} playsinline webkit-playsinline x5-video-