JavaScript之视频相关API

目录

一、视频标签基本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();
        }
    }
相关推荐
DARLING Zero two♡22 分钟前
关于我、重生到500年前凭借C语言改变世界科技vlog.16——万字详解指针概念及技巧
c语言·开发语言·科技
Gu Gu Study24 分钟前
【用Java学习数据结构系列】泛型上界与通配符上界
java·开发语言
栈老师不回家44 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
芊寻(嵌入式)1 小时前
C转C++学习笔记--基础知识摘录总结
开发语言·c++·笔记·学习
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
有梦想的咸鱼_1 小时前
go实现并发安全hashtable 拉链法
开发语言·golang·哈希算法
海阔天空_20131 小时前
Python pyautogui库:自动化操作的强大工具
运维·开发语言·python·青少年编程·自动化
MediaTea1 小时前
Pr 视频过渡:沉浸式视频 - VR 色度泄漏
音视频·vr
天下皆白_唯我独黑1 小时前
php 使用qrcode制作二维码图片
开发语言·php