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&amp;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回答

好帮手慕久久

2020-11-26

同学你好,问题解答如下:
1. 在ie浏览器上,需要使用msRequestFullscreen来全屏显示(了解该方式即可),如下:
http://img.mukewang.com/climg/5fbf0df0092ecb0206580280.jpg
2. 这个方法,在不同的浏览器上写法不同:
通用(一般)方式是requestFullscreen;谷歌chrome是
webkitRequestFullscreen(写成webkitRequestFullScreen也行);火狐是mozRequestFullScreen。通用方式和谷歌s都可以小写。
祝学习愉快!

0

0 学习 · 6815 问题

查看课程