Thẻ nào được sử dụng để thêm tệp mp4 vào html5?
|
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 nay bao gôm
Nếu bạn đang tìm cách phát huy tiềm năng của video vào năm 2022 thì bạn chắc chắn đang ở đúng nơi. Show
Phần tử video HTML là gì?Phần tử `video` được Opera đề xuất lần đầu tiên 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. Thẻ video HTML5 là gì?The ` Video HTML5 hoạt động như thế nào?To add video to your page using the ` Hãy phá vỡ đ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 phát lại video ` src `Chỉ định vị trí hoặc đường dẫn đến tệp phương tiện video mà 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 xem 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 `` 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 Sự cố với Thẻ video HTML5The problem is that different browsers don’t support the same media formats in their implementations of the HTML5 `  Khả năng tương thích thẻ video HTML5 trên nhiều trình duyệtVậy làm cách nào để đảm bảo video của bạn có thể phát được trên tất cả các trình duyệt trên tất cả các nền tảng? 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 nó từ các tùy chọn được cung cấp và phục vụ nó Chuyển đổi video HTML5Có 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. Thuộc tính video HTML5Beyond cross-browser compatibility, the HTML5 ` `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`Ra lệnh rằng video sẽ phát lại sau khi đến cuối `tắt tiếng`Cho biết rằng video nên được 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 video sẽ bắt đầu phát ngay sau khi được tải `áp phích`Cung cấp URL của hình ảnh có thể được sử dụng làm màn hình giật gân hoặc hình thu nhỏ trước khi phát video. Lưu ý rằng nếu bạn định chỉ định một hình ảnh áp phích thì không cần thêm thuộc tính `autoplay` vì nó sẽ ghi đè thuộc tính `poster` `thời lượng`Trả về độ dài 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 `playsinline`Nói rằng trình duyệt nên 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 trình duyệt 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ó `autoplay`. giá trị có thể là `metadata`Cho trình duyệt biết rằng người dùng không cần video nhưng gợi ý rằng việc tìm nạp siêu dữ liệu của nó (kích thước, danh sách theo dõi, thời lượng, v.v.) là điều nên làm. Đâ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`Không tải trước `autoPictureinPicture`Phản ánh thuộc tính HTML cho biết liệu video có tự động chuyển sang chế độ hình trong hình khi người dùng chuyển từ tài liệu này sang tài liệu khác hay không Cách cải thiện khả năng truy cập videoHãy xem cách đảm bảo rằng các video được nhúng trên một trang web vẫn có thể truy cập được đối với nhiều đối tượng
Bản thân nội dung video thuần túy không đủ khả năng truy cập đối với người dùng có thể bị khiếm thính hoặc khiếm khuyết về nhận thức hoặc thậm chí người dùng có thể đang ở trong các tình huống tạm thời không thuận lợi—ví dụ: môi trường ồn ào hoặc một nơi yên tĩnh bắt buộc như thư viện. Ghi chú. Phạm vi thời gian phải ở trong _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ách sử dụng công cụ nhận dạng giọng nói. Once you’ve created this file, you can embed it into the HTML video using the ` The Elements of the ‘’ AttributeỞ đây chúng tôi giải thích chức năng của từng thuộc tính trong phần tử ` `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`Cho biết ngôn ngữ của bản nhạc `tốt bụng`Chỉ định loại theo dõi văn bản được cung cấp. giá trị có thể là `phụ đề`Xếp chồng các bản dịch bằng văn bản của đoạn 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 nghe không hiểu ngôn ngữ gốc được sử dụng trong âm thanh `chú thích`Lớp phủ phiên âm của âm thanh lên video. Khác với phụ đề ở chỗ phụ đề thường có cùng ngôn ngữ với âm thanh và mang tính mô tả 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 âm thanh `mô tả`Lớp mô tả âm thanh đầy đủ của tất cả nội dung video lên video, từ hội thoại đến hành động đến hiệu ứng âm thanh đến tín hiệu. Dành cho người mù hoặc không xem được 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ể dễ dàng điều hướng đến các phần khác nhau của video. `src`Cho biết 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ụ đề, cần cho biết bộ phụ đề dành cho ngôn ngữ nào, ví dụ 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 phản hồi. 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ảngBạ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. To make a ` Đây là hình ảnh của phần tử video phản hồi CSS Ở đây, chúng tôi đã đặt chiều cao cho video là `auto` để đả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. Lưu ý cách nó bây giờ phù hợp độc đáo trên màn hình If you’ll like the video to be contained within a section, you can simply wrap the ` |
