文档章节

html5标签video(播放器)学习笔记(二)-基本操作

subying
 subying
发布于 2014/12/01 23:59
字数 1405
阅读 26034
收藏 29

    上一篇介绍了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;//获取总时长
 });

 //播放
 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 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;//获取总时长
});

//播放
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属性的读写来完成的,熟悉这四点即可灵活的在使用播放器,再根据应用场景来调整即可。

    

 

 

 

© 著作权归作者所有

subying
粉丝 21
博文 63
码字总数 35388
作品 0
广州
前端工程师
私信 提问
最好的 6 个 HTML5 的多媒体播放器

是 HTML5 中新引入的标签,用来在 Web 网页中嵌入视频播放功能,无需 Flash 和其他嵌入式插件的支持,是浏览器内建的功能,不过 旨在一些高级浏览器中支持,例如 Firefox, Safari, Chrome, a...

红薯
2011/11/27
9.4K
9
分享10款最棒的免费HTML5视频播放器

日期:2011/12/16 来源:GBin1.com 最近Web圈子里最让人激动地莫过于HTML5了,特别是HTML5视频,使用HTML5视频标签可以帮助我们解决困扰我们很长时间的网站视频插入问题。 HTML5可以在没有f...

gbin1
2011/12/21
2.1K
2
新手学习HTML5的几个小问题?

在下刚学HTML5不久,正在自制一个HTML5视频播放器(即使用video标签),现遇到如下几个问题,想了好久不能解决?求大神解答: ①IE下视频全屏(即video.msRequestFullscreen();)下我的自制控...

湖心亭看雪
2015/03/23
151
1
zymedia的在使用中碰到的问题

记笔记,免忘记!最近用到了视频插件zyMedia。这个插件的简介地址:https://github.com/ireaderlab/zyMedia 问题一: 首先视频的上方显示的标题,实例是这样写的data-config='{"mediaTitle":...

zilvzsy
2018/05/12
0
0
HTML5 视频转换软件 Freemake Video Converter

HTML5的Video标签可以说算是HTML5的重头戏,各大浏览器都纷纷响应,现代浏览器都能支持Video标签,基于Video标签的播放器也越来越多,但问题是每个浏览器所支持的视频格式不同,想在各大浏览...

海纳百川
2013/01/14
0
1

没有更多内容

加载失败,请刷新页面

加载更多

计算机网络

计算机网络体系结构 OSI 其中表示层和会话层用途如下: 表示层 :数据压缩、加密以及数据描述,这使得应用程序不必关心在各台主机中数据内部格式不同的问题。 会话层 :建立及管理会话。 五层...

一只小青蛙
今天
2
0
0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部