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è)參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 小型铜米机-干式铜米机-杂线全自动铜米机-河南鑫世昌机械制造有限公司 | 单柱拉力机-橡胶冲片机-哑铃裁刀-江都轩宇试验机械厂 | 微型气泵-真空-蠕动-水泵-厂家-深圳市品亚科技有限公司 | 杭州中策电线|中策电缆|中策电线|杭州中策电缆|杭州中策电缆永通集团有限公司 | DNA亲子鉴定_DNA基因检测中心官方预约平台-严选好基因网 | 刮板输送机,粉尘加湿搅拌机,螺旋输送机,布袋除尘器 | 便携式高压氧舱-微压氧舱-核生化洗消系统-公众洗消站-洗消帐篷-北京利盟救援 | 托利多电子平台秤-高精度接线盒-托利多高精度电子秤|百科 | 衡阳耐适防护科技有限公司——威仕盾焊接防护用品官网/焊工手套/焊接防护服/皮革防护手套 | 万家财经_财经新闻_在线财经资讯网| 方源木业官网-四川木门-全国木门专业品牌 | 污水/卧式/潜水/钻井/矿用/大型/小型/泥浆泵,价格,参数,型号,厂家 - 安平县鼎千泵业制造厂 | 工业铝型材生产厂家_铝合金型材配件批发精加工定制厂商 - 上海岐易铝业 | 北京四合院出租,北京四合院出售,北京平房买卖 - 顺益兴四合院 | 深圳工程师职称评定条件及流程_深圳职称评审_职称评审-职称网 | 铣床|万能铣床|立式铣床|数控铣床|山东滕州万友机床有限公司 | 北京企业宣传片拍摄_公司宣传片制作-广告短视频制作_北京宣传片拍摄公司 | 智能终端_RTU_dcm_北斗星空自动化科技 | 安平县鑫川金属丝网制品有限公司,声屏障,高速声屏障,百叶孔声屏障,大弧形声屏障,凹凸穿孔声屏障,铁路声屏障,顶部弧形声屏障,玻璃钢吸音板 | 流量卡中心-流量卡套餐查询系统_移动电信联通流量卡套餐大全 | 河南空气能热水器-洛阳空气能采暖-洛阳太阳能热水工程-洛阳润达高科空气能商行 | 耐火浇注料-喷涂料-浇注料生产厂家_郑州市元领耐火材料有限公司 耐力板-PC阳光板-PC板-PC耐力板 - 嘉兴赢创实业有限公司 | 天津次氯酸钠酸钙溶液-天津氢氧化钠厂家-天津市辅仁化工有限公司 | 动物解剖台-成蚊接触筒-标本工具箱-负压实验台-北京哲成科技有限公司 | 西门子伺服控制器维修-伺服驱动放大器-828D数控机床维修-上海涌迪 | 宿舍管理系统_智慧园区系统_房屋/房产管理系统_公寓管理系统 | 瑞典Blueair空气净化器租赁服务中心-专注新装修办公室除醛去异味服务! | 至顶网| 无轨电动平车_轨道平车_蓄电池电动平车★尽在新乡百特智能转运设备有限公司 | 防伪溯源|防窜货|微信二维码营销|兆信_行业内领先的防伪防窜货数字化营销解决方案供应商 | 蓄电池在线监测系统|SF6在线监控泄露报警系统-武汉中电通电力设备有限公司 | 金属检测机_金属分离器_检针验针机_食品药品金属检探测仪器-广东善安科技 | 质检报告_CE认证_FCC认证_SRRC认证_PSE认证_第三方检测机构-深圳市环测威检测技术有限公司 | 电缆接头_防水接头_电缆防水接头_防水电缆接头_上海闵彬 | 金属管浮子流量计_金属转子流量计厂家-淮安润中仪表科技有限公司 | 多功能真空滤油机_润滑油全自动滤油机_高效真空滤油机价格-重庆润华通驰 | 飞利浦LED体育场灯具-吸顶式油站灯-飞利浦LED罩棚灯-佛山嘉耀照明有限公司 | 伟秀电气有限公司-10kv高低压开关柜-高低压配电柜-中置柜-充气柜-欧式箱变-高压真空断路器厂家 | 酒吧霸屏软件_酒吧霸屏系统,酒吧微上墙,夜场霸屏软件,酒吧点歌软件,酒吧互动游戏,酒吧大屏幕软件系统下载 | 智能家居全屋智能系统多少钱一套-小米全套价格、装修方案 | 无线讲解器-导游讲解器-自助讲解器-分区讲解系统 品牌生产厂家[鹰米讲解-合肥市徽马信息科技有限公司] |