怎样获取HTML5视频的持续时间
HTML5视频的Bigger体验是非常令人振奋的,非常easy的道理,不用载入和依赖烦人的Flash或其它第三方插件来播放视频,也是大功一件。我们能够通过自己定义控件对视频进行显示和操控,当中一个常见的需求是显示视频的时长(duration)。以下我们一起来看看怎样获得并显示视频的持续时间!
JavaScript 代码
video
元素有一个属性(property)叫做 duration
,表示的是视频内容的时间长度,单位是秒。
要比較好地显示视频的持续时间,我们须要使用到 parseInt
函数,以及取模运算(%
, modulus ):
// 如果"video" 是获取的视频节点对象
var i = setInterval(function() {
// 这里注意, 必须推断视频的 readyState。
// 由于有可能没载入完。则获取到的视频时长信息是不对的。
if(video.readyState > 0) {
// 计算,10进制,以及取模
var minutes = parseInt(video.duration / 60, 10);
var seconds = video.duration % 60;
// (此处能够加入代码。将分钟,秒数显示到须要的地方)
// ...
// 运行到这里,就将循环定时器清除。
clearInterval(i);
}
}, 200);
原文链接: Get HTML5 Video Duration
原文日期: 2015年03月10日
翻译日期: 2015年03月14日
怎样获取HTML5视频的持续时间的更多相关文章
- 使用HTML5视频事件示例
<!DOCTYPE html > <html > <head> <title>Video events example</title> &l ...
- HTML5视频直播及H5直播扫盲
章来源:http://geek.csdn.net/news/detail/95188 分享内容简介: 目前视频直播,尤其是移动端的视频直播已经火到不行了,基本上各大互联网公司都有了自己的直播产品,所以 ...
- 使用 HTML5 视频事件
转自:http://msdn.microsoft.com/zh-cn/library/hh924822(v=vs.85).aspx 为什么要使用事件? HTML5 视频对象提供了很多事件,这些事件可以 ...
- HTML5 视频直播
目前视频直播,尤其是移动端的视频直播已经火到不行了,基本上各大互联网公司都有了自己的直播产品,所以对于直播的一些基本知识和主要技术点也要有所了解,本次分享就向大家介绍一下其中的奥秘. 内容大体框架: ...
- iOS 直播-获取音频(视频)数据
iOS 直播-获取音频(视频)数据 // // ViewController.m // capture-test // // Created by caoxu on 16/6/3. // Copyri ...
- HTML5视频Video 音频Audio
视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...
- [转] Android 4.4中播放HTML5视频<video>的Bug
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...
- html5视频全频播放
html5视频全频播放 旋转90度 对video进行缩放 修正position 效果还凑合 代码 $(media).rotate({ // angle: 90, duration: 100, anim ...
- HTML5视频标签video
现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...
随机推荐
- hdu 6231 -- K-th Number(二分+尺取)
题目链接 Problem Description Alice are given an array A[1..N] with N numbers. Now Alice want to build an ...
- Python 解LeetCode:680. Valid Palindrome II
题目:给定一个字符串,在最多删除一个字符的情况下,判断这个字符串是不是回文字符串. 思路:回文字符串,第一想到的就是使用两个指针,前后各一个,当遇到前后字符不一致的时候,有两种情况,删除前面字符或者删 ...
- SpringMVC接收复杂对象
SpringMVC接收复杂对象 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7642977.html 本节内容暂放一边,我先扯点儿,心情好了,代码顺风顺水哈~ ...
- eclipse中导入jsp等工程使用过程中常遇问题
1.导入的工程JSP文件出现报错的情况 这个一般不怎么影响文件的执行,这些文件飘红主要是因为eclipse的校验问题. 具体错误信息:Multiple annotations found at thi ...
- 多少牛逼的程序员毁在low逼的英文发音上(JAVA)
最最常用的关键词及音标 数据类型:boolean.byte.short.int.long.double.char.float.double. 包引入和包声明:import.package. 用于类和接 ...
- springmvc跨域+token验证(app后台框架搭建二)
这是app后台框架搭建的第二课,主要针对app应用是跨域的运用,讲解怎么配置跨域服务:其次讲解怎么进行token验证,通过拦截器设置token验证和把token设置到http报文中.主要有如下: ...
- red5 自定义文件存放目录
Red5 流媒体服务器 自定义文件存放目录 Red5在正常情况下,安装之后文件必须存放在Red5安装目录下的oflaDemo\streams中,不能自定义存放目录,例如Red5 安装在C盘,但是我的文 ...
- Office隐藏17年的漏洞CVE_2017_11882测试记录
Office隐藏17年的漏洞CVE_2017_11882测试记录 创建时间: 2017/11/25 0:18 作者: CN_Simo 标签: Office漏洞 参考文章1:https://www.cn ...
- AIO5物料清单(BOM)列表,搜索编码和名称无效
问题: AIO5物料清单(BOM)列表,搜索编码和名称无效.如图: 原因分析 AIO5的BOM是在二次开发平台上做的,在制作自定义单据的时候[查询参数设置]没有设置.如下图: 解决方案 工具:AIO5 ...
- 13. ZooKeeper最佳实践
以下列举了运行和管理ZooKeeper ensemble的一些最佳实践: ZooKeeper数据目录包含快照和事务日志文件.如果autopurge选项未启用,定期清理目录是一个好习惯.另外,管理员可能 ...