点击图片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插件 因需求较简单,仅要求播放本地一个视频,故未 ...
随机推荐
- leetcode-algorithms-5 Longest Palindromic Substring
leetcode-algorithms-5 Longest Palindromic Substring Given a string s, find the longest palindromic s ...
- 使用antd-mobile的ImagePicker组件实现图片的上传
这篇文章主要是记录一下在开发钉钉微应用时,实现图片上传及显示功能的过程. 这个项目用的dingyou-dingtalk-mobile这个脚手架,可直接在NowaGui上创建.这是一个关于钉钉微应用的脚 ...
- mongodb副本集修改配置问题
因虚拟机地址被占用,需要重新设置ip地址,这时需要修改副本集中的IP地址配置: 1: 查看配置rs.config():需要找到primary主机,在该主节点服务器上才有权限修改配置 2:rs.remo ...
- Git：创建远程仓库并推送内容到远程库
1.添加远程仓库 1.1点击该按钮创建一个新仓库 2.推送到远程仓库 2.1根据GitHub的提示,在本地的learngit仓库下运行命令git remote add origin https://g ...
- Android 常用动画
一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha :渐变透明度动画效果 scale :渐变尺寸伸缩 ...
- vim 文本会在末尾自动添加换行 md5文件和数据只不对应
在linux系统 vim md5data # 打开文件 写入 abc 保存 md5sum md5Data 的计算值和openssl代码计算值不一样 原因在于linux文本文件末尾自动添加了换行 解 ...
- 外部调用mvc的api方法时，如何解决跨域请求问题？
首先,创建一个mvc项目(包含webapi),我们模拟一个场景 1)在项目的Controller 创建一个WeiXinApiController public class WeiXinApiContr ...
- linux下查看运行进程详细信息
通过ps及top命令查看进程信息时,只能查到相对路径,查不到的进程的详细信息,如绝对路径等.这时,我们需要通过以下的方法来查看进程的详细信息: Linux在启动一个进程时,系统会在/proc下创建一个 ...
- 网口扫盲二:Mac与Phy组成原理的简单分析
1. general 下图是网口结构简图.网口由CPU.MAC和PHY三部分组成.DMA控制器通常属于CPU的一部分,用虚线放在这里是为了表示DMA控制器可能会参与到网口数据传输中. MAC(Medi ...
- Java的Properties类使用
一.Java Properties类 Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件,配置 ...