本文的目录：

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;//获取总时长
});
//播放
function play(){ 
　　myVideo.play();
}
//暂停
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-获取时长</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    </head>

    <body>

        <video id="myVideo" controls preload="auto" width= height=""

            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 = ; //总时长

            myVideo.addEventListener("loadedmetadata", function(){

                tol = myVideo.duration;//获取总时长

                alert('影片时长：'+ tol);

            });

            //播放

            function play(){

                myVideo.play();

            }

            //暂停

            function pause(){

                myVideo.pause();

            }

            //播放时间点更新时

            myVideo.addEventListener("timeupdate", function(){

                var currentTime = myVideo.currentTime;//获取当前播放时间

                console.log(currentTime);//在调试器中打印

            });

            //设置播放点

            function playBySeconds(num){

                myVideo.currentTime = num;

            }

            //音量改变时

            // myVideo.addEventListener("volumechange", function(){

            //     var volume = myVideo.volume;//获取当前音量

            //     console.log(volume);//在调试器中打印

            // });

            //设置音量

            function setVol(num){

                myVideo.volume = num;

            }

        </script>

    </body>

</html>

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

video常用功能的更多相关文章

  1. mybatis常用功能总结

    mybatis-plus常用功能总结-以User表为例 1.数据库 id name age email create_time update_time version deleted 1 mary 2 ...

  2. WebStorm 常用功能的使用技巧分享

    WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅. 本文在这里分享一些常用功能的使用技巧,希望能帮助大家更好的使用这款强大 ...

  3. AVA正则表达式4种常用功能

    正则表达式在字符串处理上有着强大的功能,sun在jdk1.4加入了对它的支持 下面简单的说下它的4种常用功能: 查询: String str="abc efg ABC";  Str ...

  4. [转]WebPack 常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  5. FastReport.Net 常用功能总汇

    一.常用控件 文本框:输入文字或表达式 表格:设置表格的行列数,输入数字或表达式 子报表:放置子报表后,系统会自动增加一个页面,你可以在此页面上设计需要的报表.系统在打印处理时,先按主报表打印,当碰到 ...

  6. python3 字符串与列表常用功能

    一.字符串常用功能 1. capitalize(),将字符串的首字母变成大写,其余全部置为小写:如果字符串中有多个单词,也只是将第一个单词的首字母置为大写:例: >>> name = ...

  7. matlab进阶：常用功能的实现，常用函数的说明

    常用功能的实现 获取当前脚本所在目录 current_script_dir = fileparts(mfilename('fullpath')); % 结尾不带'/' 常用函数的说明 bsxfun m ...

  8. WebPack常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  9. JavaScript 常用功能总结

    小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScri ...

随机推荐

  1. Centos下Sphinx中文分词编译安装测试---CoreSeek

    要支持中文分词,还需要下载Coreseek,可以去官方搜索下载,这里我用的4.1 百度云下载地址:      https://pan.baidu.com/s/1slNIyHf tar -zxvf co ...

  2. centos7更改默认的python版本，安装python3.6.4

    1.首先查看默认系统版本:显示为2.7.5 2.我们在root下创建一个python的文件夹用来存放我们下载的python安装包: 3.然后使用wget命令下载安装包: wget  https://w ...

  3. bootstrap模态对话框

    bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...

  4. hadoop/storm以及hive/hbase/pig区别整理

    STORM与HADOOP的比较 对于一堆时刻在增长的数据,如果要统计,可以采取什么方法呢? 等数据增长到一定程度的时候,跑一个统计程序进行统计.适用于实时性要求不高的场景.如将数据导到HDFS,再运行 ...

  5. CSS盒模型的深度思考及BFC

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...

  6. ELK 经典用法—企业自定义日志手机切割和mysql模块

    本文收录在Linux运维企业架构实战系列 一.收集切割公司自定义的日志 很多公司的日志并不是和服务默认的日志格式一致,因此,就需要我们来进行切割了. 1.需切割的日志示例 2018-02-24 11: ...

  7. ‘true’==true返回false详解

    JavaScript高级程序设计(第3版)  第三章非常完整地解释了原因. 3.5.7 相等操作符 在转换不同的数据类型时,相等和不相等操作符遵循下列基本规则: . 如果有一个操作数是布尔值,则在比较 ...

  8. directdraw显示rgb555

    // TODO: 在此添加控件通知处理程序代码  height=width=widthBytes=0;  m_screen.SetWindowPos(&CWnd::wndBottom,0,0, ...

  9. svnserve.conf: Option expected的问题解决方法

    经常有新手配置基于svnserve的subversion服务器后,在客户端访问subversion版本库时出现这个错误:svnserve.conf:12: Option expected为什么会出现这 ...

  10. thinphp 整合ueditor

    我的ueditor是部署在public/editor 部署前台页面 <script type="text/javascript" > var UEDITOR_HOME_ ...