ie浏览器无法全屏
来源:4-5 video-javascript(2)
王文辉
2020-11-25 23:22:57
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义视频播放器</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.outerNode{
width: 540px;
height: 332px;
position: absolute;
left: 50%;
top: 50%;
margin:-166px 0 0 -270px;
/* border: 1px solid black; */
box-shadow: 0 0 4px #5d606d;
line-height: 0;
}
.outerNode .videoNode{
width: 540px;
height: 305px;
float: left;
display: block;
background: black;
}
.outerNode .controlsNode{
width: 540px;
height: 27px;
background: url(images/ctrs_bg.gif) repeat;
float: left;
}
.outerNode .controlsNode .playNode{
width: 15px;
height: 17px;
margin: 6px 0 0 14px;
background: url(images/playNode.png) no-repeat;
cursor: pointer;
float: left;
}
.outerNode .controlsNode .pauseNode{
width: 15px;
height: 17px;
margin: 4.5px 0 0 14px;
background: url(images/pause.png) no-repeat;
cursor: pointer;
float: left;
}
.outerNode .controlsNode .loadNode{
width: 267px;
height: 10px;
margin: 9px 0 0 14px;
float: left;
background: url(images/load_bg.png) repeat-x;
position: relative;
}
.outerNode .controlsNode .loadNode .loadLeft{
height:100%;
width:3px;
background: url(./images/left_bg.png) no-repeat;
position: absolute;
left: 0;
top: 0;
}
.outerNode .controlsNode .loadNode .loadRight{
height:100%;
width:3px;
background: url(./images/right_bg.png) no-repeat;
position: absolute;
right: 0;
top: 0;
}
.outerNode .controlsNode .loadNode .crlNode{
width: 17px;
height: 17px;
background: url(images/crl_bg.png) no-repeat;
position: absolute;
left: -8.5px;
top: -3px;
cursor: pointer;
}
.outerNode .controlsNode .timeNode{
float: left;
width: 55px;
height: 10px;
margin: 9px 0 0 9px;
}
.outerNode .controlsNode .timeNode span{
font-size: 10px;
line-height: 10px;
color: white;
float: left;
}
.outerNode .controlsNode .volumeNode{
width: 17px;
height: 16px;
float: left;
margin: 5px 0 0 16px;
background: url(images/volume_bg.png);
}
.outerNode .controlsNode .volumeLine{
width: 61px;
height: 8px;
float: left;
margin: 10px 0 0 4px;
background: url(images/volumeLine_bg.png) repeat-x;
position: relative;
}
.outerNode .controlsNode .volumeLine .v_left{
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 0;
background: url(images/v_left.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_right{
position: absolute;
height: 100%;
width: 3px;
top: 0;
right: 0;
background: url(images/v_right.png);
}
.outerNode .controlsNode .volumeLine .v_dragNode{
width: 15px;
height: 13px;
position: absolute;
left: -2.5px;
top: -2.5px;
background: url(./images/vo_d.png) no-repeat;
cursor: pointer;
}
.outerNode .controlsNode .fullNode{
width:15px;
height: 17px;
float: left;
margin: 6px 0 0 50px;
background: url(images/full_bg.png) no-repeat;
transition: 0.7s;
}
.outerNode .controlsNode .fullNode:hover{
background: url(images/full_hover_bg.png) no-repeat;
}
</style>
<body>
<!-- 最外层的元素 -->
<div class="outerNode">
<!-- video元素 -->
<video class="videoNode" src="data/imooc.mp4" poster="data/poster.jpg">
<!-- <source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放,点击这里下载视频: <a href="myvideo.webm">下载视频</a> -->
</video>
<!-- 控制器的元素 -->
<div class="controlsNode">
<!-- 播放暂停按钮 -->
<div class="playNode a1"></div>
<!-- 控制video的进度条 -->
<div class="loadNode">
<div class="loadLeft"></div>
<div class="loadRight"></div>
<!-- 拖动进度条的按钮 -->
<div class="crlNode"></div>
</div>
<!-- 时间的元素 -->
<div class="timeNode">
<span class="now">1:30</span>
<span class=""> - </span>
<span class="all">4:30</span>
</div>
<!-- 声音的标志 -->
<div class="volumeNode"></div>
<!-- 声音的进度条 -->
<div class="volumeLine">
<div class="v_left"></div>
<div class="v_right"></div>
<div class="v_dragNode"></div>
</div>
<!-- 全屏按钮 -->
<div class="fullNode"></div>
</div>
</div>
<script type="text/javascript">
// 播放暂停的控制
// playNode就是播放器的按钮
// playBln就是控制暂停播放的布尔值
// videoNode就是播放器
// fullNode 全屏按钮
var playNode=document.getElementsByClassName('playNode')[0],
playBln=true,
videoNode=document.getElementsByClassName('videoNode')[0]
fullNode=document.querySelector('.fullNode');
// 播放暂停的实现
playNode.onclick=function(){
// console.log(this.classList);
// 可以使用classLis里面的toggle方法来切换
// this.classList.toggle('pauseNode');
if(playBln){
this.className='pauseNode';
videoNode.play();
}else{
this.className='playNode';
videoNode.pause();
}
playBln=!playBln;
}
// 全屏按钮的实现
fullNode.onclick=function(){
if(videoNode.webkitRequestFullscreen){
videoNode.webkitRequestFullscreen();
}else if(videoNode.mozRequestFullScreen){
videoNode.mozRequestFullScreen();
}else{
// 解决ie浏览器全屏问题,但不全面
// videoNode.msRequestFullscreen();
video.requestFullscreen();
}
}
</script>
</body>
</html>
这三个的大小写是啥样子的
一般的requestFullscreen();
chrome的是webkitRequestFullScreen();
moz的是mozRequestFullscreen();
仅在chrome中Screen中的s小写吗?
1回答
同学你好,问题解答如下:
1. 在ie浏览器上,需要使用msRequestFullscreen来全屏显示(了解该方式即可),如下:
2. 这个方法,在不同的浏览器上写法不同:
通用(一般)方式是requestFullscreen;谷歌chrome是webkitRequestFullscreen(写成webkitRequestFullScreen也行);火狐是mozRequestFullScreen。通用方式和谷歌s都可以小写。
祝学习愉快!
相似问题