Code nhúng video trong HTML5

bởi Nguyễn Đức Anh

 

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ệtMP4WebMOgg
Internet ExplorerKhôngKhông
Chrome
FirefoxCó (FireFox 21+)
SafariKhôngKhông
OperaKhô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 các bình luận

2
Khu vực bình luận

avatar
1 Số lượng chủ đề bình luận
1 Số lượng phản hồi cho các chủ đề bình luận
0 Người theo dõi
 
Bình luận được phản hồi nhiều nhất
Chủ đề bình luận sôi nổi nhất
2 Các tác giả bình luận
Nguyễn Đức AnhHIẾU Những người bình luận gần đây
mới nhất cũ nhất bình chọn nhiều nhất
HIẾU
Khách
HIẾU

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.