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="current">0:00</div>
<div id="duration">0:00</div>

js代码

$(document).ready(function(){
  $("#video-active").on(
    "timeupdate",
    function(event){
      onTrackedVideoFrame(this.currentTime, this.duration);
    });
}

function onTrackedVideoFrame(currentTime, duration){
    $("#current").text(currentTime);
    $("#duration").text(duration);
}
时间: 2024-11-10 01:11:01

html5 video获取当前时间和视频总时间长度的相关文章

[HTML5] Video 标签播放及控制视频

Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg.mp4 .webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖. 0x0 预备知识 不同的浏览器支持的视频格式可能不同,以下是摘自 W3School 各个浏览器对三种视频格式的支持情况: 0x1 在 Video 中嵌入视频 <video src="/movie.mp4" controls="controls"> 你就用这个浏览器有出息吗?

html5 video获取实时播放进度的方法

getvideoprogress(); function getvideoprogress() { setTimeout(function () { var vid = document.getElementById("video1"); var currentTime=vid.currentTime.toFixed(1); if(currentTime==1.2){ //触发 return false; } console.log(currentTime); getvideoprog

获取HTML5视频的时间长度

HTML5视频的Bigger体验是非常令人振奋的,很简单的道理,不用加载和依赖烦人的Flash或其他第三方插件来播放视频,也是大功一件.我们可以通过自定义控件对视频进行显示和操控,其中一个常见的需求是显示视频的时长(duration).下面我们一起来看看如何获得并显示视频的持续时间! JavaScript 代码 video 元素有一个属性(property)叫做 duration,表示的是视频内容的时间长度,单位是秒.要比较好地显示视频的持续时间,我们需要使用到 parseInt 函数,以及取模

获取并设置HTML5 Video的当前进度

上周翻译了一篇文章: 如何获取HTML5视频的持续时间.很显然这是一门简单却很实用的技术, 但我认为还有一个更重要的知识点是控制视频的时间设置.在用HTML5技术处理视频时,设置(setting)和获取(getting)时间都是很有用的,那就让我们一起来看看如何达成这个 目标吧! 在管理视频状态时,最重要的是要了解 currentTime 是个什么鬼.你可以通过这个属性获取当前播放到了哪个时间点: // https://www.youtube.com/watch?v=Cwkej79U3ek co

(转)让所有浏览器支持HTML5 video视频标签

转自http://www.zhangxinxu.com/wordpress/?p=661 一.前面的唠叨 我记得就是前几个月吧,有条消息说YouTube支持了HTML5视频嵌入标签video,好吧,我听说而已,因为我不是个擅长FQ的人,到底如何我也不得而知. 与主题不相关的HTML5方面的东西我就不多说了,对于video标签,获取大家都听说了,这个标签的功能如同现在HTML语言中的img标签,就现在,比如要链接并显示一张图片,可以这样子: <img data-src="http://ima

HTML5 video标签播放视频下载原理

HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload="metadata"> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=676422 --> <source src="assets/dizzy.mp4" type="video/mp4"

HTML5 Video(视频)

HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari

18、HTML5 Video(视频)和 audio(音频)

video标签概述: <video> 元素提供了 播放.暂停和音量控件来控制视频. 同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留.如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变. <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的. <vid

HTML5 video标签实现视频播放:普通篇

随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. 下面先介绍下video标签的一般用法 video标签的属性如下: 注:control 属性供添加播放.暂停和音量控件. 一般用法: <div class="videoCon"> <video width="750" height="300" id="videoP" src="video.mp4"