首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

FlowPlayer: html5 "timeupdate“事件有没有等价物,这样我就可以获取flowPlayer对象的currentTime属性?

在FlowPlayer中,html5 "timeupdate"事件是用于在视频播放过程中定期触发的事件,以便更新视频的当前时间。它没有直接的等价物,但可以通过其他方式获取FlowPlayer对象的currentTime属性。

一种方法是使用FlowPlayer提供的API方法来获取当前时间。可以使用FlowPlayer的getTime()方法来获取当前播放时间,该方法返回以秒为单位的时间值。例如:

代码语言:txt
复制
var player = flowplayer("#player");
var currentTime = player.getTime();

另一种方法是使用FlowPlayer的JavaScript API来监听播放器的状态变化,并在状态变化时获取当前时间。可以使用FlowPlayer的on()方法来监听状态变化事件,例如:

代码语言:txt
复制
var player = flowplayer("#player");
player.on("time", function (e, api) {
  var currentTime = api.video.time;
  // 处理当前时间
});

在这个例子中,当播放器的时间更新时,"time"事件将被触发,回调函数将提供一个包含当前时间的api.video.time属性。

需要注意的是,以上方法都是基于FlowPlayer的特定API和事件,因此在其他播放器或框架中可能没有直接的等价物。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

13款用于Web流行HTML5视频播放器

2 Shaka Player Shaka Player是一款非常流行免费、开源HTML5视频播放器。无需任何插件或Flash,它就可以支持HLS和DASH等自适应码率流媒体协议。...对于这样一款开源、社区支持播放器,你可以使用大量第三方插件,或者编写你自己插件,然后提交给Clappr。...dash.js适用于各类编码格式,支持带内事件、多时段,并且支持跨浏览器DRM且商用免费。...12 Radiant Media Player Radiant Media Player这样描述自己:“随处可见现代HTML5视频播放器,可快速创建Web、移动和OTT应用。”...第二个优势是:它是一个支持多平台播放器厂商,同时支持Android、iOS和tvOS。 结语 希望以上列出流行HTML5视频播放器能够对你有所帮助。

5.5K20

video标签在不同平台上事件表现差异分析

,等待数据 一致 一致 durationchange 获取到视频长度,duration属性能获得真实视频长度 一致 可能在play()事件触发前,可能没有获取到真实视频长度:可能触发多次, 只有最后一次才能获取到真实...视频播放后,更新播放进度, 会有明确进度变化,可以获取currentTime 一致 第一次可能会有误差,如果 timeupdate事件currentTime发生变化,代表视频一定开始播放 progress...| 目前可以监控事件有以下几点: 1、 视频加载时间 play事件触发时间 至 timeupdate事件第一次currentTime 属性值发生变化时,在加载过程中可用suspend判断是否有手动暂停...2、 视频缓冲次数 video对象buffered属性返回表示视频已缓冲部分 TimeRanges 对象currentTime属性设置或返回视频中的当前播放位置(以秒计),利用缓冲区变化可以记录视频缓冲次数...目前尝试缓冲判断为: timeupdate事件中,currentTime 超出 buffered记录范围。

2.5K60

video标签在不同平台上事件表现差异分析

,等待数据 一致 一致 durationchange 获取到视频长度,duration属性能获得真实视频长度 一致 可能在play()事件触发前,可能没有获取到真实视频长度:可能触发多次, 只有最后一次才能获取到真实...视频播放后,更新播放进度, 会有明确进度变化,可以获取currentTime 一致 第一次可能会有误差,如果 timeupdate事件currentTime发生变化,代表视频一定开始播放 progress...| 目前可以监控事件有以下几点: 1、 视频加载时间 play事件触发时间 至 timeupdate事件第一次currentTime 属性值发生变化时,在加载过程中可用suspend判断是否有手动暂停...2、 视频缓冲次数 video对象buffered属性返回表示视频已缓冲部分 TimeRanges 对象currentTime属性设置或返回视频中的当前播放位置(以秒计),利用缓冲区变化可以记录视频缓冲次数...目前尝试缓冲判断为: timeupdate事件中,currentTime 超出 buffered记录范围。

