Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Sử Dụng Video HTML Cho Website

Sử Dụng Video HTML Cho Website


Ngày 18 Tháng 12 Năm 2020

Trong quá trình phát triển ngày nay thì video ngày càng được sử dụng rộng rãi và phổ biến mà điển hình nhất là mạng xã hội video Youtube. Vì vậy để bắt kịp xu hướng thì mình nghĩ trang web của chúng ta cũng nên sử dụng thêm loại nội dung video để nâng cao trải nghiệm người dùng cũng như mang đến tính đa dạng phong phú cho website. Do đó ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu HTML5 Video là gì và cách nhúng video vào trang web nhé!


HTML Video Là Gì?

Trước đây khi để sử dụng video cho trang web thì chúng ta thường hay sử dụng Adobe Flash Player. Tuy nhiên khi phiên bản HTML5 được phát hành thì bạn có thể dễ dàng nhúng video vào website thông qua thẻ video.
Những lợi ích khi chúng ta sử dụng tính năng video của HTML là:

  • Tốc độ website được cải thiện, trình duyệt ít gặp sự cố hơn.
  • Chúng ta có thể cung cấp nhiều loại định dạng video khác nhau cho từng trình duyệt(webm, mp4, ogv...)
  • Hiển thị các thành phần điều khiển video như là dừng(pause), chơi(play), điều chỉnh âm thanh...
  • Cho phép video có tự động phát(autoplay) trong website hay không.
  • Cho phép thiết lập poster(hình ảnh của video) khi video đang được load hoặc tải xuống.
  • Hỗ trợ cho việc cung cấp các phụ đề chú thích với nhiều loại ngôn ngữ khác nhau.

Cách Sử Dụng HTML Video Tag

Để thêm video vào cho trang web thì bạn hãy xem cấu trúc tổng quát sau nhé:

HTML

<video width="640" height="480" poster="poster-video.jpg" controls autoplay preload>
 <source src="video.webm" type="video/webm">
 <source src="video.ogv" type="video/ogg">
 <source src="video.mp4" type="video/mp4">
 <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English" default>
</video>

Ở đây mình xin giải thích một tí nhé:

  • width: độ rộng của đối tượng video trong trang web.
  • height: độ cao của đối tượng video trong trang web.
  • poster: hiển thị hình ảnh khi video đang được load hay tải xuống.
  • controls: hiển thị các nút điều khiển mặc định cho video.
  • autoplay: tự động phát video hoặc không.
  • preload: cho phép tải trước video.
  • source: cho phép bạn thiết lập nhiều định dạng của video để đề phòng một số trình duyệt không hỗ trợ định dạng video chính.
  • track: cung cấp phụ đề cho video.

Ví Dụ HTML Video

HTML

 <video width="400" height="250" controls>
  <source src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/HTML5_video/video_vi_du.mp4" type="video/mp4">
</video>

Và kết quả bạn xem dự án Codepen bên dưới nhé:

See the Pen video_html5_coban by haycuoilennao19 (@haycuoilennao19) on CodePen.

Xác định thời gian bắt đầu và kết thúc của video HTML

Thông thường thời gian của video sẽ bắt đầu từ 0 giây. Nhưng nếu như bạn muốn bắt đầu video ở thời gian khác thì chúng ta có thể sử dụng cấu trúc dưới đây:
#t=[thời gian bắt đầu],[thời gian kết thúc]

Lưu ý bạn sẽ thêm cái này ngay sau đường dẫn video ở trong source nhé. Để hiểu rõ hơn bạn xem ví dụ cho video bắt đầu vào giây thứ 5 và kết thúc vào giây thứ 15 ở dự án dưới đây nha:

HTML

 <video width="400" height="250" controls>
   <source src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/HTML5_video/video_vi_du.mp4#t=5,15" type="video/mp4">
 </video>

Và kết quả bạn xem dưới đây nhé:

See the Pen xac dinh thoi gian bat dau ket thuc cua video by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Tạo Poster HTML Video

Trong ví dụ này chúng ta sẽ sử dụng poster để hiện thị hình ảnh của video trước khi phát thông qua đoạn mã sau nhé:

HTML

 <video width="400" height="250" poster="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/HTML5_video/Poster%20Video.png" controls>
    <source src="https://niemvuilaptrinh.ams3.cdn.digitaloceanspaces.com/HTML5_video/video_vi_du.mp4" type="video/mp4">
 </video>

Và kết quả bạn xem dự án bên dưới nhé:

See the Pen su dung poster trong video html5 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Embed Youtube Video HTML

Trong phần này chúng ta sẽ đi vào ví dụ cách nhúng video youtube cho trang web cũng như hiển thị responsive trên nhiều màn hình thiết bị thông qua đoạn code sau nhé:

HTML

<h2>Cách Hiển Thị responsive video Youtube<h2>
<div class="video-container">
  <iframe src="https://www.youtube.com/embed/SV4lbsaBLuI"
          frameborder="0" width="560" height="315">
  </iframe>
</div>

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Và kết quả cuối cùng bạn xem bên dưới nhé:

See the Pen Nhúng Video Youtube Vào Trang Web by haycuoilennao19 (@haycuoilennao19) on CodePen.

Đây là đường dẫn tham khảo: The <video> and <source> tags

Nếu bạn muốn tham khảo các thư viện hỗ trợ tạo HTML5 Video thì có thể truy cập đường dẫn: Thư Viện Tạo HTML5 Video Tốt Nhất Dành Cho Website.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức tìm hiểu về HTML5 Video hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!