如何获取HTML5视频的持续时间

简介: HTML5视频的Bigger体验是非常令人振奋的,很简单的道理,不用加载和依赖烦人的Flash或其他第三方插件来播放视频,也是大功一件。我们可以通过自定义控件对视频进行显示和操控,其中一个常见的需求是显示视频的时长(duration)。

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

目录
相关文章
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
992 0
|
Web App开发 数据采集 移动开发
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
在Selenium中优化Chrome的HTML5视频捕获涉及更新Chrome和ChromeDriver、配置浏览器选项、使用代理IP、调整加载策略及确保安装了正确编解码器。例如,更新驱动程序,添加如`--autoplay-policy`和`--proxy-server`的命令行参数,使用代理以防止被封,设置页面加载策略为'eager',并安装必要的编解码器来确保视频播放。代码示例展示了如何集成这些优化措施。
497 2
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
|
移动开发 JavaScript 前端开发
HTML5 Video(视频)2
HTML5 `<video>` 标签及其相关属性和方法简介:支持 MP4、WebM 和 Ogg 视频格式。通过 JavaScript 控制播放、暂停、加载及设置属性如音量、尺寸等。示例展示了如何使用 `play()`、`pause()` 方法及 `paused`、`width` 属性创建基本的播放/暂停和调整尺寸控件。
|
Web App开发 移动开发 iOS开发
HTML5 Video(视频)1
HTML5引入了<video>元素,为网页视频播放提供标准方法。它支持播放、暂停和音量控制,以及视频尺寸设置。主要浏览器如IE9+、Firefox、Opera、Chrome和Safari均支持此元素。<video>元素可通过多个<source>子元素链接不同格式的视频文件,以确保兼容性。当前支持的视频格式包括MP4、WebM和Ogg。
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
193 3
|
移动开发 编解码 监控
HTML5 Video(视频)作为背景的优化方案
使用 HTML5 `<video>` 标签作为网页背景视频可以提升视觉效果,但需优化以确保性能和用户体验。主要方法包括:选择合适的视频格式(MP4、WebM、Ogg)和分辨率(720p 或更低),压缩文件大小,确保视频静音和循环播放,使用 CSS 设置全屏样式,根据设备和网络条件加载视频或静态图像,使用 `playsinline` 属性和延迟加载技术提高性能,确保无障碍性,并监控页面加载时间。合理应用背景视频可增强网站视觉效果而不影响用户体验。
|
移动开发 编解码 前端开发
HTML5 <video>视频详解
HTML5引入了内置的`&lt;video&gt;`标签,简化了网页中视频的嵌入与播放。本文详细介绍了HTML5视频的基本语法、常用属性(如controls、autoplay等)、示例代码及使用注意事项,包括浏览器兼容性、跨域请求处理和响应式设计。通过JavaScript还可实现对视频播放的动态控制。掌握这些技巧,有助于提升网站的多媒体体验。
|
前端开发 JavaScript API
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
1943 0
矢泽妮可二次元html视频动态引导页源码
矢泽妮可二次元html视频动态引导页源码 源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
158 0
|
移动开发 前端开发 JavaScript
如何实时准确地从HTML5视频中截取当前播放画面
如何实时准确地从HTML5视频中截取当前播放画面
1623 5