pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

有關(guān)HTML5 Video對(duì)象的ontimeupdate事件(Chrome上無效)的

日期在做一個(gè)視頻播放的頁面,其中用到了HTML5的Video對(duì)象,這個(gè)是HTML5中新增的一個(gè)對(duì)象,支持多種不同格式的視頻在線播放,功能比較強(qiáng)大,而且還擴(kuò)展了許多事件,可以通過JavaScript腳本來對(duì)視頻播放進(jìn)行控制。參考下面兩個(gè)鏈接:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465962.aspx
http://www.w3school.com.cn/html5/tag_video.asp

Video對(duì)象可以通過ontimeupdate事件來報(bào)告當(dāng)前的播放進(jìn)度,同時(shí)通過該事件還可以根據(jù)視頻播放的情況來控制頁面上的其它元素,例如隨著視頻播放的進(jìn)度來切換章節(jié)、顯示額外信息等。下面是一個(gè)例子:
 

復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
</head>
<body>
<script type="text/javascript">
function timeUpdate() {
document.getElementById('time').innerHTML = video.currentTime;
}
function durationChange() {
document.getElementById('duration').innerHTML = video.duration;
}
function seekVideo() {
document.getElementById('video').currentTime = document.getElementById('seekText').value;
}
window.onload = function () {
var videoPlayer = document.getElementById("video");
videoPlayer.ontimeupdate = function () { timeUpdate(); };
};
</script>
<div>
<video id="video" controls="controls"
poster="./images/videoground1.png"
src="./videoSource/video1.mp4" width="450px" height="320px"
ondurationchange="durationChange()" />
</div>
<div>Time: <span id="time">0</span> of <span id="duration">0</span> seconds.</div>
<div>
<input type="text" id="seekText" />
<input type="button" id="seekBtn" value="Seek Video" onclick="seekVideo();" />
</div>
</body>
</html>


當(dāng)然你也可以像在頁面上使用其它元素一樣,給Video對(duì)象動(dòng)態(tài)添加屬性或者掛事件,如:

復(fù)制代碼 代碼如下:
video.ontimeupdate = function () { getCurrentVideoPosition(); };


不過上面這行代碼貌似在Chrome上無效,可以使用addEventListener來代替它:

復(fù)制代碼 代碼如下:
videoPlayer.addEventListener("timeupdate", function () { getCurrentVideoPosition(); }, false);


