Trong hướng dẫn MỚI này, bạn sẽ tìm hiểu cách hoạt động của thẻ video HTML5, cách gắn thẻ video html, cách tạo trình phát video HTML5 trên nhiều trình duyệt và chỉ định các điều khiển.

Bạn đang xem : nguồn bên ngoài thẻ video html5

Đây là hướng dẫn cuối cùng của chúng tôi về thẻ Video HTML5 vào năm 2022.

Trong hướng dẫn toàn diện và dễ sử dụng này, bạn sẽ khám phá mọi thứ bạn cần biết về cách làm việc với video HTML5.

Điều này bao gồm:

Hãy bắt đầu, nhưng trước tiên:

Phần tử Video HTML là gì

Phần tử `video` lần đầu tiên được Opera đề xuất vào năm 2007 và sau đó được thêm vào đặc tả HTML5. Trước đó, nếu bạn muốn thêm video vào trang HTML, bạn phải sử dụng Adobe Flash.

Có một số vấn đề xảy ra với điều đó: Flash có một lịch sử lâu dài về các lỗi bảo mật, tốn nhiều CPU và không được hỗ trợ trên Android hoặc iOS.

Rõ ràng, chúng tôi cần một giải pháp thay thế nhẹ, được hỗ trợ nguyên bản trên web và hoạt động trơn tru trên các thiết bị di động. Nhập phần tử `& lt; video & gt;`.

Bạn sẽ tìm hiểu về cả các trường hợp sử dụng cơ bản và nâng cao của phần tử `video`, cách đảm bảo rằng video của bạn phát trên các trình duyệt bằng cách cung cấp nhiều nguồn video, cách giữ cho video của bạn có thể truy cập được bằng cách thêm chú thích / phụ đề bằng WebVTT và cũng như cách đảm bảo rằng video của bạn vẫn đáp ứng.

Thẻ video HTML5 là gì?

Phần tử `& lt; video & gt;` chỉ đơn giản là một thẻ được sử dụng để nhúng nội dung video vào tài liệu HTML. Kể từ năm 2022, nó được hỗ trợ xuất sắc trên tất cả các trình duyệt hiện đại (cả thiết bị di động và máy tính để bàn), ngoại trừ Opera Mini.

Video HTML5 hoạt động như thế nào?

Để thêm video vào trang của bạn bằng phần tử `& lt; video & gt; ‘, hãy sử dụng mã hiển thị trong hình ảnh này:

Thẻ video HTML5_Thêm video vào đoạn mã Web_Code

Hãy chia nhỏ điều đó:

`điều khiển`

Điều này chỉ định rằng các điều khiển video như Phát, Tạm dừng, Âm lượng, v.v. sẽ được hiển thị, cho phép người dùng kiểm soát việc phát lại video.

`

src

`

Chỉ định vị trí hoặc đường dẫn đến tệp phương tiện video bạn muốn nhúng.

`loại`

Điều này xác định loại MIME hoặc định dạng của tệp video, giúp trình duyệt xác định trước liệu nó có thể giải mã tệp hay không. Điều này dẫn đến tải xuống và hiển thị nhanh hơn.

`& lt; p & gt; ‘

Văn bản trong thẻ này đóng vai trò là nội dung dự phòng sẽ hiển thị nếu trình duyệt của người dùng không hỗ trợ phần tử `video` hoặc định dạng của video được nhúng.

Ví dụ này mô tả cách sử dụng cơ bản của thẻ `& lt; video & gt;`.

Sự cố với Thẻ video HTML5

Vấn đề là các trình duyệt khác nhau không hỗ trợ các định dạng phương tiện giống nhau khi triển khai HTML5 ‘& lt; video & gt;’, chủ yếu là do các vấn đề về bằng sáng chế.

Điều này có nghĩa là định dạng MP4 có thể không được trình duyệt hiện tại của người dùng hỗ trợ. Trên thực tế, MP4 hiện hỗ trợ kém trong Firefox dành cho Android.

HTML5 Video Tag_MP4 Định dạng Video Support_Table

Khả năng tương thích của thẻ video HTML5 trên nhiều trình duyệt

Hiện có ba định dạng video được đặc tả HTML5 hỗ trợ:

WebM

Ogg

MP4

Các trình duyệt khác nhau hỗ trợ sự kết hợp của tất cả hoặc một số trong ba định dạng do các lý do khác nhau, một là luật bằng sáng chế.

Để đảm bảo tính tương thích của video trên các trình duyệt, HTML5 cung cấp thẻ `& lt; source & gt;`, bạn có thể sử dụng thẻ này để cung cấp các nguồn video thay thế có định dạng khác nhau.

HTML5 Video Tag_Input Source_Code Snippet

