JavaScript实现点击一个事件后,触发另一个事件

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:正在学习,有问题欢迎指出。

上一篇:js控制全屏显示


下一篇:直播软件源码,vue中实现全屏功能