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

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

คุณสมบัติ width ของ HTML DOM Video ใช้สำหรับคืนค่า หรือตั้งค่าตัวเลขที่สอดคล้องกับความกว้าง (พิกเซล) ของสื่อ

ไวยากรณ์ (Syntax)

การคืนค่า width เป็นตัวเลข (px)

mediaObject.width

การตั้งค่า width เป็นตัวเลข (px)

mediaObject.width = number

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

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

<!DOCTYPE html> <html> <head> <title>HTML DOM Video width</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-width</legend>          <video id="demo" height="200" width="170" controls><source          src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>          <input type="button" onclick="getTrackDetails()" value="Video Not Visible">          <div id="divDisplay"></div>         </fieldset>    </form>    <script>       var divDisplay = document.getElementById("divDisplay");       var demo = document.getElementById("demo");       function getTrackDetails() {          demo.width += 50;          divDisplay.textContent = 'Video width: '+demo.width;       }    </script> </body> </html>

ผลลัพธ์

ก่อนคลิกปุ่ม 'Video Not Visible':

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

คลิกปุ่ม 'Video Not Visible' 3 ครั้ง:

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