Bằng cách này, mỗi trình duyệt có thể chọn định dạng phù hợp nhất cho trình duyệt từ các tùy chọn được cung cấp và phân phát nó.

Xem Thêm  Bố cục lưới CSS: Từ khóa Span - khoảng lưới hiển thị css

Chuyển đổi video HTML5

Có một số trình chuyển đổi video HTML mà bạn có thể sử dụng để chuyển đổi video từ định dạng này sang định dạng khác, nhưng bạn có thể thắc mắc:

“Điều này có nghĩa là tôi luôn phải chuyển đổi tất cả các video của mình thành ba định dạng khác nhau?”

Theo ý kiến ​​của tôi, bao gồm cả ba định dạng là không cần thiết. Tôi khuyên bạn nên sử dụng MP4 và WebM. MP4 có hỗ trợ trình duyệt lớn nhất và các trình duyệt không có hỗ trợ tốt cho nó hỗ trợ đầy đủ WebM. Tôi đề xuất WebM hơn Ogg vì nó có chất lượng cao, mã nguồn mở và có kích thước tệp nhỏ hơn, giúp nó hoạt động rất hiệu quả cho các thiết bị di động.

Thuộc tính video HTML5

Ngoài khả năng tương thích trên nhiều trình duyệt, HTML5 `& lt; video & gt; ‘còn có khả năng hơn thế nữa khi được kết hợp với một số thuộc tính gốc.

Hãy xem xét một số trong số chúng:

`chiều rộng` và ‘chiều cao`

Xác định chiều rộng và chiều cao bằng pixel để tránh nhấp nháy và chuyển trang trước khi trình duyệt tải video.

`vòng lặp`

Cho biết rằng video sẽ phát lại khi video kết thúc.

`tắt tiếng ‘

Cho biết rằng video sẽ bị tắt tiếng khi tải. Sau đó, người dùng có thể quyết định bật tiếng hay không.

`tự động phát ‘

Cho biết rằng video sẽ bắt đầu phát ngay sau khi tải xong.

`áp phích`

Cung cấp URL của một hình ảnh có thể được sử dụng làm màn hình nổi hoặc hình thu nhỏ trước khi video được phát. Lưu ý rằng nếu bạn định chỉ định một hình ảnh áp phích thì không cần phải bao gồm thuộc tính `autoplay` vì nó sẽ ghi đè thuộc tính` poster`.

`thời lượng`

Trả về thời lượng của video tính bằng giây. Bạn có thể sử dụng JavaScript để thao tác và hiển thị thông tin này ở bất kỳ định dạng nào bạn chọn.

`playinline`

Tuyên bố rằng trình duyệt sẽ phát video ngay tại vị trí của nó thay vì mở màn hình lớp phủ, đây là hành vi mặc định trên các trình duyệt trên thiết bị di động.

`tải trước`

Yêu cầu trình duyệt tải trước video để phát lại nhanh hơn. Lưu ý rằng thuộc tính tải trước bị bỏ qua nếu có `tự động phát`. Các giá trị có thể là:

`siêu dữ liệu`

Thông báo cho trình duyệt biết rằng người dùng không cần video, nhưng gợi ý rằng nên tìm nạp siêu dữ liệu (kích thước, danh sách theo dõi, thời lượng, v.v.). Đây là giá trị mặc định trong Chrome.

`tự động`

Yêu cầu trình duyệt tải toàn bộ video.

