Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติ seekable ของ Video ใน HTML DOM

คุณสมบัติ seekable ของ HTML DOM Video ใช้สำหรับคืนค่าอ็อบเจกต์ TimeRanges ที่มีข้อมูลเกี่ยวกับช่วงที่เลื่อนได้ (seekable) ของวิดีโอ รวมถึงความยาว ตำแหน่งเริ่มต้น และตำแหน่งสิ้นสุด

ไวยากรณ์ (Syntax)

การคืนค่าอ็อบเจกต์ TimeRanges

mediaObject.seekable

ตัวอย่างการใช้งาน

ตัวอย่างต่อไปนี้แสดงการใช้งานคุณสมบัติ Video seekable:

<!DOCTYPE html> <html> <head> <title>HTML DOM Video seekable</title> <style>    * {       padding: 2px;       margin:5px;    }    form {       width:70%;       margin: 0 auto;       text-align: center;    }    input[type="button"] {       border-radius: 10px;    } </style> </head> <body>    <form>         <fieldset>          <legend>HTML-DOM-Video-seekable</legend>          <video id="demo" width="320" controls><source          src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>          <input type="button" onclick="getTrackDetails()" value="How much free view time is left?">          <div id="divDisplay"></div>         </fieldset>    </form>    <script>       var divDisplay = document.getElementById("divDisplay");       var demo = document.getElementById("demo");       function getTrackDetails() {          divDisplay.textContent = 'You are a premium viewer, so '+demo.seekable.start(0)+' - '+demo.seekable.end(0)+' are seekable';       }    </script> </body> </html>

ผลลัพธ์

ก่อนคลิกปุ่ม 'How much free view time is left?':

คุณสมบัติ seekable ของ Video ใน HTML DOM

หลังคลิกปุ่ม 'How much free view time is left?':

คุณสมบัติ seekable ของ Video ใน HTML DOM