ĐĂNG TIN
logo
Online:
Visits:
Stories:
Profile image
Lượt xem

Hiện tại:
1h trước:
24h trước:
Tổng số:
Cách chèn Video với HTML 5
Thursday, August 8, 2013 7:51
% of readers think this story is Fact. Add your two cents.


HTML5 hỗ trợ thẻ

Các trình duyệt hỗ trợ thẻ

Thêm yếu tố cố định chiều rộng và chiều cao cho video width và height. Nếu bạn có lỡ đặt chiều rộng hoặc chiều cao nhỏ hơn  so với chiều rộng / cao thực sự của video thì video đó sẽ được tự động căn giữa thay vì làm giãn video như đối với hình ảnh. Ví dụ :

Khi chèn video với HTML5 thì video của bạn bình thường khi hiển thị sẽ không có bảng điều khiển, để thêm bảng điều khiển cho video thì bạn phải tự thiết kết lấy một cái thôi, bạn có thể thiết kế giao diện bảng điều khiển thông qua HTML, CSS và Javascript
Còn nếu không muốn (thể) hoặc ngại thiết kế bạn có thể sử dụng giao diện mặc định bằng cách thêm thuộc tính controls vào trong thẻ

Tiếp theo là 2 thuộc tính preload và autoplay :
Thuộc tính preload sẽ tự động tải video ngay sau khi truy cập vào trang web chứa video đó, dĩ nhiên nếu chèn thuộc tính này thì bạn cần chắc là người dùng thực sự muốn xem video đó không thì sẽ hao tổn lượng băng thông lớn một cách lãng phí.  Ví dụ :

Để tắt thuộc tính này bạn thêm giá trị none cho thuộc tính preload. Ví dụ :

Thuộc tính autoplay sẽ tự động chạy video ngay khi truy cập vào trang web chứa video đó, theo mình cái này nên hạn chế sử dụng, không ai thích việc truy cập vào một đang đọc tin và giật thót tim vì có cái gì đó đang kêu. Trước kia hay giật mình vì cái “Mỗi ngày tôi chọn một niềm vui…….” của trang ACB, cứ như là muốn đuổi khách đi quá . Ví dụ cho thuộc tính này :

HTML5 với thẻ

Ở ví dụ trên chúng ta có thêm thuộc tính type, thuộc tính type có 3 giá trị lần lượt chỉ : định dạng, video codec và audio codec. Ví dụ như với file something.ogv thì thuộc tính type chỉ định dạng là OGG, video codec là theora và audio codec là vorbis.
HTML5 cùng thẻ


Tin nổi bật trong ngày
Tin mới nhất

Register

Newsletter

Email this story

If you really want to ban this commenter, please write down the reason:

If you really want to disable all recommended stories, click on OK button. After that, you will be redirect to your options page.