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日

翻译人员: 铁锚 http://blog.csdn.net/renfufei

怎样获取HTML5视频的持续时间的更多相关文章

  1. 使用HTML5视频事件示例

    <!DOCTYPE html > <html > <head> <title>Video events example</title> &l ...

  2. HTML5视频直播及H5直播扫盲

    章来源:http://geek.csdn.net/news/detail/95188 分享内容简介: 目前视频直播,尤其是移动端的视频直播已经火到不行了,基本上各大互联网公司都有了自己的直播产品,所以 ...

  3. 使用 HTML5 视频事件

    转自:http://msdn.microsoft.com/zh-cn/library/hh924822(v=vs.85).aspx 为什么要使用事件? HTML5 视频对象提供了很多事件,这些事件可以 ...

  4. HTML5 视频直播

    目前视频直播,尤其是移动端的视频直播已经火到不行了,基本上各大互联网公司都有了自己的直播产品,所以对于直播的一些基本知识和主要技术点也要有所了解,本次分享就向大家介绍一下其中的奥秘. 内容大体框架:  ...

  5. iOS 直播-获取音频(视频)数据

    iOS 直播-获取音频(视频)数据 // // ViewController.m // capture-test // // Created by caoxu on 16/6/3. // Copyri ...

  6. HTML5视频Video 音频Audio

    视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...

  7. [转] Android 4.4中播放HTML5视频<video>的Bug

    近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...

  8. html5视频全频播放

    html5视频全频播放 旋转90度 对video进行缩放 修正position 效果还凑合 代码 $(media).rotate({ // angle: 90, duration: 100, anim ...

  9. HTML5视频标签video

    现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...

随机推荐

  1. SQL Server远程连接(2)

  2. 实用 .htaccess 用法大全【转载】

    转载:http://www.techug.com/htaccess-snippets 这里收集的是各种实用的 .htaccess 代码片段,你能想到的用法几乎全在这里. 免责声明: 虽然将这些代码片段 ...

  3. 淘宝轮播JS

    taobao首页轮播原生js面对对象封装版 Author:wyf 2012/2/25

  4. word建立统一的表格样式

    插入一个表格,一般border都是一样粗细,不美观, 这里推荐一种样式如下图(外框和首行都加粗,比较好看) 设置方法: 1.选中表格,上方出现设计选项卡 2.表格样式,点击"新建样式表&qu ...

  5. 使用git命令将本地项目上传到Gitlab上

    1.首先需要安装本地需要安装git 2.在gitlab上创建项目, 如下图, 点击右上角加号到项目创建页面, 填写项目名称, 选择项目访问权限, private为授权的组员才能访问. 3.打开项目源代 ...

  6. [转载] 2 分钟读懂大数据框架 Hadoop 和 Spark 的异同

    转载自https://www.oschina.net/news/73939/hadoop-spark-%20difference 谈到大数据,相信大家对Hadoop和Apache Spark这两个名字 ...

  7. 设计模式的征途—15.观察者(Observer)模式

    在日常生活中,交通信号灯指挥者日益拥挤的城市交通.红灯亮,汽车停止:绿灯亮,汽车继续前行:在这个过程中,交通信号灯是汽车的观察目标,而汽车则是观察者.随着交通信号灯的变化,汽车的行为也会随之变化,一盏 ...

  8. java变量与内存深入了解

    ========================================================================================= 在我看来,学习jav ...

  9. Python的classmethod和staticmethod区别

    静态方法(staticmethod) 类方法(classmethod) 静态方法和类方法都可以通过类名.方法名或者实例.方法访问. #-*- coding:utf8 -*- class A(objec ...

  10. Python中的九九乘法表(for循环)

    用for循环写出的九九乘法表(包括函数的调用) #方向一 for i in range(1,10):    for j in range(1,i+1):        d = i * j        ...