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. [转]彻底弄懂css中单位px和em,rem的区别

    难怪会问我 rem 和 em, 这俩或在移动端还是很有必要学习的. root em OK? 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? P ...

  2. 在游览器上可以连网,Ionic打包后不能连接网络

    在游览器上可以连网,Ionic打包后不能连接网络.可能是没有安装cordova-plugin-whitelist插件.  解决方案:

  3. Hibernate开发文档

    hibernate配置 映射约束文件 <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3. ...

  4. [转载] Hive与HBase的联系与区别

    转载自http://blog.csdn.net/wangmuming/article/details/23954527和http://www.cnblogs.com/justinzhang/p/427 ...

  5. 【python】python的正则表达式 re

    ps:本文摘自互联网,觉得结构很好,讲的也很清晰.记下,备查. 延伸阅读:python的 内建函数 和 subprocess .此文是本系列的第三篇文章了,和之前一样,内容出自官方文档,但是会有自己的 ...

  6. 一个在java后台实现的对图片进行加网纹或水印的工具类

    import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  7. 使用Angular Router导航基础

    名称 简介 Routes 路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件. RouterOutlet 在HTML中标记路由内容呈现位置的占位符指令. Router ...

  8. 为什么大家觉得自学HTML5难?

    互联网发展到今天,越来越多的技术岗位人才出现了稀缺的状态,就拿当前的HTML5来讲,基本成为了每家互联网公司不可缺少的人才.如果抓住这个机会,把HTML5搞好,那么前途不可限量,而且这门行业是越老越吃 ...

  9. react入门到进阶(二)

    一.react属性与事件 1.State属性 State,翻译过来是状态的意思,所以它就代表着组件的状态.React把用户界面(UI)当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界 ...

  10. Activity的直接子类

    Activity的直接子类 AccountAuthenticatorActivity, AliasActivity ExpandableListActivity FragmentActivity Li ...