Code nhúng video trong HTML5

 

HTML5 cho phép chúng ta nhúng video vào trang web rồi xem trực tiếp trên trình duyệt mà không cần phải sử dụng plugin của bên thứ ba như Adobe Flash Player. Hôm nay Blog Kiến càng sẽ cùng bạn xem code nhúng này cụ thể như thế nào.

Code mẫu:

<video width=”640″ height=”480″ controls posster=”images/poster.png”>

<source src=”ducanhplus.mp4″ type=”video/mp4″>

<source src=”ducanhplus.ogg” type=”video/ogg”>

Trình duyệt của bạn không hỗ trợ thẻ video

</video>

Giải thích code:

  • Để nhúng video chúng ta bắt đầu bằng thẻ mở <video> và kết thúc bằng thẻ đóng </video>
  • widthheight quy định chiều rộng và chiều cao của video
  • controls làm xuất hiện nút Play (bật video), Pause (tạm dừng), tùy chọn toàn màn hình và nút điều khiển âm thanh.
  • Nguồn video đặt trong thẻ source, với đường dẫn cụ thể được quy định trong thuộc tính src, trình duyệt dựa vào thuộc tính type để biết định dạng của video.
  • Có 3 định dạng video được các trình duyệt hỗ trợ là: mp4, ogg webm. Tuy nhiên không phải trình duyệt nào cũng hỗ trợ cả 3, có trình duyệt chỉ hỗ trợ 1 định dạng duy nhất.
  • Dòng cuối cùng sẽ xuất hiện trong trường hợp trình duyệt không hỗ trợ thẻ video, thí dụ IE8. Hầu hết các trình duyệt phổ biến gồm: Google Chrome, FireFox, Opera, Safari IE9+ đều có hỗ trợ thẻ video
  • Thuộc tính poster dùng để làm ảnh nền cho video, thí dụ video ở đầu bài sử dụng poster là bức ảnh dưới đây:
Poster cho video
Các định dạng video được hỗ trợ trên trình duyệt:
Trình duyệt MP4 WebM Ogg
Internet Explorer Không Không
Chrome
Firefox Có (FireFox 21+)
Safari Không Không
Opera Không

Ngoài ra chúng ta có thể sử dụng Javascript để điều khiển bật, tắt, thay đổi kích thước video như ví dụ dưới đây:

Tùy chọn movie


Theo đó:

  • Trước tiên video được gán một id cụ thể, trong ví dụ này là myvideo
  • Video sẽ được lấy bằng lệnh document.getElemnetById(“myvideo”)
  • Sau đó video này sẽ được điều khiển thông qua các lệnh video.pause(), video.play(), video.width=”xyz” , với xyz là giá trị cụ thể nào đó. Các lệnh này được lồng trong các hàm.
  • Các button tương ứng khi được nhấn sẽ gọi các hàm này lên bằng lệnh onclick, ví dụ: <button onclick=”play();”>Chạy</button> sẽ gọi hàm play() và chạy video này.

Code cụ thể:
<div>
<button onclick=”playPause();”>Play/Pause</button>
<button onclick=”size250();”>250</button>
<button onclick=”size400();”>400</button>
<button onclick=”size550();”>550</button>
</div>
<video id=”myvideo” width=”250″>
      <source id=”mp4″ src=”http://media.w3.org/2010/05/sintel/trailer.mp4″ type=”video/mp4″></source>
      <source id=”webm” src=”http://media.w3.org/2010/05/sintel/trailer.webm” type=”video/webm”></source>
      <source id=”ogv” src=”http://media.w3.org/2010/05/sintel/trailer.ogv” type=”video/ogg”></source>
</video>
<script type=”text/javascript”>
var video = document.getElementById(“myvideo”);
function playPause()

if (video.paused) 
video.play(); 
else 
video.pause(); 


function size250()
{video.width = 250;} 

function size400()
{video.width = 400;}

function size550()
{video.width = 550;} 
</script>

2 thoughts on “Code nhúng video trong HTML5”

  1. cho minh hỏi trên một bài viết có nhìêu video.
    nếu chọn phát 1 video thì video trước đó sẽ dừng lại thì phải làm sao.
    mong bạn giải đáp thắc mắc cho mình.

    Reply
    • Mình nghĩ điều đó hợp lý mà, ai lại xem 2 video đồng thời cùng một lúc đâu. Nếu họ xem cái này thì cần phải thôi xem cái kia.

      Reply

Leave a Comment