`không có gì ‘

Không tải trước.

`autoPictureinPicture`

Phản ánh thuộc tính HTML cho biết video có tự động chuyển sang chế độ ảnh trong ảnh hay không khi người dùng chuyển từ tài liệu này sang tài liệu khác.

Cách cải thiện khả năng truy cập video

”Sức mạnh của web nằm ở tính phổ biến của nó. Sự tiếp cận của tất cả mọi người bất kể khuyết tật là một khía cạnh thiết yếu. ” – Tim Berners-Lee

Nội dung video đơn thuần không đủ khả năng truy cập đối với những người dùng có thể bị khuyết tật về thính giác hoặc nhận thức hoặc thậm chí những người dùng có thể ở trong các tình huống tạm thời không thuận lợi — ví dụ như môi trường ồn ào hoặc một nơi bắt buộc yên tĩnh như thư viện.

Khả năng tiếp cận có thể được cải thiện cho những người dùng như vậy bằng cách cung cấp các đoạn văn bản theo thời gian, như chú thích, phụ đề hoặc mô tả cùng với video.

Công nghệ để đạt được điều này trên web được gọi là Định dạng Đoạn văn bản Video Video trên Web hoặc WebVTT. Đây là một định dạng để hiển thị các đoạn văn bản được định thời gian cùng với video bằng cách sử dụng phần tử HTML` & lt; track / & gt; `.

Xem Thêm  Cách sử dụng mệnh đề WHERE trong SQL - làm thế nào để sử dụng where trong sql

HTML5 Video Tag_Typical WebVTT File_Code Snippet

Lưu ý: Phạm vi thời gian phải bằng _hh: mm: ss: ttt_ hoặc _mm: ss: tt_, trong đó _hh_ là giờ và phải có tối đa hai chữ số, _mm_ là phút (0–59), _ss_ là giây (0–59), _ttt_ là mili giây (0–999).

Bạn có thể tạo tệp WebVTT của mình theo cách thủ công hoặc tự động, bằng công cụ nhận dạng giọng nói .

Sau khi tạo tệp này, bạn có thể nhúng tệp vào video HTML bằng phần tử `& lt; track & gt;` như sau:

HTML5 Video Tag_Embedding Tệp WebVTT _Code Snippet

Các phần tử của Thuộc tính ‘& lt; track & gt;’

Sau đây, chúng tôi giải thích mỗi thuộc tính trong phần tử `& lt; track & gt;` có chức năng gì:

`mặc định`

Cho biết rằng bản nhạc sẽ được bật tự động khi video bắt đầu phát.

`srclang`

Nêu ngôn ngữ của bản nhạc.

`loại`

Chỉ định loại bản nhạc văn bản được cung cấp. Các giá trị có thể là:

`phụ đề`

Lớp phủ các bản dịch bằng văn bản của hội thoại và nội dung video khác (ví dụ: văn bản hoặc hình ảnh) lên video. Thường dành cho những người không hiểu ngôn ngữ gốc được sử dụng trong âm thanh.

`chú thích`

Lớp phủ bản ghi âm thanh lên video. Khác với phụ đề ở chỗ phụ đề thường cùng ngôn ngữ với âm thanh và mang tính mô tả cao hơn, đôi khi hiển thị các tín hiệu phi ngôn ngữ như hiệu ứng âm thanh hoặc tên của người nói hiện tại. Dành cho người khiếm thính, xem ở nơi ồn ào hoặc tắt tiếng.

`mô tả`

Lớp phủ mô tả âm thanh đầy đủ của tất cả nội dung video lên video, từ lời thoại đến hành động, hiệu ứng âm thanh đến tín hiệu. Dành cho những người bị mù hoặc không thể xem video.

`chương`

Bao gồm tiêu đề cho các phần khác nhau (ví dụ: phần hoặc tập) của nội dung video. Các chương đôi khi được hiển thị dưới dạng danh sách tương tác trên giao diện trình duyệt để người xem có thể điều hướng đến các phần khác nhau của video một cách dễ dàng.

`src`

Nhập URL của tệp theo dõi văn bản.

`nhãn`

Xác định tiêu đề của bản nhạc văn bản. Đối với phụ đề, nó phải cho biết ngôn ngữ mà bộ phụ đề dành cho, ví dụ như tiếng Đức hoặc tiếng Pháp. Các nhãn sẽ xuất hiện trong giao diện người dùng để cho phép người dùng dễ dàng chọn ngôn ngữ phụ đề mà họ muốn xem.

Video HTML5 có Captions_Screenshot

Video đáp ứng: Cách giữ cho video của bạn thân thiện với thiết bị di động và máy tính bảng

Bạn đã thấy các thuộc tính `width` và` height` của phần tử video HTML5 và cách chúng có thể được sử dụng để đặt kích thước tĩnh cho video.

Khai báo độ rộng tĩnh không phải là một ý tưởng hay khi nói đến khả năng đáp ứng.

Điều gì xảy ra khi vùng chứa chính của video đó thu hẹp lại so với chiều rộng đã khai báo?

Video có thể sẽ tràn màn hình khiến bạn không thể xem được.

Ví dụ: video trong hình ảnh bên dưới được đặt thành chiều rộng tĩnh là 600px. Khi được truy cập qua thiết bị di động có kích thước 350px, nó sẽ tràn ra ngoài khung nhìn.

HTML5 Video Tag_Unresponsive Video_Screenshot

Để làm cho phần tử `& lt; video & gt;` đáp ứng, thay vì xác định kích thước tĩnh bằng cách sử dụng thuộc tính `width` và` height`, hãy cung cấp cho nó kích thước linh hoạt bằng cách sử dụng CSS.

HTML5 Video Tag_Responsive Video Element_CSS_Code Snippet

Ở đây, chúng tôi đã đặt chiều cao của video là `tự động` để đảm bảo rằng tỷ lệ khung hình gốc của nội dung video được duy trì trên các màn hình.

Hình ảnh này hiển thị cùng một video như trong hình ảnh trước đó với các kiểu đáp ứng được áp dụng.

Để ý xem giờ nó vừa khít trên màn hình như thế nào.

HTML5 Video Tag_Responsive Video_Screenshot

Nếu bạn muốn video nằm trong một phần, bạn có thể chỉ cần bọc phần tử` & lt; video & gt; `trong một` & lt; div & gt ; `và xác định kích thước cho` & lt; div & gt; ‘.

