如何處理HTML5Video對(duì)象Chrome上無(wú)效的問(wèn)題

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何處理HTML5 Video對(duì)象的Chrome上無(wú)效問(wèn)題，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都網(wǎng)站制作、漣源網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開(kāi)發(fā)、漣源網(wǎng)絡(luò)營(yíng)銷(xiāo)、漣源企業(yè)策劃、漣源品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供漣源建站搭建服務(wù)，24小時(shí)服務(wù)熱線(xiàn)：18982081108，官方網(wǎng)址：chinadenli.net

日期在做一個(gè)視頻播放的頁(yè)面，其中用到了HTML5的Video對(duì)象，這個(gè)是HTML5中新增的一個(gè)對(duì)象，支持多種不同格式的視頻在線(xiàn)播放，功能比較強(qiáng)大，而且還擴(kuò)展了許多事件，可以通過(guò)JavaScript腳本來(lái)對(duì)視頻播放進(jìn)行控制。
Video對(duì)象可以通過(guò)ontimeupdate事件來(lái)報(bào)告當(dāng)前的播放進(jìn)度，同時(shí)通過(guò)該事件還可以根據(jù)視頻播放的情況來(lái)控制頁(yè)面上的其它元素，例如隨著視頻播放的進(jìn)度來(lái)切換章節(jié)、顯示額外信息等。下面是一個(gè)例子：

代碼如下:

<!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)然你也可以像在頁(yè)面上使用其它元素一樣，給Video對(duì)象動(dòng)態(tài)添加屬性或者掛事件，如：

代碼如下:

video.ontimeupdate = function () { getCurrentVideoPosition(); };

不過(guò)上面這行代碼貌似在Chrome上無(wú)效，可以使用addEventListener來(lái)代替它：

代碼如下:

videoPlayer.addEventListener("timeupdate", function () { getCurrentVideoPosition(); }, false);

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

上述就是小編為大家分享的如何處理HTML5 Video對(duì)象的Chrome上無(wú)效問(wèn)題了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前標(biāo)題：如何處理HTML5Video對(duì)象Chrome上無(wú)效的問(wèn)題
分享URL：http://chinadenli.net/article34/gsjcse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)、自適應(yīng)網(wǎng)站、標(biāo)簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何處理HTML5Video對(duì)象Chrome上無(wú)效的問(wèn)題