标签：fullScreen 浏览器 JavaScript ele 点击 全屏 事件
JavaScript实现点击一个事件后，触发另一个事件
有道H5作业题：点击一个全屏按钮实现视频的全屏显示。
实现这个功能是一个点击的动作一共两个事件：1、点击这个全屏按钮的onclick事件；2、视频全屏播放的事件
实现代码：
下面是HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>helloworld</title>
</head>
<body>
<figure style="text-align: center">
<figcaption style="margin: 10px">DIY视频播放器</figcaption>
<video id="video" src="fun.mp4" style="width: 500px;" onclick="fullScreen(this)">
<span>您的浏览器不支持video标签，请换个浏览器试一下吧</span>
</video>
<div>
<progress id="progress" value="0" max="100" style="width: 450px"></progress>
<span id="curTime">00:00</span>/<span id="totalTime">01:31</span>
</div>
<div>
<button id="btn_play">播放</button>
<button id="btn_pause">暂停</button>
<button id="btn_muted">静音</button>
<button id="btn_fullScreen">全屏</button>
<input type="range" value='0.1' nae="range" id="btn_volume" min="0" max="1" step='0.1'>
<button id="btn_go">加速</button>
<button id="btn_back">减速</button>
<button id="go_five">快进5s</button>
<button id="back_five">后退5s</button>
</div>
</figure>
</body>
</html>
下面是js代码：
//全屏
function fullScreen(ele){
if(ele.mozRequestFullScreen){
ele.mozRequestFullScreen();//火狐浏览器
}else if(ele.webkitRequestFullscreen){
ele.webkitRequestFullscreen();//谷歌浏览器
}else if(ele.oRequestFullscreen){
ele.oRequestFullscreen(); //opera浏览器
}else if(ele.msRequestFullscreen){
ele.msRequestFullscreen(); //ie浏览器
}else if(ele.requestFullscreen){
ele.requestFullscreen();
}
}
//视频全屏
document.getElementById("btn_fullScreen").onclick = function(){
/*
*createEvent("myEvent")
*创建一个事件对象，名字为evt，类型为HTMLEvent
*/
var evt = document.createEvent("HTMLEvents");
/*
*initEvent("click", true, true)
*实例化创建好的事件对象
* 第一个参数：事件类型（就好像是click还是submit）
* 第二个参数：是否冒泡
* 第三个参数：是否阻止浏览器默认行为（例如阻止submit事件提交表单）
*/
evt.initEvent("click", true, true);
/*
*触发自定义事件
*/
document.getElementById("video").dispatchEvent(evt);
}
btn_fullScreen.onclick这个就是第一个点击全屏按钮这个事件
onclick="fullScreen(this)"就是我们想要视频播放事件
这就实现了通过点击全屏按钮，触发视频全屏播放的功能。
最后，还有一个更简便的方式
document.getElementById("btn_fullScreen").onclick = function(){
fullScreen(video);
}
直接全屏
Ps：正在学习，有问题欢迎指出。
标签：fullScreen,浏览器,JavaScript,ele,点击,全屏,事件 来源： https://www.cnblogs.com/jingdr/p/14744460.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。