Sử dụng phương thức xử lý video đúng thời điểm trong Html5

Khi bạn sử dụng thẻ <video> trong html5 để chơi 1 video nào đó bất kể độ dài ngắn khác nhau, bạn đôi lúc gặp lỗi khi hàm được gọi ra không đúng thời điểm. Ví dụ:

<div>
    <video id="testVideo" width="320" height="240" controls="controls" autoplay="true">
        <source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
        <source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
        Your browser does not support the video tag.
    </video>
</div>
Width: <div id="width"></div>
Height: <div id="height"></div>
<script type="text/javascript">
    $(document).ready(function () {
        var video = document.getElementById("testVideo");        
        $('#width').text(video.videoWidth);
        $('#height').text(video.videoHeight);
    });
</script>

Bạn muốn lấy chiều cao và chiều rộng của video, nhưng khi video chưa load xong metadata, thì bạn chỉ nhận kết quả là 0. Và khi bạn debug, thì kết quả là một số cụ thể lớn hơn 0 (tùy trường hợp).

Nguyên nhân lỗi

Lỗi này xuất hiện khi trình duyệt gọi sự kiện mà metadata cho thẻ video chưa kịp load xong. Còn khi bạn debug, thì bạn đã dừng 1 khoảng thời gian tương đối nhỏ nhưng lại đủ thời gian để load xong metadata cho thẻ video.

Cách khắc phục

Bạn thiết lập sự kiện cho thuộc tính 'loadedmetadata'. Nó được gọi khi trình duyệt load metadata cho video.

    <video id="testVideo" width="320" height="240" controls="controls" autoplay="true" onloadedmetadata="GetVideoSize();">
        <source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" />
        <source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" />
        Your browser does not support the video tag.
    </video>

Nếu bạn muốn tránh việc viết sự kiện riêng lẽ cho từng Video, bạn thiết lập sự kiện cho tất cả thẻ video khi vừa load metadata

    window.addEventListener('loadedmetadata', function (e) {
        alert('Got loadedmetadata!');
    }, true);

Để biết được thẻ video nào gọi sự kiện, bạn sử dụng e.target.
Download ví dụ: MediaFire