兼容性问题
来源：4-9 video-javascript（6）
Edward666
2019-11-11 11:01:27
Firefox不支持addEventListener方法吗？制作的播放器时，给播放暂停按钮绑定的click可以用，但是其他元素用这个方法不能使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video</title>
<style>
.main{
width: 540px;
height: 332px;
position: absolute;
top: 50%;
left: 50%;
margin: -166px 0 0 -270px;
/*border: 1px solid #000;*/
box-shadow: 0 0 5px rgba(0,0,0,0.2);
background-color: #000;
}
.video-view{
width: 540px;
height: 305px;
}
.video{
width: 540px;
height: 305px;
}
.video-controls{
width: 540px;
height: 27px;
position: relative;
background: url(img/control-bg.png) repeat-x;
/*overflow: hidden;*/ /*可以解决子元素和父元素的边界合并问题，给父元素添加overflow:hidden样式*/
}
.video-play{
width: 13px;
height: 15px;
float: left;
margin: 6px 0 0 14px;
background: url(img/play.png) no-repeat;
cursor: pointer;
}
.video-pause{
width: 13px;
height: 15px;
float: left;
margin: 6px 0 0 14px;
background: url(img/Pause.png) no-repeat;
cursor: pointer;
}
.video-progress{
position: relative;
width: 267px;
height: 10px;
float: left;
background: url(img/progress-block.png) repeat-x;
margin: 9px 0 0 14px;
}
.progress-left{
width: 3px;
height: 10px;
position: absolute;
top: 0;
left: 0;
background: url(img/progress-left.png) no-repeat;
}
.progress-right{
width: 3px;
height: 10px;
position: absolute;
top: 0;
right: 0;
background: url(img/progress-right.png) no-repeat;
}
.progress-now{
width: 0;
height: 7px;
position: absolute;
top: 1px;
left: 3px;
background: url(img/progress-now.png) repeat-x;
}
.progress-now-right{
width: 3px;
height: 7px;
position: absolute;
top: 0px;
right: 0px;
background: url(img/progress-now-right.png) no-repeat;
}
.progress-btn{
width: 17px;
height: 17px;
position: relative;
top: -3.5px;
left: -8.5px;
background: url(img/progress-control.png) no-repeat;
cursor: pointer;
}
.progress-time{
width: 62px;
height: 10px;
line-height: 10px;
float: left;
margin: 9px 0 0 9px;
font-size: 10px;
color: #fff;
}
.volume{
width: 19px;
height: 17px;
float: left;
background: url(img/volume-3.png) no-repeat;
margin: 5px 0 0 5px;
}
.volume-control{
position: relative;
width: 61px;
height: 8px;
float: left;
background: url(img/progress-block.png) repeat-x;
margin: 10px 0 0 12px;
}
.volume-left{
width: 3px;
height: 8px;
position: absolute;
top: 0;
left: 0;
background: url(img/volume-left.png) no-repeat;
}
.volume-right{
width: 3px;
height: 8px;
position: absolute;
top: 0;
right: 0;
background: url(img/volume-right.png) no-repeat;
}
.volume-btn{
width: 17px;
height: 15px;
position: absolute;
top: -3.5px;
left: 52.5px;
background: url(img/volume-control.png) no-repeat;
cursor: pointer;
}
.fullScreen{
width: 15px;
height: 17px;
float: left;
background: url(img/FullScreen.png) no-repeat;
margin: 6px 0 0 45px;
}
</style>
</head>
<body>
<div class="main">
<div class="video-view">
<video src="./data/imooc.mp4" id="video" class="video" poster="img/haibao.png"></video>
</div>
<div class="video-controls">
<div class="video-play" id="play"></div>
<div class="video-progress">
<div class="progress-left"></div>
<div class="progress-right"></div>
<div class="progress-now">
<div class="progress-now-right"></div>
</div>
<div class="progress-btn"></div>
</div>
<div class="progress-time">
<span class="curTime">00:00</span>
<span>-</span>
<span class="allTime">5:30</span>
</div>
<div class="volume"></div>
<div class="volume-control">
<div class="volume-left"></div>
<div class="volume-right"></div>
<div class="volume-btn"></div>
</div>
<div class="fullScreen"></div>
</div>
</div>
</body>
<script>
//控制暂停和播放
var playState = true;
play.addEventListener('click', function(){
// play.classList.toggle('video-pause');ES6新属性
//原生js操作元素class属性值
playState = !playState;
if (playState === false) {
video.play();
this.className = 'video-pause';
}else{
video.pause();
this.className = 'video-play';
}
},false);
//控制全屏
var fullScreen = document.querySelector('.fullScreen');
fullScreen.addEventListener('click', function(){
if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
}else if (video.webkitRequestFullScreen) {
video.webkitRequestFullScreen();
}else if(video.msRequestFullscreen){
video.msRequestFullscreen();
}
},false);
//显示正在播放的时间和总时间
var curTime = document.querySelector('.curTime'),
allTime = document.querySelector('.allTime');
//canplay事件，视频加载完时触发。
video.addEventListener('canplay', function(){
var time = parseInt(this.duration),
allS = correctTime(time % 60),
allM = parseInt(correctTime(time / 60));
allTime.innerHTML = allM +':'+allS;
}, false);
//给视频绑定timeupdate事件，实时监听视频播放状态。
var progressNow = document.querySelector('.progress-now'),
progressBtn = document.querySelector('.progress-btn');
video.addEventListener('timeupdate', function(){
curTime.innerHTML = correctTime(parseInt(video.currentTime/60))+':'+correctTime(parseInt(video.currentTime%60));
//当前的进度条进度
progressNow.style.width = (video.currentTime / video.duration)*100 + '%';
//当前进度条按钮的位置
progressBtn.style.left = progressNow.offsetWidth-8.5 +'px';
},false);
function correctTime(time){
return time<10?'0'+time : time;
}
//视频结束时触发事件
video.addEventListener('ended', function(){
play.className = 'video-play';
},false);
//拖拽进度条实现
var videoProgress = document.querySelector('.video-progress');
progressBtn.onmousedown = function(e){
var ev = e ||event;//兼容IE浏览器
var l = ev.clientX - this.offsetLeft;
video.pause();
document.onmousemove = function(e){
var ev = e || event;
needX = ev.clientX - l,
maxX = videoProgress.offsetWidth - 8;
needX = needX < -8.5 ? -8.5 : needX;
needX = needX > maxX ? maxX : needX;
progressBtn.style.left = needX + 'px';
}
document.onmouseup = function(){
progressNow.style.width = ((progressBtn.offsetLeft + 9)/videoProgress.offsetWidth)*100+'%';
video.currentTime = ((progressBtn.offsetLeft + 9)/videoProgress.offsetWidth)*video.duration;
video.play();
play.className = 'video-pause';
playState = false;
document.onmousemove = document.onmouseup = null;
}
return false;
};
//给volume添加进度条操作
var volume = document.querySelector('.volume'),
volumeBtn = document.querySelector('.volume-btn'),
volumeControl = document.querySelector('.volume-control');
volumeBtn.onmousedown = function(e){
var ev = e || event;//兼容IE的事件对象
var l = ev.clientX - this.offsetWidth;
document.onmousemove = function(e){
var ev = e || event;
var needX = ev.clientX - l;
var maxX = volumeControl.offsetWidth-9;
needX = needX < -8.5? -8.5:needX;
needX = needX > maxX? maxX:needX;
volumeBtn.style.left = needX + 'px';
video.volume = (volumeBtn.offsetLeft + 9)/volumeControl.offsetWidth;
}
document.onmouseup = function(e){
document.onmousemove = document.onmouseup = null;
}
return false;
};
</script>
</html>写回答
2回答
-
好帮手慕星星
2019-11-11
同学你好，
火狐浏览器支持addEventListener监听事件，报错并不是这个原因哦。
主要是因为火狐浏览器中默认有fullScreen属性，属性值为布尔值。所以代码中定义这个变量起了冲突，可以输出看一下：
因为变量的值为false，所以监听事件会报错。
解决方式：
（1）在js代码外层添加window.onload事件，将fullScreen变量变成局部的。
（2）或者将fullScreen变量换一个名称。
自己再测试下。如果我的回答帮助到了你，欢迎采纳！
祝学习愉快~
0 -
Edward666
提问者
2019-11-11
我试了一下Firefox是兼容addeventlistener方法的啊？为什么我在Chrome浏览器没问题，在火狐就有问题了啊0
相似问题