Ngày hôm nay chúng ta sẽ đi vào tìm hiểu các ví dụ về video HTML5 trong quá trình thiết kế và phát triển web nhé!
Các Ví Dụ Về Video HTML Cho Website
Nếu bạn muốn tìm hiểu video HTML5 là gì và các thuộc tính cơ bản của nó thì có thể tham khảo đường dẫn bên dưới nhé!
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Cách Tạo Nhúng Video Vào Bootstrap 4 Modal
Dự án này sẽ giúp bạn có thể nhúng các video Youtube và Vimeo vào Modal Ở Trong Bootstrap.
See the Pen Play YouTube or Vimeo Video in Modal - Bootstrap 4 by Jacob Lett (@JacobLett) on CodePen.
Chèn Video HTML5 Bằng Object-fit CSS
Đây là cách tạo video HTML5 cho website bằng việc sử dụng object-fit trong CSS.
See the Pen Daily Pen #80 by Dylan Macnab (@DylanMacnab) on CodePen.
Sử Dụng Video Trong HTML5
Đây là cách tạo video HTML5 cho website bằng việc sử dụng object-fit trong CSS.
See the Pen HTML5 Video by Adam (@doddsy105) on CodePen.
Chèn HTML5 Video Bằng Thư Viện Video.js
Dự án này sẽ giúp bạn có thể chèn HTML5 Video vào trang web thông qua thư viện video.js.
See the Pen Video.js Default Skin by Steve Heffernan (@heff) on CodePen.
Hiệu Ứng Hover Cho HTML5 Video
Video sẽ tự động được play khi người dùng hover vào nó (Chỉ sử dụng cho màn hình desktop thôi nhé).
See the Pen HTML5 Video Play on Hover by Captain Anonymous (@anon) on CodePen.
Cách Tạo Video Slider Bằng Slick.js
Đây là dự án về cách thêm youtube, vimeo và HTML5 video vào trong slider.
See the Pen Slick Slider with auto play YouTube, Vimeo and HTML5 video by digistate (@digistate) on CodePen.
Cách Tạo HTML Video Trong SVG
Đây là hiệu ứng chèn video vào SVG bằng CSS và Javascript.
See the Pen SVG Text Mask w/ Video Fill by Dudley Storey (@dudleystorey) on CodePen.
Cách Nhúng Youtube Video Bằng PrettyEmbed.js
Cách nhúng video youtube vào website bằng thư viện PrettyEmbed.js.
See the Pen PrettyEmbed.js Demo by Mike Zarandona (@mike-zarandona) on CodePen.
Cách Tạo Video Player HTML5
Thiết kế player video bằng thư viện Plyr Javascript.
See the Pen Plyr Demo by Sam Potts (@sampotts) on CodePen.
Tạo Hiệu Ứng Lightbox Cho Video HTML5
Tạo hiệu ứng lightbox cho video bằng CSS và Javascript.
See the Pen HTML 5 Video playing in a lightbox by David LeDuc (@davidleduc) on CodePen.
Thiết Kế Play Button Video
Cách chèn Youtube Video vào Modal trong website.
See the Pen Pulsing Play Button by Jared Ringold (@jaredringold) on CodePen.
Thiết Kế Video Card
Cách tạo video card bằng HTML CSS và Javascript.
See the Pen Youtube card by Quentin Veron (@VeronQ) on CodePen.
Thiết Kế Responsive HTML Video Background
Thiết kế video background hiển thị trên nhiều loại màn hình thiết bị khác nhau.
See the Pen Responsive "background-size: contain" Video by haycuoilennao19 (@haycuoilennao19) on CodePen.
Thiết Kế Video Button Animation CSS
Thiết kế video background hiển thị trên nhiều loại màn hình thiết bị khác nhau.
See the Pen Video button animation - Only CSS by Milan Raring (@milanraring) on CodePen.
Thiết Kế Video Header CSS
Thiết kế video HTML5 cho hero header trong website.
See the Pen Expanding Video Hero by Joe Watkins (@joe-watkins) on CodePen.
Thiết Kế Video Gallery
Trong phần này chúng ta sẽ tìm hiểu cách tạo Video Gallery trong website nhé!
See the Pen Video Gallery, Hover Effects, Lightbox by Bobby Korec (@bobbykorec) on CodePen.
Thiết Kế Youtube Video Grid CSS Javascript
Trong phần này chúng ta sẽ tìm hiểu cách tạo Youtube Video Grid trong website nhé!
See the Pen Youtube videos by Moncho Varela (@nakome) on CodePen.
Nếu bạn muốn tham khảo các ví dụ về video background ở đường dẫn bên dưới nhé!
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những ví dụ 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ẻ!