不知道是什么原因在Chrome上不能直接將ontimeupdate事件掛在Video元素上,而必須通過addEventListener方法來添加事件。不過addEventListener也兼容IE和Firefox瀏覽器,所以應(yīng)該是通過的。

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章主要介紹了有關(guān)HTML5頁面在iPhoneX適配問題,需要的朋友可以參考下
本篇文章主要介紹了html5中canvas圖表實(shí)現(xiàn)柱狀圖的示例,本文使用canvas來實(shí)現(xiàn)一個(gè)圖表,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
Adobe公司出品的多媒體處理軟件產(chǎn)品線較多,涵蓋了音視頻編輯、圖像處理、平面設(shè)計(jì)、影視后期等領(lǐng)域。這篇文章主要介紹了Adobe Html5 Extension開發(fā)初體驗(yàn)圖文教程,非常不錯(cuò),需要的朋
這篇文章主要介紹了基于HTML5的WebGL經(jīng)典3D虛擬機(jī)房漫游動(dòng)畫,需要的朋友可以參考下
這篇文章主要介紹了手機(jī)端用rem+scss做適配的詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
本篇文章主要介紹了canvas 實(shí)現(xiàn) github404動(dòng)態(tài)效果的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 超细粉碎机|超微气流磨|气流分级机|粉体改性设备|超微粉碎设备-山东埃尔派粉碎机厂家 | 样品瓶(色谱样品瓶)百科-浙江哈迈科技有限公司 | 结晶点测定仪-润滑脂滴点测定仪-大连煜烁 | 仿古瓦,仿古金属瓦,铝瓦,铜瓦,铝合金瓦-西安东申景观艺术工程有限公司 | 重庆小面培训_重庆小面技术培训学习班哪家好【终身免费复学】 | SRRC认证|CCC认证|CTA申请_IMEI|MAC地址注册-英利检测 | 消泡剂-水处理消泡剂-涂料消泡剂-切削液消泡剂价格-东莞德丰消泡剂厂家 | 扬州汇丰仪表有限公司 | 东莞喷砂机-喷砂机-喷砂机配件-喷砂器材-喷砂加工-东莞市协帆喷砂机械设备有限公司 | 淬火设备-钎焊机-熔炼炉-中频炉-锻造炉-感应加热电源-退火机-热处理设备-优造节能 | 刹车盘机床-刹车盘生产线-龙口亨嘉智能装备 | 钢托盘,钢制托盘,立库钢托盘,金属托盘制造商_南京飞天金属制品实业有限公司 | 谈股票-今日股票行情走势分析-牛股推荐排行榜 | 南京试剂|化学试剂|分析试剂|实验试剂|cas号查询-专业60年试剂销售企业 | 手持式3d激光扫描仪-便携式三维立体扫描仪-北京福禄克斯 | 螺钉式热电偶_便携式温度传感器_压簧式热电偶|无锡联泰仪表有限公司|首页 | 换网器_自动换网器_液压换网器--郑州海科熔体泵有限公司 | VI设计-LOGO设计公司-品牌设计公司-包装设计公司-导视设计-杭州易象设计 | Honsberg流量计-Greisinger真空表-气压计-上海欧臻机电设备有限公司 | 北京浩云律师事务所-法律顾问_企业法务_律师顾问_公司顾问 | 变色龙PPT-国内原创PPT模板交易平台 - PPT贰零 - 西安聚讯网络科技有限公司 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 河南砖机首页-全自动液压免烧砖机,小型砌块水泥砖机厂家[十年老厂] | 太平洋亲子网_健康育儿 品质生活 | 加盟店-品牌招商加盟-创业项目商机平台 | 酒吧霸屏软件_酒吧霸屏系统,酒吧微上墙,夜场霸屏软件,酒吧点歌软件,酒吧互动游戏,酒吧大屏幕软件系统下载 | 临沂招聘网_人才市场_招聘信息_求职招聘找工作请认准【马头商标】 | 量子管通环-自清洗过滤器-全自动反冲洗过滤器-北京罗伦过滤技术集团有限公司 | 厦门ISO认证|厦门ISO9001认证|厦门ISO14001认证|厦门ISO45001认证-艾索咨询专注ISO认证行业 | 湖南自考_湖南自学考试 | 卓能JOINTLEAN端子连接器厂家-专业提供PCB接线端子|轨道式端子|重载连接器|欧式连接器等电气连接产品和服务 | 1000帧高速摄像机|工业高速相机厂家|科天健光电技术 | 紫外荧光硫分析仪-硫含量分析仪-红外光度测定仪-泰州美旭仪器 | 飞扬动力官网-广告公司管理软件,广告公司管理系统,喷绘写真条幅制作管理软件,广告公司ERP系统 | 防勒索软件_数据防泄密_Trellix(原McAfee)核心代理商_Trellix(原Fireeye)售后-广州文智信息科技有限公司 | 科普仪器菏泽市教育教学仪器总厂 | 「钾冰晶石」氟铝酸钾_冰晶石_氟铝酸钠「价格用途」-亚铝氟化物厂家 | 万师讲师网-优质讲师培训师供应商,讲师认证,找讲师来万师 | 众品地板网-地板品牌招商_地板装修设计_地板门户的首选网络媒体。 | 电动葫芦-河北悍象起重机械有限公司 | 水性漆|墙面漆|木器家具漆|水漆涂料_晨阳水漆官网 |