1.1K20

必学必会-音频和视频

(感谢一键三连) 学习深入理解HTML5audio和video。...audio元素是专门用于在网页中播放网络音频 video元素是专门用于在网页中播放视频HTML5中audio和video元素提供接口包含了一系列属性,方法和事件,这些接口可以帮助开发完成对音频和视频操作...url地址 videoWidth,只读,video元素特有属性获取视频原始宽度 videoHeight,只读,video元素特有属性获取视频原始高度 currentTime获取或设置当前媒体播放位置时间点...对象,该对象内容包括已请求部分开始时间和结束时间 networkState,只读,获取媒体资源加载状态 buffered,只读,获取本地缓存媒体数据TimesRanges对象 readyState...捕获事件方式 捕获事件有两种方法:一种是添加事件句柄,一种是监听。

1.6K10

实现一个简单音乐播放器

歌曲的当前下标 audio 当前歌曲对象 MusicList 歌曲数据对象 musicObj 当前歌曲对象 loadMusic函数传递参数 三、前提知识(audio对象属性) 1、audioObject...audioObject.ended 判断音乐是否播放完毕,只读属性 11、audio.paused 表示音频对象是否处于暂停状态,可以用来设置暂停键 四、前提知识(audio对象事件) 1、playing...当currentTime更新时会触发timeupdate事件,这个事件触发频率由系统决定,但是会保证每秒触发4-66次(前提是每次事件处理不会超过250ms....1、设置progress-now宽度随着播放时间变化而变化 写成这样 audio.ontimeupdate=function(){ $('.progress-now').style.width...要写成audio.currentTime猜想应该是和set intervalthis值会发生改变。

3.5K30

HTML5Video标签详细说明手册

1 Video介绍 引用翻译文档《在HTML5页面中嵌入音频和视频》中介绍文字:“当今,在网页上嵌入视频且所有用户不管使用任何浏览器或者操作系统都能看到唯一可靠方法是使用Flash。...Opera、Mozilla、Chrome宣布将完全支持VP8,IE宣布部分支持(需要装一个插件,但如果没记错的话,HTML5一个愿景就是脱离浏览器插件,微软真是让人觉得悲剧)。...好吧,现在让我们从技术层面来认识HTML 5视频,包括标签使用,视频对象可以用到媒介属性和方法,以及媒介事件。...; error事件获取媒介数据出错; emptied事件:媒介元素网络状态突然变为未初始化; stalled事件:浏览器获取媒介数据异常; play事件:即将开始播放 pause事件:暂停播放 loadedmetadata...(期间不需要缓冲); seeking事件:浏览器正在请求数据(seeking属性值为true); seeked事件:浏览器停止请求数据(seeking属性值为false); timeupdate事件:当前播放位置

1.9K20

从零开发弹幕视频播放器

document.querySelector('video') 等方式获取 video 元素,就可以操作视频行为了,下面介绍 video 常用事件属性和方法。...,这可能是因为下载已完成或因为其他原因 播放时 在媒体开始播放时触发可能是初次播放、暂停后恢复或结束后重新开始 属性 通过 video 元素,我们可以获取上面提到属性,也可以改变它来操作视频,比如设置...事件在控制器显示情况下更新 DOM,progress 事件更新视频缓存进度条 video.buffered.end(video.buffered.length - 1) 可以获取最后一段 TimeRange...还可以将上面监听 progress 事件获取 buffered 时间,比对 currentTime 来决定是否去除 player-loading。...cue 对象长下面这样。 画中画 Picture-in-Picture(画中画)可以让视频弹出来小屏播放,就算最小化浏览器或者切换其他 tab 页也可以播放。

4.2K30

视频H5Video标签在微信里坑和技巧(转)

随着 4G 普遍以及 WiFi 广泛使用,手机上网速已经足够稳定和高速,以视频为主 HTML5 也越来越普遍了,相比帧动画,视频表现更加丰富,前段时间开发了一个以视频为主移动端 HTML5,...但是,如果你看过一些腾讯视频类 HTML5,会发现它们在微信里是可以内联播放,而这个功能是需要申请加入白名单。...x5videoenterfullscreen x5videoexitfullscreen 进入全屏播放时触发 x5videoexitfullscreen x5videoenterfullscreen 通过监听这两个事件就可以知道当前播放状态...video 事件 video 支持事件很多,但在有些事件在不同系统上跟预想表现不一致,在尝试比较之后,使用 timeupdate 和 ended 这两个事件基本可以满足需求 video.addEventListener...('timeupdate', function (e) { console.log(video.currentTime) // 当前播放进度 }) video.addEventListener

2.6K20

H5C3第五节

-- 现象: IE8 以下版本不支持 html5 语义化标签 --> 是header标签, 应该独占一整行 解决方式: 在浏览器解析标签之前, 动态创建一下 header...监听网络变化 为了更好的确定网络是否连接,HTML5还定义了两个事件,用于监听网络状态变化。...API,这样使得我们可以基于用户位置开发互联网应用,即基于位置服务LBS(Location Base Service) 隐私 HTML5规范提供了一套保护用户隐私机制。...DOM对象中,存在一个files属性,这个属性是FileList对象,是一个伪数组,里面存储着上传所有文件,当input框指定了multiple属性之后,就可以上传多个文件了。...也就是说,通过files这个属性,我们就可以获取到所有上传文件。 file对象 File对象中包含了文件最后修改时间、文件名、文件类型等信息。

68210

HTML5 操作视频

音频编码 WebM 视频文件 HTML5 视频播放实例     我们在学习任何新东西时候,直接从实例入手,先亲自动手操作他整个运作过程,这样对于我们对新事物认识和理解是非常深刻,对于HTML5...》HTML5 使用DOM控制Video标签     在HTML中,它其中包含所有标签元素,从DOM角度来看他们都有三大要素:属性、方法、事件HTML5 标签和其他HTML标签一样也同样拥有方法...、属性事件。    ...、属性以及事件​​列表​     列表中列出了当今主流浏览器支持video标签方法、属性事件,在下列列表属性中,只有 videoWidth 和 videoHeight 属性是立即可用。...其他属性在视频元数据已加载后才可使用;对于每个属性、方法和事件使用示例请参考《HTML 参考手册》 属性 方法 事件 currentSrc play() play currentTime pause

1.3K10

工具系列 | H5自定义视频播放器实现

在TimeTanges事件中,针对完成缓冲部分,有表示开始点start属性和结束点end属性,与currentTime相同, 容纳了以秒计算实数值。...值 说明 TimeRanges事件 表示声频、视频缓冲范围;TimeTanges事件属性:length:获取声频、视频缓冲长度;start(index):获取缓冲范围开始点;end(index)...TimeTanges事件属性:length:获取声频、视频播放长度;start(index):获取视频开始点end(index):获取视频结束点注:矩阵起始序号为0 JavaScript 语法...(6)ontimeupdate事件 为当前播放位置发生改变后触发事件timeupdate事件经常与Audio/Video事件currentTime属性配合使用。...(7)onvolumechange事件 为更改了声频、视频音量时触发事件 (8)onwaiting事件 为视频因为需要下载下一帧而停止时触发事件 如果系统看过以上H5声频、音频相关知识,那么以下栗子就可以看得懂了

5.3K10

怎么用 JavaScript 构建自定义 HTML5 视频播放器

在这个教程中,将会带你使用 JavaScript 构建一个自定义视频播放器。目标是如何利用浏览器 HTML5 Media API 来提升默认设置体验。...即使我们要为控件实现自定义界面,保留 元素上 controls 属性是个很好主意,这样用户不管出于什么原因禁用 JavaScript,浏览器本机控件依旧可使用。...无论什么时候,视频 currentTime 属性值更新了,事件就会触发。...); progressBar.value = Math.floor(video.currentTime); } 然后,在第一个事件监听器下,为 video 添加一个新名为 timeupdate 事件监听器...添加画中画支持 Picture-in-Picture(PiP) API 允许用户在浮动窗口(其中位于其他窗口之上) 中观看视频,这样他们就可以在观看视频同时将注意力放在其他站点或者应用上。

10.8K20

前端测试题:(解析)用于播放音频文件正确HTML5元素是?

考核内容: html5 新标签 题发散度: ★ 试题难度: ★ 看看大家选择 ? (音频视频是啥?) ? ?...在HTML5之前要插入音频与视频文件要使用 object 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。...JS控制: audio和video都可以通过标签获取对象 let Media = document.getElementById("media"); 错误状态 Media.error; //null:正常...;//当前播放速度,设置后马上改变 Media.played; //返回已经播放区域,TimeRanges,关于此对象见下文 Media.seekable; //返回可以seek区域 TimeRanges...事件: eventTester = function(e){ Media.addEventListener(e,function(){ console.log((newDate()).getTime

2.4K10

基于reactH5音频播放器

audio满足如下特殊属性 HTML 音频/视频重要属性 属性 描述 currentTime(重要) 设置或返回音频/视频中的当前播放位置(以秒计)。...ontimeupdate 当currentTime更新时会触发timeupdate事件” pause 当音频/视频已暂停时触发。 play 当音频/视频已开始或不再暂停时触发。...代码中“audio-progress-bar-preload”是用来做缓冲条,大概做法也是一样,不过获取缓冲进度得用到audiobuffered属性,具体用法推荐大家去MDN看看,在这里就不多赘述...: touchstart--负责获取触摸进度触点时触点方位 touchmove--负责动态计算触点拖动距离,并转换成this.state.currentTime从而触发组件重渲染. touchend...,它代表着进度条宽度与音频总时长关系,我们可以通过获取触点移动距离从而计算出此时对应currentTime //下面是触点移动时会碰到情况,分为正移动、负移动以及两端极限移动。

8K10

Lily_music 网页音乐播放器 -可搜索(附歌词联动播放效果解说)

,定义好了整个播放器对象所需要参数和方法,就可以进行具体开发了 歌词联动播放 具体谈谈这个功能实现 歌词解析,之前做==乐诗博客==采用是自己写一种歌词解析滚动播放方法 首先明白一般歌词形式是...: 00:13.80期望飞上恬静月球遥望每家窗 00:18.24谁伴深爱细味露台玫瑰香 这样形式,利用 ajax 异步请求到歌词文件内容,然后就可以进行字符串裁剪,单单取出时间和歌词,html5...",function(){ //获取当前播放时间,获得是秒数 var time = this.currentTime; //解析音乐对应时间 var m = parseInt....slice(1)); var time = min * 60 + sec; lrcText[time] = clause; } } return lrcText; } 这样子解析出来是一个对象...timeupdate 监听事件里实现滚动播放歌词了(代码上面有) 拖动进度条 鼠标拖动进度条时候,有三个监听事件 按下:onmousedown 移动:onmousemove 弹起:onmouseup

5.4K70

前端必学必会-多媒体-本地存储-浏览器与服务器交互-通信功能

想到了video元素和audio元素。 学习元素知识点,涉及属性,方法,事件。在HTML5出现前,展示视频,音频,动画等,都是使用第三方自主开发,使用最多工具是flash了。...开始时间:请求到数据第一帧时间 结束时间:请求到数据最后一帧时间 currentTime属性,startTime属性,duration属性 currentTime属性用来修改当前播放位置,以及读取媒体的当前播放位置...事件 描述 loadstart 浏览器开始找媒体数据 progress 浏览器正在获取媒体数据 suspend 浏览器暂停获取媒体数据,但下载过程并没有结束 abort 中止获取媒体数据,并不是由错误引起...这样,当浏览器在在线状态时,就可以把这些文件缓存到本地,往后,当用户在离线状态下,访问应用程序时,这些资源文件就会自动加载,从而让用户正常使用浏览。...HTML5 DOM Storage机制提供了一种方式让程序员能够把信息存储到本地计算机上,在需要时获取

2.1K20

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券