HTML5 video标签(播放器)学习笔记(二):播放控制

这篇文章主要介绍了HTML5 video标签(播放器)学习笔记(二):播放控制,本文讲解了获取影片总时长、播放、暂停、获取影片的播放时间和设置播放点、音量的获取和设置等内容,需要的朋友可以参考下

上一篇介绍了html5标签video(播放器)初始化需要做的一些工作,如何简单快速使用html5的播放器,本文将重点介绍如何用JS来操作video标签,也就是如何对video做一些简单基本的操作,包括了播放器的播放、暂停,音量的读取、设置等写相关操作,从而开始播放器的扩展之路。

本文的目录:   

1.获取影片总时长
2.播放、暂停
3.获取影片已播放时间和设置播放点
4.音量的获取和设置

第一、获取影片总时长

对播放器(video)操作,首先要得到的是影片的一些信息,其中一个就是总时长,除了内容以为,总时长也是第一时间要显示的。在对video进行操作的的前先给video标签添加一个ID,这样方便我们获取video元素

复制代码
代码如下:

<video id="myVideo" controls preload="auto" width=300 height="165"
poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
</video>

设置一个ID后,那么就可以开始操作了,要获取总时长,要用到video的一个事件-loadedmetadata,这个事件的触发表示元数据(媒体的一些基本信息)已经加载完成,用addEventListener监听事件

复制代码
代码如下:

var myVideo = document.getElementById('myVideo');//获取video元素
myVideo.addEventListener("loadedmetadata", function(){
//要执行的代码
});
好了,已经监听了,那么接下来要做的就是获取总时长,其实就是一个属性-duration
var myVideo = document.getElementById('myVideo')//获取video元素
,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//获取总时长
});

需要注意的是获取到的在总时长的单位为秒,显示的时候根据需要去转换。   

第二、播放、暂停

对播放器来说最基本的一个功能就是播放和暂停了,而在获取总时长后,接着的操作也就是播放和暂停。这个时候用到了video的两个方法就是play和pause

复制代码
代码如下:

var myVideo = document.getElementById('myVideo')//获取video元素
,tol = 0
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//获取总时长
});</p> <p> //播放
function play(){
myVideo.play();
}</p> <p> //暂停
function pause(){
myVideo.pause();
}

    需要注意的是,当播放结束后再运行play方法将会从头播放。

    第三、获取影片的播放时间和设置播放点

    播放器能播放和暂停后,那么接下来需要看到的就是影片播放了多久,播放到哪个时间点了。这个操作跟获取总时长很相似,都是需要监听一个事件和获取一个属性的值,那么用到的是video的timeupdate事件和currentTime属性

复制代码
代码如下:

//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
var currentTime = myVideo.currentTime;//获取当前播放时间
console.log(currentTime);//在调试器中打印
});

    运行后会在控制台看到很多数据...

    我们经常会接到一个要求,那就是上次看到了10分钟了,这次看要从第十分钟开始看,那么这个时候就需要设置播放点了,设置播放点用得还是currentTime属性,currentTime属性是可读写的,要注意的是设置值的单位是秒,如果播放点不是秒为单位那就要进行转换

复制代码
代码如下:

//设置播放点
function playBySeconds(num){
myVideo.currentTime = num;
}

    第四、音量的获取和设置

    播放器播放的过程中能暂停、播放,知道现在播放到哪里了和可以从某个时间点开始播放,那么接下来操作的就是音量了。这一点跟第三相似,获取音量可以直接用volume属性就可以了,但是在这里还要介绍的是音量改变的触发事件,方面以后需要自定义UI使用,那就是volumechange事件

复制代码
代码如下:

//音量改变时
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//获取当前音量
console.log(volume);//在调试器中打印
});

    当你通过控制条来改变音量时,你会看到调试里面有很多数据。要注意的是音量的范围值为0~1,一般在UI中都是用百分比,所以需要的时候要进行转换。

    音量是可以通过改变属性来设置的,跟播放的时间点是相似的,只不过音量设置的是volume属性

复制代码
代码如下:

//设置音量
function setVol(num){
myVideo.volume = num;
}

    下面是完整的代码:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<title>Video step2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<video id="myVideo" controls preload="auto" width=300 height="165"
poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
</video>
<script>
var myVideo = document.getElementById('myVideo')//获取video元素
,tol = 0 //总时长
;
myVideo.addEventListener("loadedmetadata", function(){
tol = myVideo.duration;//获取总时长
});</p> <p>//播放
function play(){
myVideo.play();
}</p> <p>//暂停
function pause(){
myVideo.pause();
}</p> <p>//播放时间点更新时
myVideo.addEventListener("timeupdate", function(){
var currentTime = myVideo.currentTime;//获取当前播放时间
console.log(currentTime);//在调试器中打印
});</p> <p>//设置播放点
function playBySeconds(num){
myVideo.currentTime = num;
}</p> <p>//音量改变时
myVideo.addEventListener("volumechange", function(){
var volume = myVideo.volume;//获取当前音量
console.log(volume);//在调试器中打印
});</p> <p>//设置音量
function setVol(num){
myVideo.volume = num;
}
</script>
</body>
</html>

    总结:通过这四个步骤来了解html5标签video(播放器)的基本操作,而这些操作主要是通过JS来监听video的事件和对video属性的读写来完成的,熟悉这四点即可灵活的在使用播放器,再根据应用场景来调整即可。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理?你可能花几天也想不明白,但谁在意呢!这个脚本几乎是所有正式网站必用
HTML5 火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。 1、使用Canvas绘制直线: !doctype html ht
响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这
近日,微软宣布开源Chakra的核心组件。Chakra是微软新一代浏览器 Microsoft Edge的JavaScript引擎。相关代码将于2016年1月上传到微软的GitHub账号,项目名称为 ChakraCore,遵循MIT许可协议。 ...,HTML5中国,中国最大的HTML5中文门户。
这篇文章报道的不是“新闻”,因为W3C早已开始着手CSS变量方面的工作。至于Google,则要追溯到11月初,当时该公司主要开发人员之一的Addy Osmani宣布了率先在Chrome Canary中引入对CSS变量的支持。 ...,HTML5中国,中国最大的HTML5中文门户。
25年后,你发的编程知识经验还会增加,但薪水却不加了;25年后,如果你还热爱编程便不会选择转行去当管理人员;25年后,你想和好友去玩耍,而经理却让你加班;那么你是否想过这25年之间做出另一种选择呢? ...,HTML5中国,中国最大的HTML5中文门户。