Xem Thêm  PHP Thử nắm bắt: Kiến thức cơ bản & Hướng dẫn xử lý ngoại lệ PHP nâng cao - php thử bắt khối

Giờ đây, video sẽ chia tỷ lệ tương ứng với yếu tố chính.

Kết luận

Trong bài đăng này, bạn đã học cách nhúng video vào trang HTML bằng phần tử `& lt; video & gt; ‘, cũng như một số thuộc tính bạn có thể đưa vào để nâng cao trải nghiệm người dùng.

Bạn cũng đã tìm hiểu về khả năng truy cập và khả năng phản hồi của video.

Nếu định làm việc với nhiều video, bạn nên cân nhắc sử dụng trình phát video tương thích với HTML hiện có để quản lý và nhúng video một cách liền mạch.

Các trình phát video này sẽ tự động cung cấp cho bạn mã nhúng mà bạn có thể sao chép và dán vào trang HTML của mình để hiển thị video.

Sau đó, bạn có thể sử dụng các thuộc tính mà chúng tôi đã đề cập trong bài viết này để mở rộng khả năng của mã nhúng.

Xem trình phát video tương thích HTML5 nâng cao của chúng tôi với hỗ trợ cho quảng cáo, DRM, nhiều codec và TV thông minh.

Bạn có biết?

Bitmovin có một loạt VOD các dịch vụ có thể giúp bạn cung cấp nội dung cho khách hàng một cách hiệu quả.

Nhiều tính năng của nó cho phép bạn tạo nội dung phù hợp với đối tượng cụ thể của mình mà không cần phải tự thiết lập mọi thứ. Phân tích tích hợp cũng giúp bạn đưa ra các quyết định kỹ thuật để mang lại trải nghiệm người dùng tối ưu.

Tại sao không dùng thử Bitmovin miễn phí và xem nó có thể giúp gì cho bạn.


Xem thêm những thông tin liên quan đến chủ đề nguồn bên ngoài thẻ video html5

HTML5 Video in the Open Web Platform

alt

  • Tác giả: InfoQ
  • Ngày đăng: 2013-05-29
  • Đánh giá: 4 ⭐ ( 8820 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML5 adds support for video by introducing a dedicated element, the video tag, as well as various methods to manipulate playback. As such, it makes video a first-class citizen of the Web, completely integrated within HTML and its adjacent technologies, such as CSS or SVG, while enabling proper accessibility capabilities.

    This initial support is now being extended to accommodate more use cases, such as live streaming or video conferencing. Starting with the basics, W3C’s Philippe Le Hégaret will look at ongoing work with HTML5 video, including real time, captioning and protected content.

    Head to http://mrkn.co/ci43u for all the videos from HTML5DevConf!

Video trong HTML5

  • Tác giả: webvn.com
  • Đánh giá: 5 ⭐ ( 4188 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng thẻ video trong HTML5. Sử dụng javascript để lắng nghe các sự kiện và tùy chỉnh các thuộc tính trong thẻ Video.

TỔNG HỢP ĐẦY ĐỦ CÁC THẺ TRONG HTML

  • Tác giả: www.quangninhbay.com
  • Đánh giá: 4 ⭐ ( 6410 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thẻ trong HTML

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 3 ⭐ ( 9874 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tag xác định mối quan hệ giữa một tài liệu HTML và các tài nguyên bên ngoài. Tag được dùng phổ biến nhất là link tới tài liệu css.

Audio và Video trong HTML5

  • Tác giả: vietjack.com
  • Đánh giá: 4 ⭐ ( 3885 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Audio và Video trong HTML5 – Học HTML5 cơ bản và nâng cao theo các bước đơn giản và dễ dàng với các ví dụ qua các chương hướng dẫn gồm 2D Canvas, Audio, Video, Các phần tử Semantic mới, Geolocation, Kho lưu Web, Local Storage vĩnh viễn, Kho lưu Local vĩnh viễn, Web Storage, Web SQL, Forms 2.0, Microdata và hoạt động kéo và thả, hoạt động Drag và Drop.

Tổng hợp các thẻ trong HTML

  • Tác giả: blog.codegym.vn
  • Đánh giá: 5 ⭐ ( 8720 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 39: Video trong HTML5

  • Tác giả: timoday.edu.vn
  • Đánh giá: 4 ⭐ ( 3845 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách chèn video vào trang web và các tuỳ chọn để hiển thị, chạy, dừng và điều chỉnh âm lượng …

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php