点击图片video全屏
<!doctype html>
<html> <head>
<meta charset="utf-8" />
<title>全屏问题</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
* {
padding: 0px;
margin: 0px;
} body div.videobox {
width: 400px;
height: 320px;
margin: 100px auto;
background-color: #;
} body div.videobox video.video {
width: %;
height: %;
} :-webkit-full-screen {} :-moz-full-screen {} :-ms-fullscreen {} :-o-fullscreen {} :full-screen {} :fullscreen {} :-webkit-full-screen video {
width: %;
height: %;
} :-moz-full-screen video {
width: %;
height: %;
}
</style>
</head> <body> <div id="videobox">
<video controls="controls" preload="preload" id="video" poster="poster.jpg">
<source src="./video.ogg" type="video/ogg" />
<source src="./video.mp4" type="video/mp4" /> //最好把MP4格式的放在第一行 这样避免找不到上面的格式而报错
<source src="./video.webm" type="video/webm" />
<object data="./video.mp4" width="100%" height="100%"> //项目中发现在火狐中点击全屏播放后再推出全屏视频依然在播放，把这里的object标签删除后解决问题
<embed width="100%" height="100%" src="./movie.swf" />
</object>
</video>
<button id="fullScreenBtn">全屏</button>
</div> <script type="text/javascript">
//反复掉用
var invokeFieldOrMethod = function(element, method) {
var usablePrefixMethod;
["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
if(usablePrefixMethod) return;
if(prefix === "") {
// 无前缀，方法首字母小写
method = method.slice(, ).toLowerCase() + method.slice();
}
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) { //这里用来判断的是各个浏览器用来实现全屏的api（下面有介绍）
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();
}
}, * );
}, false);
</script>
</body> </html>
项目中借助amazeui解决ie浏览器中推出全屏播放后不能暂停的问题 <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script>
document.getElementById('fullScreenBtn').addEventListener('click', function() {
launchFullscreen(document.getElementById('video'));
document.getElementById('video').style.display = "block";
document.getElementById('video').play();
}, false);
document.addEventListener("webkitfullscreenchange",function(e) {
console.log('webkit');
if (!document.webkitIsFullScreen) { //退出全屏暂停视频
document.getElementById('video').pause();
};
}, false);
document.addEventListener('mozfullscreenchange', function(e){
console.log('moz');
//alert(1)
if (!document.mozFullScreen) { //退出全屏暂停视频
document.getElementById('video').pause();
};
}, false);
$(document).on($.AMUI.fullscreen.raw.fullscreenchange, function () {
console.log('change');
if (!!window.ActiveXObject || "ActiveXObject" in window) { //判断是否是ie浏览器
document.getElementById('video').pause();
};
});
相关属性：
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| preload | preload |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| width | pixels |
设置视频播放器的宽度。 |
| poster | xxx.jpg/ 图片地址 | 设置视屏没有播放之前显示的图片 |
全屏api拓展：
fullscreen API 接口
属性1：fullscreenElement 该属性返回当前处于全屏模式的DOM元素。
属性2：fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态。
方法1：requestFullscreen() 请求进入全屏模式。
方法2：exitFullscreen() 退出全屏模式。
事件1：fullscreenchange 进入/退出全屏模式切换时会触发。
事件2：fullscreenerror 进入/退出全屏模式失败时会触发。
由于fullscreen API 存在浏览器兼容性问题，所以我们在使用的时候需要进行跨浏览器处理，参考代码：
跨浏览器返回正处于全屏的元素
function fullscreenElement(){
var fullscreenEle = document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
//注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null
console.log("全屏元素："+fullscreenEle);
return fullscreenEle;
}
跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
function fullscreenEnable(){
var isFullscreen = document.fullscreenEnabled ||
window.fullScreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled;
//注意：要在用户授权全屏后才能准确获取当前的状态
if(isFullscreen){
console.log('全屏模式');
}else{
console.log('非全屏模式');
}
}
跨浏览器发动全屏
function lanchFullscreen(element){
if(element.requestFullscreen){
element.requestFullscreen();
}
else if(element.mozRequestFullScreen){
element.mozRequestFullScreen();
}
else if(element.msRequestFullscreen){
element.msRequestFullscreen();
}
else if(element.webkitRequestFullscreen){
element.webkitRequestFullScreen();
}
}
跨浏览器退出全屏
function exitFullscreen(){
if(document.exitFullscreen){
document.exitFullscreen();
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
else if(document.msExitFullscreen){
document.msExiFullscreen();
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
}
各浏览器fullscreenchange 事件处理
document.addEventListener('fullscreenchange', function(){ /*code*/ });
document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
document.addEventListener('mozfullscreenchange', function(){ /*code*/});
document.addEventListener('MSFullscreenChange', function(){ /*code*/});
各浏览器fullscreenerror 事件处理
document.addEventListener('fullscreenerror', function(){ /*code*/ });
document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
document.addEventListener('mozfullscreenerror', function(){ /*code*/);
document.addEventListener('MSFullscreenError', function(){ /*code*/ });
跨浏览器全屏模式下样式代码
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
【css伪类】
:fullscreen – 当前全屏化的元素
:fullscreen-ancestor – 所有全屏化元素的祖先元素
【标签属性】
<iframe width=”640″ height=”360″ src=”” allowfullscreen=””></iframe>
相关注意事项：
1）在safari和chrome下，全屏后的元素全自动全屏居中，且背景色变为黑色。我尝试过通过给body设背景色来改变下背景色的颜色，失败。在firefox下，全屏后的背景色为全屏那个元素的背景色，且元素并不居中。如果给body调全屏，在webkit内核的浏览器下和按11进入的全屏效果差得很远，主要是背景色问题，而firefox下则效果接近于f11全屏——当然还是有区别，比如进入全屏的动画过程就不相同。
2）退出全屏是通过给document来调来cancelFullScreen方法，但如果想让页面所有元素全部进入全屏的话，不能给document调requestFullScreen，只能给body调。
3）onFullScreenChange事件的回调，在safari里不能写alert，如果写alert，点击后会自动退出全屏。
4）按f11进入的全屏，onFullScreenChange事件不会响应。
5）进入全屏一定要点击某个节点，不能直接调进入全屏api。mouseover、mousemove等接近onload的事件也不行。click、mousedown、mouseup事件可以。策略应该同window.open应该是一样的。
6）ios暂不支持全屏api。
这里有更加详细的介绍：http://blog.csdn.net/tywali/article/details/8623938
这里有一个问题，就是一般要的效果是当你点击完图片以后出现的视屏应该自动的播放，上面的autoplay属性只能在视屏框架没有加载完成的情况下才有效，就是说你必须要加在html里面才行
<video src="video.mp4" controls="controls" autoplay="autoplay" id="video" poster="poster.jpg">
你要是想动态添加autoplay属性的话是不生效的
document.getElementById('fullScreenBtn').addEventListener('click', function() {
document.getElementById('video').setAttribute('autoplay','autoplay') //这里就是点击一个按钮图片或者一个什么元素来动态添加autoplay属性
}, false);
像上面代码中通过点击事件动态的添加属性是不生效的，因为在你点击之前视屏框架就已经加载完成了，这样就达不到上面说的那种用户一点击弹出视屏后自动播放的效果，那么怎么解决这个问题
其实video提供了两个方法
var x = document.getElementById("myVideo");
function playVid()
{
x.play(); // 播放
}
function pauseVid()
{
x.pause(); //暂停
}
这样的话就可以解决上面说的那个问题，把上面的点击事件改一下就可以了
document.getElementById('fullScreenBtn').addEventListener('click', function() {
document.getElementById('video').play();
}, false);
还有里面用到的full screen的一些相关资料（补充上面提到的全屏api）：
1 element.requestFullScreen()
作用：请求某个元素element全屏
2
Document.getElementById(“myCanvas”).requestFullScreen()
这里是将其中的元素ID去请求fullscreen
3
退出全屏
document.cancelFullScreen()
4
Document.fullScreen
如果用户在全屏模式下，则返回true
5 document.fullScreenElement
返回当前处于全屏模式下的元素
下面的代码是开启全屏模式：
function fullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
下面的代码就是整个页面调用全屏模式
var html = document.documentElement;
fullScreen(html);
下面的则是对指定元素，比如
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);
如果要取消，同样：
// the helper function
function fullScreenCancel() {
if(document.requestFullScreen) {
document.requestFullScreen();
} else if(document .webkitRequestFullScreen ) {
document.webkitRequestFullScreen();
} else if(document .mozRequestFullScreen) {
document.mozRequestFullScreen();
}
} fullScreenCancel();
http://jackyrong.iteye.com/blog/1830273 具体介绍
amazeui里面的js插件里有一个全屏切换插件http://amazeui.org/javascript/fullscreen
之前项目中主页视屏的ie兼容问题就是用这个插件解决
点击图片video全屏的更多相关文章
- Android 实现九宫格、点击图片放大全屏浏览等
项目GitHub地址https://github.com/tikeyc/TNinePlaceGridView_Android https://github.com/tikeyc/TikeycAndro ...
- 【Python全栈-CSS】CSS实现网页背景图片自适应全屏
CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...
- 解决微信浏览器video全屏的问题
解决微信浏览器video全屏的问题 在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID ...
- H5 video全屏与取消全屏兼容
H5 video全屏与取消全屏各浏览器兼容, requestFullscreen()全屏方法,exitFullscreen()退出全屏方法.兼容各个浏览器与css3兼容一样加个前缀即可. // 全屏 ...
- Android浏览图片，点击放大至全屏效果
做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果.如下. 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Ac ...
- 解决微信video全屏的问题，不在本页面播放
在微信浏览器中使用video标签,点击播放会跳出本页面,自动进行全屏播放,原因是自动跳转到手机微信内置的浏览器中去播放去了!!! 在video中加上连个属性就好了,反正最近的一个项目,我是这样做的就好 ...
- CSS实现网页背景图片自适应全屏
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- CSS实现网页背景图片自适应全屏,自适应背景图片
一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...
- vue video全屏播放
需求: 1.视频为长方形,页面初始化打开为横屏全屏播放视频. 2.微信不支持自动播放,故自动播放需求删除. 方法: 1.vue-video-player插件 因需求较简单,仅要求播放本地一个视频,故未 ...
随机推荐
- Linux上部署多个tomcat端口设置
在Linux上部署多个tomcat主要是防止端口冲突的问题, tomcat服务器需配置三个端口才能启动,安装时默认启用了这三个端口,当要运行多个tomcat服务时需要修改这三个端口,不能相同.端口一: ...
- Oracle数据库，数字强制显示2位小数
在银行.财务等对数字要求敏感的系统中,数字的显示一般有着严格的要求.今遇到一个需求,如题,要求将数字以两位小数的格式显示,如果没有小数,则强制显示为0.例如:123.4 显示为 123.4012 ...
- Oracle RAC时间同步（NTP/CTSS）
1.RAC 相关时间同步(time synchronization)Oracle Grid可用两种方式进行时间同步1)基于OS的NTP2)基于clusterware的CTSS(Cluster Time ...
- 如何把一个杯子卖到上万元，不学你就OUT了
我们可以看看一个产品卖到多少钱需要占有什么样的资源: 第1种卖法:卖产品本身的使用价值,只能卖3元/个 如果你将他仅仅当一只普通的杯子,放在普通的商店,用普通的销售方法,也许它最多只能卖3元钱,还可能 ...
- Ubuntu 下matlab 查看memory函数
%Copyright (c) 2012, Michael Hirsch%All rights reserved.%%Redistribution and use in source and binar ...
- learning ddr mode register MR3
- linux系统监控与硬盘分区/格式化/文件系统管理
1.系统监控 1) 系统监视和进程控制的工具----> Top 与 free 类似于windows的资源管理器. 进程运行的三种状态: tips: 进程(Process)是计 ...
- body中的onload()函数和jQuery中的document.ready()有什么区别？
1.我们可以在页面中使用多个document.ready(),但只能使用一次onload(). 2.document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要 ...
- [BZOJ1588]营业额统计
Problem 每次给你一个数,找出前面的数与这个数的差的绝对值的最小值 Solution Splay Notice 找不到前驱和后继时,会出错. Code #include<cmath> ...
- 执行这些代码, Edit1只能输入数字,小数点和负号,负号和小数点只能输入一个,负号必须在最前,粘贴的数字必须完全正确.
执行这些代码, Edit1只能输入数字,小数点和负号,负号和小数点只能输入一个,负号必须在最前,粘贴的数字必须完全正确. type TForm1 = class(TForm) Edit1: TEdit ...