Đối tượng Video trong HTML DOM

Đối tượng Video trong HTML DOM đại diện cho phần tử <video>.

Tạo phần tử <video>

var videoObject = document.createElement("VIDEO")

Ở đây, "videoObject" có thể có các thuộc tính sau:

Ví dụ về một trong các thuộc tính, ví dụ HTML DOM Video networkState:

Ví dụ

<!DOCTYPE html> <html> <head> <title>HTML DOM Video networkState</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-networkState</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="setTrackDetails()" value="Đặt nguồn">          <input type="button" onclick="getTrackDetails()" value="Lấy trạng thái mạng">          <div id="divDisplay"></div>       </fieldset>    </form> <script>    var divDisplay = document.getElementById("divDisplay");    var demo = document.getElementById("demo");    var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';    function getTrackDetails() {       divDisplay.textContent = 'Trạng thái mạng: '+demo.networkState;    }    function setTrackDetails() {       demo.src = srcOfMedia;       demo.load();    } </script> </body> </html>

Kết quả

Nhấn nút „Lấy trạng thái mạng“ khi chưa định nghĩa nguồn:

Nhấn nút „Lấy trạng thái mạng“ khi đã định nghĩa nguồn nhưng trình duyệt đang tải dữ liệu:

Ngoài ra, "videoObject" cũng có các phương thức sau:

Ví dụ về phương thức Video canPlayType():

Ví dụ

<!DOCTYPE html> <html> <head> <title>HTML DOM Video canPlayType()</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-canPlayType( )</legend>          <video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>          <input type="button" onclick="getTrackDetails()" value="Trình duyệt có hỗ trợ video/mp4?">          <div id="divDisplay"></div>       </fieldset>    </form> <script>    var divDisplay = document.getElementById("divDisplay");    var demo = document.getElementById("demo");    var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';    function getTrackDetails() {       var ans = demo.canPlayType('video/mp4');       if(ans !== ''){          divDisplay.textContent = 'Trình duyệt hỗ trợ mp4';          demo.src = srcOfMedia;          demo.load();       }       else          divDisplay.textContent = 'Trình duyệt không hỗ trợ mp4';    } </script> </body> </html>

Kết quả

Trước khi nhấn nút „Trình duyệt có hỗ trợ video/mp4?“:

Sau khi nhấn nút „Trình duyệt có hỗ trợ video/mp4?“: