Các trình duyệt hỗ trợ thẻ <video> bao gồm : Firefox 3.5, Safari 3 / 4, Chrome và Opera
Các trình duyệt không hỗ trợ : IE 8, IE 7, IE 6, IE 5, IE 4, IE 3, IE 2, IE 1, Netscape .v.v…..
HTML5 hiện nay hỗ trợ một số codec video và audio như H.264, Theora, AAC, Vorbis và định dạng có đuôi .MP4, .Ogg. Tuy nhiên tới thời điểm này thì không phải trình duyệt nào cũng hỗ trợ toàn bộ các codec trên.
Đây là danh sách codec / trình duyệt hỗ trợ :
Theora, Vorbis, Ogg : Firefox, Opera, Chrome
H.264, AAC, MP4 : Chrome, Saíari, Iphone, Android
Nếu như muốn người xem có thể xem được video trên tất cả các trình duyệt thì e rằng hiện nay bạn phải encode video của bạn nhiều hơn một định dạng. À quyên và để encode video theo codec H.264 thì bạn sẽ phải trả một khoản phí bản quyền nữa
Riêng encode sang ogg thì hiện nay chắc các bạn điều biết các phần mềm đổi định dạng rồi nên mình bỏ qua phần này.
Riêng Firefox có một add on giúp chuyển video sang dịnh dạng ogg là : Firefogg.
Trang chủ firefogg : http://firefogg.org
HTML5 với thẻ <video> bạn có thể chèn video theo các cách sau đây :
Một file video đơn: Đơn giản là chèn đường dẫn file video vào thuộc tính src, giống như khi chèn hình ảnh : <img src=”…..” />, còn đối với video thì ta chỉ cần thay bằng thẻ <video> :
<video src="something.ogv"> </video>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ụ :
<video src="something.ogv" height="240" width="320"></video>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ẻ <video>. Ví dụ :
<video src="something.ogv" wight="320" height="240" controls></video>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ụ :
<video src="something.ogv" height="240" width="320" preload></video>Để tắt thuộc tính này bạn thêm giá trị none cho thuộc tính preload. Ví dụ :
<video src="something.ogv" preload="none" height="240" width="320"></video>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 :
<video src="something.ogv" height="240" width="320" autoplay></video>HTML5 với thẻ <video> hiện tại thì nếu bạn muốn người truy cập xem được video trên hầu hết các trình duyệt thì bạn cần encode video đó ra 2 định dạng có đuôi là .ogv và .mp4, vậy làm sao để chèn một lúc 2 video khác định dạng vào cùng một thẻ ? với HTML5 thì bạn chỉ cần sử dụng thuộc tính source để thêm nhiều video trên cùng một thẻ, trình duyệt sẽ tự động chạy các video theo thứ tự, nếu video không chạy được thì trình duyệt sẽ dừng tải file đó và sang file video tiếp theo. Ví dụ :
<video controls="controls" height="240" width="320">Ở 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.
<source src="something.ogv" type="video/ogg; codecs="theora, vorbis" ">
<source src="something.mp" type="video/mp4; codecs="avc1.4201E, mp4a.40.2" ">
</video>
HTML5 cùng thẻ <video> trên Internet Explorer
Đợi đã, chẳng phải IE không hỗ trợ HTML5, vậy làm sao mà có thể hiển thị được thẻ <video> của HTML5 trên IE ? Bốc phét hả ?
Trả lời : Vì IE không hỗ trợ HTML5 nên chúng ta cần phải sử dụng một script để hiển thị HTML5 thông qua nền flash.
Hiện nay có một phần mềm mã nguồn mở là FlowPlayer hỗ trợ việc chạy các file encode H.264 và AAC định dạng MP4, việc của bạn là upload 2 file bao gồm .swf và một file Javascript lên hosting. Và do FlowPlayer không hiểu thẻ <video> nên chúng ta phải nhét thêm một file Javascript nữa lên hosting để chuyển trực tiếp thẻ <video> sang thành Flash.
Ở đây chúng ta có 2 file Javascript cần đưa vào site là : flowplayer.min.js của FlowPlayer và html5-video.js được cung cấp bởi DiveIntoHTML5
Trang chủ FlowPlayer : http://flowplayer.org
Ví dụ :
…Tiếp theo bạn cần làm cho IE nhận dạng được thẻ <video> và <source> nếu không thì công của chúng ta từ bước 1 coi như công cốc, thêm 1 file javascript khác là “HTML5 Enabling Script” lên đầu trang.
…
<script src="flowplayer.min.js">
<script src="html5-video.js">
...
...
Link HTML5 Enabling Script
Ví dụ :
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">Sau khi thêm các file từ bước 1 đến tận bước 2 thì bây giờ khi bạn dùng thẻ <video> IE sẽ tự động nhận dạng và chuyển sang Flash để sử dụng FlowPlayer cho việc hiển thị / chạy video. Ví dụ :
<![endif]-->
<video id="movie" preload="none" controls="controls" height="240" width="320">Vậy là bạn có thể sử dụng “thử nghiệm” HTML5 trên các trình duyệt được rồi, bạn có thể sử dụng server di động để thử nghiệm mà không làm ảnh hưởng tới website / blog chính của bạn, tới đây chắc chắn IE9 sẽ hỗ trợ HTML5 mặc dù chưa thấy Microsoft thông báo gì cả, HTML5 sẽ tiếp tục phát triển rộng. Dù vậy theo các chuyên gia thì cần ít nhất đến năm 2020 thì CSS3 với HTML5 mới ở mức phổ biến. Còn mình thì tiếp tục chờ CSS4 và HTML6.
<source src="pr6.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
<source src="pr6.ogv" type="video/ogg; codecs="theora, vorbis"">
</video>
Nguồn DiveIntoHTML5
Không có nhận xét nào:
Đăng nhận xét