html5视频播放器隐藏控制,HTML5 video标签(播放器)学习笔记(二):播放控制
上一篇介绍了html5标签video(播放器)初始化需要做的一些工作,如何简单快速使用html5的播放器,本文将重点介绍如何用JS来操作video标签,也就是如何对video做一些简单基本的操作,包括了播放器的播放、暂停,音量的读取、设置等写相关操作,从而开始播放器的扩展之路。
本文的目录:
1.获取影片总时长
2.播放、暂停
3.获取影片已播放时间和设置播放点
4.音量的获取和设置
第一、获取影片总时长
对播放器(video)操作,首先要得到的是影片的一些信息,其中一个就是总时长,除了内容以为,总时长也是第一时间要显示的。在对video进行操作的的前先给video标签添加一个ID,这样方便我们获取video元素
复制代码代码如下:
poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
设置一个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;
}
下面是完整的代码:
复制代码代码如下:
Video step2
poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"
src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">
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;
}
总结:通过这四个步骤来了解html5标签video(播放器)的基本操作,而这些操作主要是通过JS来监听video的事件和对video属性的读写来完成的,熟悉这四点即可灵活的在使用播放器,再根据应用场景来调整即可。
html5视频播放器隐藏控制,HTML5 video标签(播放器)学习笔记(二):播放控制相关推荐
- html ios 视频播放不了,html中的video标签在ios微信中无法播放的解决方法之一
html中的video标签在ios微信中无法播放的解决方法之一 发布时间:2020-07-16 22:41:04 来源:51CTO 阅读:2652 作者:lixiaoyu1223 最近在做一个微信企业 ...
- HTML5 权威指南第 10 章 文档分节 学习笔记
HTML5 权威指南第 10 章 文档分节 学习笔记 第 8 章 标记文字 内容从从文字出发,专注如何将单体内容正确的呈现出来:第 9 章 组织内容 内容从段落出发,专注如何将单体内容合理的放在段落中 ...
- 【OpenGL学习笔记⑧】——键盘控制正方体+光源【冯氏光照模型 光照原理 环境光照+漫反射光照+镜面光照】
✅ 重点参考了 LearnOpenGL CN 的内容,但大部分知识内容,小编已作改写,以方便读者理解. 文章目录 零. 成果预览图 一. 光照原理与投光物的配置 1.1 光照原理 1.2 投光物 二. ...
- [MyBatis学习笔记] 二、Mybatis基本操作及相关标签介绍
[MyBatis学习笔记] 二.Mybatis基本操作及相关标签介绍 一.Mybatis简介 二.简单的CRUD操作 1.构建SqlSessionFactory (1)编辑mybatis-config ...
- 智能语音:好玩的语音控制是怎么实现的?学习笔记01
智能语音:好玩的语音控制是怎么实现的?学习笔记01 智能音箱的技术架构 智能音箱主要涉及拾音.前端信号处理.语音识别.自然语言处理和语音合成等技术,现在一些产品甚至提供了声纹识别技术. 当然,智能音箱 ...
- 深度强化学习控制六足机器人移动个人学习笔记(一)
深度强化学习控制六足机器人移动个人学习笔记(一) 注意事项 ubuntu18对应的ros版本不是Kinect gym算法执行中部分包要求Python不低于3.6 conda虚拟环境安装gym-gaze ...
- Unity学习笔记1-键盘控制开关灯(Point Light)
Unity学习笔记1-键盘控制开关灯(Point Light) 实现开关灯用键盘上的两个按键控制,效果如下所示 1-创建材质球(Material):HighLight和OffLight **: )Li ...
- Unity学习笔记--赛车的控制代码
Unity学习笔记–赛车的控制代码 using System.Collections; using System.Collections.Generic; using UnityEngine;publ ...
- springmvc学习笔记二:重定向,拦截器,参数绑定
springmvc学习笔记二:重定向,拦截器,参数绑定 Controller方法返回值 返回ModelAndView controller方法中定义ModelAndView对象并返回,对象中可添加mo ...
- MSP432E401Y学习笔记2-按键控制_查询
MSP432E401Y学习笔记2-按键控制_查询 前言 一.原理图查看需要控制的IO 二.写代码 1.将点灯的工程拷贝一份 2.配置LED 2.mian文件 前言 今天通过按键控制LED灯的亮灭,按键 ...
最新文章
- 风暴数码论坛教程--apk和odex的介绍和合并
- 计算机键盘输入法基础知识,教程计算机基础知识-:认识输入法
- linux c 创建新线程,Linux C Phread 入门1---线程创建
- php 清除英文字母,PHP英文字母大小写转换函数小结
- 4 合并grid列_在 Power BI Desktop 中合并数据
- Vmware15虚拟机安装win7镜像
- Android开发环境配置
- python 报错“xxx is not defined”
- Windows10超级好用的虚拟机
- 网课查题微信公众号如何搭建步骤
- L1-6 吉老师的回归 (15 分)
- 07-HTML5举例:简单的视频播放器
- 保弘实业|工资低的家庭要怎么进行投资理财
- AI模型神预测谁是卡塔尔世界杯冠军
- CDH添加第三方服务的方法
- Eclipse 的 jsp 页面代码格式化
- qt4.8.6 基于Phonon的播放器无法播放acc等音频文件解决方法
- 如何才能轻松搬家?多可文档的系统迁移功能导读
- vmware'如果已在 BIOS/固件设置中禁用 Intel VT-x,或主机自更改此设置后从未重新启动,则 Intel VT-x 可能被禁用'解决办法
- 阿里云轻量应用服务器Web环境搭建
热门文章
- 检查电脑是否被安装木马三个小命令
- 【vue2.0进阶篇】用transition组件轻松实现过渡效果
- 为什么程序员的社会地位不高?
- javascript的事件绑定与事件委托
- RandomizedLogisticRegression ImportError解决思路参考
- PHP个人博客网站设计 学生PHP个人博客网页源码 PHP MYSQL动态网站作品
- Blizzard Transitions for Mac - 动态风雪过渡效果FCPX转场
- P2197 【模板】nim 游戏(python3实现)
- Python 刷题常用语法与数据结构汇总-2022.01.30
- 农产品加工进销存单_农产品进销存ERP—物资的内部腾挪转换也是交易的一种形式...