Ấn tượng với 20 mẫu website sử dụng HTML5 video

Chủ nhật - 28/01/2018 09:00

Video là 1 trong những tính năng mới trong HTML5 nó cho phép bạn lướt web, xem video mà không phải cần tới Flash hay các plug-in.

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Hôm nay, chúng tôi sẽ cùng các bạn tìm hiểu về HTML5 Video  trong Thiết kế website. Nếu bạn quan tâm và đã tìm hiểu về HTML5 thì chắc hẳn bạn cũng đã biết các tính năng mới của nó.

Video là 1 trong những tính năng mới trong HTML5 nó cho phép bạn lướt web,  xem video mà không phải cần tới Flash hay các plug-in.  Quá tuyệt! Đó là một trong các tính năng mới mà HTML5 hỗ trợ cho các trình duyệt.

 Trước đây khi thiết kế web muốn chèn một đoạn video vào website bạn cần phải chèn một plugin để chạy, nhưng những trình duyệt khác nhau cũng hỗ trợ các plugin khác nhau. Cho đến khi HTML5 xuất hiện thì việc chèn vào website một đoạn Video trở nên đơn giản rất nhiều.

Tuy chưa được hỗ trợ đầy đủ vào đồng bộ trên các trình duyệt nhưng lại có một lợi thế là không phải load thêm plugin giúp trang web chúng ta chạy nhanh hơn.

Cách Chèn Video Trong Html5:

Đây là toàn bộ mã để chạy Video sử dụng HTML5

 

Trình duyệt của bạn không hỗ trợ thẻ video. Nội dung này sẽ hiển thị ra trình duyệt nếu trình duyệt không hỗ trợ thẻ video

 

Nghĩa là : - Toàn bộ nội dung của video đặt trong cặp thẻ

               - Thuộc tính "controls" được thêm vào để tạo ra trình điều khiển cho video như: Play, Pause,Volumn,..

               - Thuộc tính width và height để định nghĩa chiều rộng và cao của player.

              - Trong

Để xem video trong tất cả các trình duyệt, chúng ta cần phải có ba định dạng video mov, .ogv y .webm. Dưới đây bạn sẽ tìm thấy hai bộ chuyển đổi video HTML mà bạn có thể sử dụng trong 20 mẫu thiết kế website du lịch này.

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Into the Artic - Greenpeace

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Art, Copy & Code

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

ONY Agency

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Made by Hangar

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Fresh Cotton

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Lois Jeans Spring Summer 2013

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Dadaab Stories

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Tsunagare

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Irak: 10 ans, 100 regards

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

K O J O

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Panera Bread

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Make your move: Herzo Adidas

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

BKWLD

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

My life in 20 years

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Mahedine Yahia

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Sketchin

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Core4 Agency

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Lights and Shadows

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Vinetune

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Toyota - Only the name

 

 

Ấn tượng với 20 mẫu website sử dụng HTML5 video

Find your way to Oz

Tác giả bài viết: Liên Nguyễn