我点击任意一个class为iframe的a按钮,会将alt的地址赋给video的src,然后全屏播放
现在我想做的是按esc退出视频全屏时将video的src地址清空
<div class="vdobox">
<video id="mario-video" controls autoplay="autoplay">
<source src="">
</video>
</div>
<a alt="http://www.guangfan.com/Public/Gf2016/images/video2.mp4" class="iframe">video2</a>
<a alt="http://www.guangfan.com/Public/Gf2016/images/video.mp4" class="iframe">video</a>
<h1 id="heool" align="center" style="color: #000;">hello</h1>
<script>
var aLi = document.querySelectorAll('.iframe');
for (var i = 0; i < aLi.length; i++) {
aLi[i].addEventListener('click', function(){
//开始视频弹出事件
var marioVideo = document.getElementById("mario-video");
var hhh=document.getElementById("heool");
document.getElementById("heool").style.color="blue";
if (marioVideo && this) {
marioVideo.src=this.getAttribute("alt");
if (marioVideo.requestFullscreen) {
marioVideo.requestFullscreen();
}
else if (marioVideo.msRequestFullscreen) {
marioVideo.msRequestFullscreen();
}
else if (marioVideo.mozRequestFullScreen) {
marioVideo.mozRequestFullScreen();
}
else if (marioVideo.webkitRequestFullScreen) {
marioVideo.webkitRequestFullScreen();
}
}
//结束
}
);
}
//网上找的退出全屏,不能在video全屏时执行下边的js事件
$(function(){
$(window).keyup(function (event) {
if (event.keyCode == 27) {
alert("执行退出全屏操作...");
document.getElementById("heool").style.color="black";
}
});
})
</script>
全部了无法响应keyup事件,可以用计时器定时检查video的高度,但是你的video标签要设置一个默认高度,计时器检查如果高度变回一样了就执行代码,如下下面的
<div class="vdobox">
<video id="mario-video" controls autoplay="autoplay" height="500">
<source src="">
</video>
</div>
<a alt="http://www.guangfan.com/Public/Gf2016/images/video2.mp4" class="iframe">video2</a>
<a alt="http://www.guangfan.com/Public/Gf2016/images/video.mp4" class="iframe">video</a>
<h1 id="heool" align="center" style="color: #000;">hello</h1>
<script>
var aLi = document.querySelectorAll('.iframe');
var timer, videoHight = 500;///////////
for (var i = 0; i < aLi.length; i++) {
aLi[i].addEventListener('click', function () {
//开始视频弹出事件
var marioVideo = document.getElementById("mario-video");
var hhh = document.getElementById("heool");
document.getElementById("heool").style.color = "blue";
///////////////////////////
timer = setInterval(function () {
if (marioVideo.offsetHeight == videoHight) {
alert("执行退出全屏操作...");
document.getElementById("heool").style.color = "black";
clearInterval(timer)
}
}, 500)
///////////////////////////
if (marioVideo && this) {
marioVideo.src = this.getAttribute("alt");
if (marioVideo.requestFullscreen) {
marioVideo.requestFullscreen();
}
else if (marioVideo.msRequestFullscreen) {
marioVideo.msRequestFullscreen();
}
else if (marioVideo.mozRequestFullScreen) {
marioVideo.mozRequestFullScreen();
}
else if (marioVideo.webkitRequestFullScreen) {
marioVideo.webkitRequestFullScreen();
}
}
//结束
}
);
}
</script>
监听全屏变化事件
let mark = false;
document.addEventListener('fullscreenchange', function(){
mark = !mark;
//全屏
if(mark){
//退出全屏
}else{
}
console.log(111);
});
document.addEventListener('webkitfullscreenchange', function(){
console.log(222);
});
document.addEventListener('mozfullscreenchange', function(){
console.log(333);
});
document.addEventListener('MSFullscreenChange', function(){
console.log(444);
});
加一个标记变量,全屏时设置为true,退出全屏设置为false