video的基本使用

video的基本使用效果

播放、暂停、快进、退后、快放、慢放、音量大小、全屏效果。

HTML

<section class="box">
			<article class="tv">
				<video src="va/4video.webm" id="tvs" controls></video>
			</article>
			<nav class="buts">
				<button>播放</button>
				<button>暂停</button>
				<button>快进10秒</button>
				<button>退后10秒</button>
				<button>快速播放</button>
				<button>减速播放</button>
				<button>正常播放</button>
				<button>加大音量</button>
				<button>减小音量</button>
				<button>🔊</button>
				<button>全屏</button>
			</nav>
</section>

CSS

.box{width: 1300px;margin: 100px auto;}
.tv{width: 100%;}
.tv>video{width: 100%;}
.buts>button{width: 110px;height: 50px;font-size: 22px;margin-left: 2px;}

JS

const tvs = document.getElementById('tvs');
			const butlist = document.querySelectorAll('.buts>button');
			// 播放
			butlist[0].onclick = function(){
				tvs.play();
			}
			// 暂停
			butlist[1].onclick = function(){
				tvs.pause();
			}
			
			// 快进10秒
			butlist[2].onclick = function(){
				tvs.currentTime+=10;
			}
			// 后退10秒
			butlist[3].onclick = function(){
				tvs.currentTime-=10;
			}
			// 快速播放
			butlist[4].onclick = function(){
				// console.log(tvs.playbackRate)tvs.playbackRate默认值是1
				if(tvs.playbackRate<=2){
					tvs.playbackRate +=0.3;
				}
			}
			// 减速播放
			butlist[5].onclick = function(){
				console.log(tvs.playbackRate) //tvs.playbackRate默认值是1
				// 如果最小值的10被大于于2就，在每次的基础上的10倍减去2在除以10.
				if(tvs.playbackRate*10>2 ){
					tvs.playbackRate = (tvs.playbackRate*10-2)/10;
				}
			}
			// 正常播放
			butlist[6].onclick = function(){
				tvs.playbackRate = 1;//tvs.playbackRate默认值是1
			}
			
			// 加大音量
			butlist[7].onclick = function(){
				console.log(tvs.volume)
				if(tvs.volume < 1){ // tvs.volume最小值为0,最大值为1
					tvs.volume = (tvs.volume*10+1)/10;
				}else{
					tvs.volume = 1;
				}
			}
			// 减小音量
			butlist[8].onclick = function(){
				console.log(tvs.volume)
				if(tvs.volume != 0){ // tvs.volume最小值为0,最大值为1
					tvs.volume = (tvs.volume*10-1)/10;
				}else{
					tvs.volume = 0;
				}
			}
			// 静音
			var flag = true,s = 0;
			butlist[9].onclick = function(){
				if(flag){
					s = tvs.volume;
					tvs.volume = 0;
					butlist[9].innerHTML = '🔇'
				}else{
					tvs.volume = s;
					butlist[9].innerHTML = '🔊'
				}
				flag = !flag
			}
			// 全屏
			butlist[10].onclick = function(){
				// tvs.webkitRequestFullscreen();// 谷歌全屏
				if (tvs.requestFullscreen) {
				    tvs.requestFullscreen();
				} else if (tvs.webkitRequestFullscreen) {
				    tvs.webkitRequestFullscreen();
				} else if (tvs.mozRequestFullScreen) {
				    tvs.mozRequestFullScreen();
				} else if (tvs.msRequestFullscreen) {
				    tvs.msRequestFullscreen();
				}
			}
			// // 全屏兼容
			// // ele:video对象
			// function sFullscreen(ele) {
			//     // 全屏兼容代码
			//     if (ele.requestFullscreen) {
			//         ele.requestFullscreen();
			//     } else if (ele.webkitRequestFullscreen) {
			//         ele.webkitRequestFullscreen();
			//     } else if (ele.mozRequestFullScreen) {
			//         ele.mozRequestFullScreen();
			//     } else if (ele.msRequestFullscreen) {
			//         ele.msRequestFullscreen();
			//     }
			// }
			
			// // 取消全屏
			// function eFullscreen() {
			//     if (document.exitFullscreen) {
			//         document.exitFullscreen();
			//     } else if (document.webkitExitFullscreen) {
			//         document.webkitExitFullscreen();
			//     } else if (document.msExitFullscreen) {
			//         document.msExitFullscreen();
			//     } else if (document.mozCancelFullScreen) {
			//         document.mozCancelFullScreen();
			//     }
			// }