• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5 video标签(播放器)学习笔记(二):播放控制

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML5,video,标签,播放器,,播放控制等相关知识,佚名 希望在学习及工作中可以帮助到您

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

本文的目录:   

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

第一、获取影片总时长

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

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

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

第二、播放、暂停

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

});</p> <p> //播放
function play(){
myVideo.play();
}</p> <p> //暂停
function pause(){
myVideo.pause();
}

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

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

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

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

    第四、音量的获取和设置

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

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

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

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03android ios h5 接私活哪个挣钱多?
  • 2017-08-06浅谈h5自定义audio(问题及解决)
  • 2018-12-03使用HTML5 Canvas为图片填充颜色和纹理
  • 2018-12-03HTML5之SVG 2D入门8—文档结构及相关元素总结_html5教程技巧
  • 2018-12-03HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结
  • 2018-12-03如何不让html5 app cache的manifest缓存当前页面?
  • 2018-12-03网页制作时的高实用性小技巧总结
  • 2018-12-03canvas API ,通俗的canvas基础知识(一)
  • 2018-12-03HTML5移动前端webapp有什么推荐的书籍或者建议?
  • 2018-12-03必会的移动端Html5的基础知识点

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 开发人员需要牢记的HTML 5安全问题
    • 22个HTML5 技巧二
    • HTML5触摸事件演化tap事件介绍
    • 手机html网页和电脑上的html网页在制作上有什么区别?
    • 浅谈HTML5 defer和async的区别
    • 做前端和做 Java 或 C++ 相比前途哪个更好?
    • 基于HTML5 Canvas实现视频破碎重组特效
    • HTML5实践之歌词同步播放器的示例代码分享
    • 通过HTML5移动开发实现图片压缩上传的功能
    • HTML5实践-如何使用css3丰富图片样式的详解(一)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有