目录
- 一、视频标签基本API
-
- [1. play(开始)](#1. play(开始))
- 2.muted(静音)
- [3. pause(暂停)](#3. pause(暂停))
- [4. volume(声音控制)](#4. volume(声音控制))
- [5. webkitRequestFullScreen(全屏)](#5. webkitRequestFullScreen(全屏))
- 二、视频标签进度条API
-
- [1. 总时间API(duration)](#1. 总时间API(duration))
- 2.当前时间API(currentTime)
- 二、进度条拉动效果
一、视频标签基本API
1. play(开始)
当我们想在网页中想让视频播放的时候,需要通过一个button按钮来实现,,通过按钮的点击事件,然后让视频开始播放
javascript
startNode.onclick=function(){
needVideo.play();
}
2.muted(静音)
当我们想打开网页的时候让视频自动播放,需要设置视频为静音状态。此时打开网页,视频会自动播放。
javascript
<video muted></video>
3. pause(暂停)
当我们想在网页中想让视频暂停的时候,也需要通过一个button按钮来实现,,通过按钮的点击事件,然后让视频开始播放。
javascript
pauseNode.onclick=function(){
needVideo.pause();
}
4. volume(声音控制)
在网页中,声音控制需要通过volume来控制,volume的取值范围为0~1。
javascript
volumeNode.onclick=function(){
needVideo.volume=this.value;
}
5. webkitRequestFullScreen(全屏)
在网页中,全屏效果通过webkitRequestFullScreen来实现,同时这个也需要通过一个button按钮。
javascript
webkitNode.onclick=function(){
needVideo.webkitRequestFullScreen();
}
webkitRequestFullScreen也可以用来全屏图片和div盒子,但是很少用来将div盒子全屏。
二、视频标签进度条API
1. 总时间API(duration)
当我们需要查看总时间的时候,只需要console.log
当前视频的duration
即可。也可以是在网页中放入一个盒子,通过innerHtml的形式来查看。
javascript
setTimeout(function(){
console.log(needVideo.duration);
},50);
2.当前时间API(currentTime)
当我们需要实时查看当前视频时间的时候,我们可以通过currentTime来查看。
方法1:我们可以通过定时器来查看,但是这种方法占用资源太多,但是非常简单。
javascript
setInterval(function(){
console.log(needVideo.currentTime);
},50);
方法2:通过事件监听的方式
javascript
needVideo.addEventListener('timeupdate',funtion(){
nowTime.innerText=needVideo.duration; //nowTime是一个span;
});
二、进度条拉动效果
进度条拉动效果是视频播放过程中常用的一个效果,当视频播放的时候,进度条会随着视频的播放而移动,同时我们拉动进度条的时候,视频进度也会跟着变动。
javascript
var go = document.getElementById('go');
needVideo.addEventListener('timeupdate', function () {
nowTime.innerText = needVideo.currentTime;
go.value = needVideo.currentTime / needVideo.duration * 100;
}, 50);
go.onmousedown = function () {
needVideo.pause();
}
go.onmouseup = function () {
needVideo.play();
}
go.oninput = function () {
//总时间*百分比=当前时间
needVideo.currentTime = needVideo.duration * (this.value / 100);
}
//全屏
fullScreenNode.onclick = function () {
if (needVideo.webkitRequestFullScreen) {
//谷歌全屏
needVideo.webkitRequestFullScreen();
} else if (needVideo.mozRequestFullScreen) {
//火狐全屏
needVideo.mozRequestFullScreen();
} else if (needVideo.msRequestFullScreen) {
//IE全屏
needVideo.msRequestFullScreen();
} else if (needVideo.requestFullScreen) {
//特殊格式
needVideo.requestFullScreen();
}
}