获取HTML5视频的时间长度

HTML5视频的Bigger体验是非常令人振奋的,很简单的道理,不用加载和依赖烦人的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

时间: 2024-07-28 22:44:40

获取HTML5视频的时间长度的相关文章

html5 video获取当前时间和视频总时间长度

<video id="video-active" class="video-active" width="640" height="390" controls="controls"> <source src="myvideo.mp4" type="video/mp4"> </video> <div id="curre

【学习笔记】HTML5视频的属性、方法、事件介绍 详解

规划了一下学习路线 HTML5 -> CSS3  -> JS ->综合 7.31日开始,做好笔记做好记录 认真学习. HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement)所以音频文件和视频文件大多数都是一样的,除了标签名称 <video> <audio> HTML视频 大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含

html5视频事件参数详细

HTML5 视频对象提供了很多事件,这些事件可以帮助简化和增强网页的内容.在此处将看到使用事件检查内容是否可用.视频播放状态以及如何在视频中监视当前播放位置的示例. HTML代码如下: <!DOCTYPE html > <html lang="en"> <head> <meta charset="utf-8"> <meta name="author" content="boloog&

HTML5视频Video元素

一.视频文件格式     HTML5 支持三种视频文件格式(即编解码器).?1.Ogg Theora 使用的文件扩展名为 .ogg或 .ogv,支持它的浏览器包括 Firefox3.5+. Chrome 4+. Opera 10.5+ 以 及Android 版 Firefox.?2.MP4(H.264)使用的文件扩展名为.mp4 或 .m4v,支持它的浏览器包括Safari 3.2+. Chrome 4-?(参见提示).Internet Explorer 9+.iOS(MobileSafari)

Html5视频、音频、API控件---第二天

1.video.audio标签<video src = "movie.mp4" controls = "controls"><video>或者<video controls = "controls"><source src = "movie.mp4"> <video>属性 值 描述autoplay autoplay(可省略) 视频自动播放controls contro

HTML5视频直播技术

分享内容简介:目前视频直播,尤其是移动端的视频直播已经火到不行了,基本上各大互联网公司都有了自己的直播产品,所以对于直播的一些基本知识和主要技术点也要有所了解,本次分享就向大家介绍一下其中的奥秘. 内容大体框架: 怎样利用 HTML5 来播放直播视频 怎样录制直播视频 怎样实时上传直播视频 直播中的用户交互 下面是本期分享内容整理 Hello, 大家好,我是吕鸣,目前是在腾讯 SNG 的即通应用部负责手Q的兴趣部落 Web 前端开发工作. 针对目前比较火的视频直播,我做了一些研究和探索,同时我们

iOS获取本地视频和网络URL视频的缩略图方法

iOS获取本地视频和网络URL视频的缩略图方法 字数222 阅读612 评论0 喜欢13 首先大家先添加AVFoundation和CoreMedia.framework两个框架 第一种本地视频获取缩略图 NSString *path = @"www.51ios.net/本地路径" MPMoviePlayerController *51iosMPMovie = [[MPMoviePlayerController alloc] initWithContentURL:[NSURL fileU

如何挑选适合自己的HTML5视频课程

随着网络技术的发展,HTML5技术越来越成熟,很多的应用已经逐渐出现在你我日常生活中了,现在HTML5的应用不仅弥补了以往HTML的应用弊端,同时也促进了HTML5的应用,这样就逼迫行业必须要进行规划,因此现在从事HTML5开发工作可以获得更加可观的薪资收入. 很多人都希望可以加入HTML5开发工作中,可是在从事HTML5开发工作之前,需要先系统学习HTML5.我们千万不要相信半个月速成,20天精通的鬼话,学技术不是练葵花宝典,只要挥刀自宫就能速成.任何HTML5大神高手都是从基础一点点做起,通

Html5之高级-4 HTML5视频处理(H5中播放视频、编程实现视频播放器)

一.在 HTML5 中播放视频 在 HTML5 中播放视频 - HTML5 中提到最多的是视频处理,视频也是互联网中的重要应用.在HTML5中,增加了一个元素,以便在HTML文档中插入和播放视频,这个元素就是video元素 - video元素提供了播放.暂停和音量控件来控制视频,也提供了width和height属性控制视频的尺寸.如设置的高度和宽度等. - 使用video元素至少要提供两种视频格式的文件: OGG和MP4 - OGG: 包含Theora 视频和 Vorbis 音频解码器 - MP