html5设置视频显示第一帧,如何检测HTML5视频何时播放第一帧?

还有另一种方法可以使用currentTime并为视频更改的每个时间定义一个函数。在HTML5视频元素顶部设置div,并在currentTime在3到4秒之间时修改该元素。

示例代码应该是这样的:

HTML:

Your browser does not support HTML5 video.

CSS:

#video_box{

position:relative;

}

#video_overlays {

position:absolute;

width:160px;

min-height:100px;

background:transparent;

z-index:300000;

bottom:50px;

left:10px;

text-align:center;

}

的JavaScript:

var vid = document.getElementById("myVideo");

// Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed

vid.ontimeupdate = function() {myFunction()};

function myFunction() {

//if currentTime is greater than 3 but less than 4, as in second 3+, go into if statement, otherwise go to else statement

if (vid.currentTime > 3 && vid.currentTime < 4) {

document.getElementById("video_overlays").innerHTML = '

Image Here

';

}

else {

document.getElementById("video_overlays").innerHTML = '';

}

}

你可以第一个if语句停顿内该视频,然后显示一个图像,然后在视频开始一段时间后重新开始,如果这是您的意图,但此代码基本上是做这种事情的骨架。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/436568.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

maven 公共模块依赖_「spring-boot 源码解析」spring-boot 依赖管理

问题maven 工程&#xff0c;依赖管理是非常基本又非常重要的功能&#xff0c;现在的工程越来越庞大&#xff0c;依赖越来越多&#xff0c;各种二方包、三方包太多太多&#xff0c;依赖冲突处理起来真是让人头疼&#xff0c;经常需要涉及到多个地方需要调整。微信公众号&#xf…

【转】ABP源码分析三十五:ABP中动态WebAPI原理解析

动态WebAPI应该算是ABP中最Magic的功能之一了吧。开发人员无须定义继承自ApiController的类&#xff0c;只须重用Application Service中的类就可以对外提供WebAPI的功能&#xff0c;这应该算是对DRY的最佳诠释了. 如下图所示&#xff0c;一行代码就为所有实现了IApplicationSer…

计算机科学与探索 影响因子,《计算机科学与探索》国家级计算机期刊投稿论文发表...

《计算机科学与探索》国家级计算机期刊投稿论文发表《计算机科学与探索》杂志简介-是不是正规期刊&#xff1a;《计算机科学与探索》是由中华人民共和国工业和信息化部主管、华北计算技术研究所361期刊网主办的国内外公开发行的计算机学报级高级学术期刊&#xff0c;中国计算机…

如何将SAP数据传输到其他系统(Transferring Data from SAP to Other Systems)

在sap里有GUI_DOWNLOAD 函数将sap的数据下载到客户端机器&#xff08;presentation server&#xff09;&#xff0c;而Dataset则是将数据传输到应用服务器&#xff08;Application server&#xff09;。然而在有些时候需要将数据传输到第三方其他系统(3rd Party System)&#x…

jstl处理栏目与子栏目_Detelogy智能前处理设备微展厅P2:再添新品

时隔小半年&#xff0c;新一轮Detelogy产品总览展示栏目再与大家见面。事不宜迟&#xff0c;点击视频即刻进入我们的智能前处理设备微展厅。 知乎视频​www.zhihu.com01 高效多样品前处理系统02 智能浓缩设备全系列03 智能湿法消解设备应用领域农残、兽残检测有机磷类、有机氯类…

【转】ABP源码分析三十六:ABP.Web.Api

这里的内容和ABP 动态webapi没有关系。除了动态webapi&#xff0c;ABP必然是支持使用传统的webApi。ABP.Web.Api模块中实现了一些同意的基础功能&#xff0c;以方便我们创建和使用asp.net webApi。 AbpApiController&#xff1a;这是一个抽象基类&#xff0c;继承自ApiControl…

408最后计算机网络题库,2021考研计算机统考408专业基础综合题库

**部分为历年考研真题。提供2009&#xff5e;2018年考研真题及参考答案&#xff0c;其中2009&#xff5e;2015年每道真题均提供详细答案解析&#xff0c;通过对真题的演练和分析&#xff0c;可以帮助学员牢牢抓住计算机学科专业基础综合考试的命题特点&#xff0c;提高复习效率…

Unity-Shader-渲染队列,ZTest,ZWrite

Unity-Shader-渲染队列&#xff0c;ZTest&#xff0c;ZWrite ZTest&#xff08;深度测试&#xff09;和ZWrite&#xff08;深度写入&#xff09;ZTest Less&#xff08;深度小于当前缓存则通过&#xff09;ZTest Greater&#xff08;深度大于当前缓存则通过&#xff09;ZTest L…

如何做好职业规划(乾卦)

