ความคิดเห็น: วัตถุวิดีโอเป็นวัตถุใหม่ที่เพิ่มใน HTML5 รองรับการเล่นวิดีโอออนไลน์ในรูปแบบต่างๆ มันมีฟังก์ชั่นที่ค่อนข้างทรงพลัง วัตถุวิดีโอสามารถรายงานความคืบหน้าการเล่นปัจจุบันผ่านเหตุการณ์ ontimeUpdate ด้านล่างนี้เป็นการแนะนำปัญหาของเหตุการณ์ ontimeupdate ของวัตถุวิดีโอ เพื่อนที่สนใจสามารถอ้างถึงได้
วันที่อยู่ในหน้าการเล่นวิดีโอซึ่งใช้วัตถุวิดีโอ HTML5 นี่คือวัตถุใหม่ที่เพิ่มเข้ามาใน HTML5 รองรับการเล่นวิดีโอออนไลน์ในรูปแบบต่างๆ มันมีฟังก์ชั่นที่ค่อนข้างทรงพลังและมีการขยายเหตุการณ์มากมาย มันสามารถควบคุมการเล่นวิดีโอผ่านสคริปต์ JavaScript อ้างถึงสองลิงค์ต่อไปนี้:วัตถุวิดีโอสามารถรายงานความคืบหน้าการเล่นปัจจุบันผ่านเหตุการณ์ ontimeUpdate ในเวลาเดียวกันเหตุการณ์ยังสามารถควบคุมองค์ประกอบอื่น ๆ ในหน้าตามสถานการณ์การเล่นวิดีโอเช่นการสลับบทและการแสดงข้อมูลเพิ่มเติมเมื่อความคืบหน้าการเล่นวิดีโอ นี่คือตัวอย่าง:
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "ie = edge" />
<title> </title>
</head>
<body>
<script type = "text/javascript">
ฟังก์ชั่น TimeUpdate () {
document.getElementById ('เวลา'). innerhtml = video.currenttime;
-
ฟังก์ชัน Durationchange () {
document.getElementById ('ระยะเวลา'). innerhtml = video.duration;
-
ฟังก์ชั่น seekVideo () {
document.getElementById ('วิดีโอ'). currenttime = document.getElementById ('seektext') ค่า;
-
window.onload = function () {
var VideoPlayer = document.getElementById ("วิดีโอ");
VideoPlayer.ontimeUpdate = function () {timeUpdate (); -
-
</script>
<div>
<video controls = "การควบคุม"
Poster = "./ images/videoground1.png"
src = "./ videosource/video1.mp4"
OfficeChange = "durationchange ()" />
</div>
<div> เวลา: <span> 0 </span> ของ <span> 0 </span> วินาที </div>
<div>
<input type = "text" />
<อินพุต type = "button" value = "ค้นหาวิดีโอ" />
</div>
</body>
</html>
แน่นอนคุณยังสามารถเพิ่มแอตทริบิวต์หรือการแขวนเหตุการณ์ในวัตถุวิดีโอเช่นการใช้องค์ประกอบอื่น ๆ บนหน้าเช่น:
video.ontimeUpdate = function () {getCurrentVideOposition (); -
อย่างไรก็ตามบรรทัดของรหัสข้างต้นดูเหมือนจะไม่ถูกต้องบน Chrome คุณสามารถใช้ addeventListener แทน:
VideoPlayer.addeVentListener ("TimeUpdate", function () {getCurrentVideOposition ();}, false);
ฉันไม่รู้ว่าทำไม OnChrome ไม่สามารถแขวนเหตุการณ์ ontimeUpdate ลงในองค์ประกอบวิดีโอได้โดยตรง แต่ต้องเพิ่มเหตุการณ์ด้วยวิธี AddEventListener อย่างไรก็ตาม AddeventListener ยังเข้ากันได้กับเบราว์เซอร์ IE และ Firefox ดังนั้นควรส่งผ่าน