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. transform的影响

    http://www.cnblogs.com/chuangweili/p/5167986.html transform 各种影响 1.提升元素的z-index层级,下面这个例子会让前面的图片显示在上面 ...

  2. 透过浏览器看HTTP缓存[转载]

    http://www.admin10000.com/document/6299.html     作为前端开发人员,对于我们的站点或应用的缓存机制我们能做的似乎不多,但这些却是与我们关注的性能息息相关 ...

  3. 「Vue」起步 - vue-router路由与页面间导航

    vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请 ...

  4. lvs学习笔记

    本人身为一个网工,最近一直在工作中学习linux的相关知识.前短时间通过自查资料学习了lvs的相关内容,摘录部分整理后和大家分享,内容较多,较琐碎,望见谅!!! LVS 从Linux内核版本2.6起, ...

  5. Asp.Net 为什么需要异步

    之前看过别人提出为什么在本是多线程的Asp.Net下需要异步环境的时候,提出在Asp.Net环境下本身就是多线程,每个请求就是由一个专门IIS线程负责(咱不说Core下无IIS的情况).所以以此推论A ...

  6. 六:在线工具网站,让你PC上要装的软件少一半!

    记住这几个在线工具网站,让你PC上要装的软件少一半! 一.uzer.me——丰富的云端应用聚合 这个云平台将我们常用的Office系列软件.Adobe家族的系列软件……乃至CAD制图都整合在了云端,随 ...

  7. Java _分页Jdbc 版

    人生得意须尽欢,莫使金樽空对月. 先天下之忧而忧,后天下之乐而乐. 大东北的天气已经渐入佳境了,在夜深人静的时候,随着鼠标的移动,键盘清脆的声音,开启了今天的睡前代码工程!今天聊聊JDBC版本的分页, ...

  8. [转载] java多线程学习-java.util.concurrent详解(二)Semaphore/FutureTask/Exchanger

    转载自http://janeky.iteye.com/blog/770393 ------------------------------------------------------------- ...

  9. 重写Fields 控制models 数据输出字段

    models: public function Fields() { $fields = parent::Fields();//原来models输出字段 $fields['parentComment' ...

  10. 《Linux命令行与shell脚本编程大全》第十四章 处理用户输入

    有时还会需要脚本能够与使用者交互.bash shell提供了一些不同的方法来从用户处获得数据, 包括命令行参数,命令行选项,以及直接从键盘读取输入的能力. 14.1 命令行参数 就是添加在命令后的数据 ...