职业一般来说会占用我们每个人生命中的大部分时间&#xff0c;而职业发展中变化莫测的因数常常令我们束手无策、捉襟见肘。在面对变化多端的情况时&#xff0c;中国人的传统智慧就发挥出最大的优势了。如何将快速变化 、不好掌控的事情处理得井井有条&#xff0c;这需要我们懂得…

850是什么意思_沃尔沃为什么不是一线豪华品牌?

1927年诞生的沃尔沃&#xff0c;它造车的历史比宝马还要略早几年。但经过近百年的发展&#xff0c;宝马品牌无论在国际上还是我们国内&#xff0c;以销量还是品牌含金量来看&#xff0c;都是众所公认的豪华品牌第一阵营成员&#xff08;奔驰、宝马&#xff0c;奥迪&#xff09;…

【转】ABP源码分析三十七:ABP.Web.Api Script Proxy API

ABP提供Script Proxy WebApi为所有的Dynamic WebApi生成访问这些WebApi的JQuery代理&#xff0c;AngularJs代理以及TypeScriptor代理。这些个代理就是javascript脚本,通过这些代理可以简单的访问Dynamic webApi。 如下实例演示一个最基本的应用场景。首先通过Script Proxy Web…

repeater导出excel html,Repeater显示数据,并且导出到excel

我的数据是自己手工生产&#xff0c;然后repeater绑定&#xff0c;最后导出excel&#xff0c;但出现问题&#xff0c;谁可以给个例子什么的没有。关键代码如下&#xff1a;protected void LinkButton1_Click(object sender, EventArgs e){string time DateTime.Now.ToString(&…

重新学.Net[一]——.Net的组成

.Net是一个广义的名词。它是一个平台或说是战略。在.Net诞生之初&#xff0c;微软在其一系列产品中都冠以.Net的标签。这也给很多人带来疑惑和不解&#xff0c;到底.Net中具体包含什么&#xff1f;这个问题不仅是我有&#xff0c;我想&#xff0c;甚至微软本身以及一些专家也会…

word2003如何设置护眼模式_手机屏幕的护眼模式是如何保护你的眼睛?

公司业务包括&#xff1a;二手机回收&#xff0c;二手机销售&#xff0c;配件批发&#xff0c;以及手机维修等业务&#xff0c;目前公司业务覆盖山西全境以及周边省市&#xff0c;在同行业有较高知名度。 随着智能手机的普及&#xff0c;大多数人也逐渐开始沉迷于每天的刷手…

WinCE系统的编译过程

作者&#xff1a;ARM-WinCE 在WinCE系统中&#xff0c;当我们完成了相关的开发和系统定制工作以后&#xff0c;会编译WinCE系统&#xff0c;最后生成NK.bin和NK.nb0。我现在用WinCE6.0在自己的PC上面编译一次用时19分16秒(有一天无聊&#xff0c;就测了一下)。下面介绍一下WinC…

【转】ABP源码分析三十八: ABP.Web.Api.OData

如果对OData不熟悉的话可参考OData的初步认识一文以获取OData的一些初步知识。 API.Odata 模块唯一用处就是提供了一个泛型版本的ODataController&#xff0c;实现了Controller代码的常用。 AbpODataEntityController<TEntity, TPrimaryKey>&#xff1a;使用ABP的repos…

由表单中onsubmit=return false;想到的

众所周知&#xff0c;在表单中加上οnsubmit"return false;"可以阻止表单提交。 下面是简单的一小段代码&#xff1a; 代码<form action"index.jsp" method"post" onsubmit"submitTest();"> <INPUT value"www">…

计算机知识竞赛主持人开场词,护理竞赛主持人台词:主持人开场白台词

专科护理在世界范围内蓬勃发展&#xff0c;高质量的专科护理人才是推动护理事业发展的原动力。下面是小编给大家整理的护理竞赛主持人台词&#xff0c;仅供参考。护理竞赛主持人台词【篇一】在这充满火热激情的季节&#xff0c;我们又迎来了“5.12国际护士节”。让我们首先向辛…

饭卡可以用水冲洗吗_薄壁不锈钢水管真的可以满足大众用水健康管道的要求吗?...

我们都认识现如今的自来水的出厂干净程度达到安全、卫生&#xff0c;干净标准。但是&#xff0c;很是收到不少市民的投诉&#xff0c;说日常饮用的自来水有异味、浑浊、杂质&#xff0c;为何会出现这番现象呢&#xff0c;为此&#xff0c;我国也针对此研究调查&#xff0c;最后…

WinCE的快速启动

PXA270上的双启动功能已经实现了&#xff0c;但又引入了一个新问题&#xff0c;WinCE的启动太慢&#xff0c;大概需要2分钟&#xff01;这显然是不能忍受的。通过两天的努力&#xff0c;现在已经缩短到20秒&#xff0c;虽然还是有点长&#xff0c;但已改善不少了。先整理一下&a…