video 满屏显示_HTML5 video播放器全屏(fullScreen)方法实例-程序员宅基地
技术标签： video 满屏显示
首先来说，这个标题具有误导性，但这样设置改标题也是主要因为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);
智能推荐
ffmpeg-linux Makefile运行环境配置_makefile 使用ffmpeg -l-程序员宅基地
文章浏览阅读963次。/tmp/ccvTv2zi.o: In function `av_make_error_string':encode_video.c:(.text+0x24): undefined reference to `av_strerror'/tmp/ccvTv2zi.o: In function `encode':encode_video.c:(.text+0x79): undefined reference to `avcodec_send_frame'encode_video.c:(.text+0xc_makefile 使用ffmpeg -l
git tag常用命令_git tag 参数-程序员宅基地
文章浏览阅读4.8k次。创建tag$ git tag -a v0.1.0 -m “release 0.1.0 version”解释：创建附注标签时，参数-a即annotated的缩写，指定标签类型，后附标签名。参数m指定标签说明，说明信息会保存在标签对象中。查看tag列出当前仓库的所有标签$ git tag切换tag切换标签与切换分支命令相同$ git checkout [tagname]解..._git tag 参数
2018年8月12日，已经很没有写过博客了_2018 写博客的地方-程序员宅基地
文章浏览阅读215次。已经很久没有写过博客了，期间也只是断断续续的写过两三篇最近比较的烦躁，可能是因为在家里待久了把因为每天基本上没有在学习，所以感觉自己的生活过的不是很充实有时候真的感觉自己很颓废。这两天开始学习那个微信小程序，在看那个官网的开发文档，感觉还挺不错的以后有时间尽量每天都来写一篇感悟今日心得体会和学习收获的博客吧，字数不在多认清自己在进步就好。..._2018 写博客的地方
vue js 监听页面滚动触底 && 监听iframe滚动及触底 && 带你搞清 offsetHeight，scrollTop，scrollHeight区别_vue scrollheight-程序员宅基地
文章浏览阅读3.7k次。想要监听页面滚动是否触底，你要先搞清offsetHeight，scrollTop，scrollHeight区别，以及如何让应用，话不多说上代码????????offsetHeight： 它是包括padding、border、水平滚动条，但不包括margin的元素的高度。️：对于行内元素这个属性值一直是0，单位px，是只读元素。scrollTop：表示在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度即“卷”起来的高度。️：在无滚动条时scrollTop==0恒成立，单位_vue scrollheight
LOAD_TEMP - Unable to get database metadata from this database connection-程序员宅基地
文章浏览阅读1w次。关于kettle 写入mysql 遇到一个问题：LOAD_TEMP - Unable to get database metadata from this database connection，报错大致如下：2021/11/26 14:05:12 - LOAD_TEMP - ERROR (version 5.3.0.0-213, build 1 from 2015-02-02_12-17-08 by buildguy) : org.pentaho.di.core.exception.KettleDa_unable to get database metadata from this database connection
XPath详解_如何定义xpath-程序员宅基地
文章浏览阅读935次。XPath简介XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航什么是 XPath?XPath 使用路径表达式在 XML 文档中进行导航XPath 包含一个标准函数库XPath 是 XSLT 中的主要元素XPath 是一个 W3C 标准XPath 路径表达式XPath 使用路径表达式来选取 XML 文档中的节点或者节点集。这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似。XPath 标准函数XPath 含有超过 _如何定义xpath
随便推点
32.修改IK分词器源码来基于mysql热更新词库-程序员宅基地
文章浏览阅读230次。主要知识点， 修改IK分词器源码来基于mysql热更新词库 一、IK增加新词的原因 在第32小节中学习到了直接在es的词库中增加词语，来扩充自已的词库，但是这样做有以下缺点： （1）每次添加完，都要重启es才能生效，非常麻烦 （2）es是分布式的，可能有数百个节点，你不能每次都一个一个节点上面去修改 这一小节来学习让es不停机，直接在外部..._32ik
win10安装dcnv2_win10 dcnv2安装-程序员宅基地
文章浏览阅读1.2k次。亲自安装1 git download dcnv2网址：下载2 打开vs2153 cd 到dcn2下载的路径在窗口运行python setup build develop注意：torch 1.8的环境失败，本人试的是torch1.3_win10 dcnv2安装
最强PostMan使用教程（1）-程序员宅基地
文章浏览阅读10w+次，点赞235次，收藏993次。最近需要测试产品中的REST API，无意中发现了PostMan这个chrome插件，把玩了一下，发现postman秉承了一贯以来google工具强大，易用的特质。独乐乐不如众乐乐，特此共享出来给大伙。Postman介绍Postman是google开发的一款功能强大的网页调试与发送网页HTTP请求，并能运行测试用例的的Chrome插件。其主要功能包括：模拟各种HTTP requests从常用的_postman
PTA 单链表结点删除_pta带头结点的有序单链表插入及删除。-程序员宅基地
文章浏览阅读2.4k次。本题要求实现两个函数，分别将读入的数据存储为单链表、将链表中所有存储了某给定值的结点删除。链表结点定义如下：struct ListNode { int data; ListNode *next;};函数接口定义：struct ListNode *readlist();struct ListNode *deletem( struct ListNode *L, i..._pta带头结点的有序单链表插入及删除。
"session marked for kill " 处理杀不掉的锁，立即释放会话资源-程序员宅基地
文章浏览阅读7.9k次，点赞4次，收藏12次。ORA-00031: session marked for kill 处理Oracle中杀不掉的锁最近遇到，ORACLE中的进程被杀掉后，状态被置为"killed"，但是锁定的资源很长时间不释放 现在提供一种方法解决这种问题，那就是在ORACLE中杀不掉的，在OS一级再杀。 1.下面的语句用来查询哪些对象被锁： SELECT S.USERNAME,S.OSUSER,S._session marked for kill
git命令-笔记_git show current-程序员宅基地
文章浏览阅读205次。1 下载地址Windows版本：https://git-scm.com/download/winGit-2.29.1-64-bit.exe 2.29.12 相关命令2.1 基本git init 初始化代码仓库git status 查询仓库索引状态git add <文件名/目录> 添加文件到仓库git config --global user.email “[email protected]” 配置全局的提交者邮箱git config --global user.name “Y_git show current