Bạn có thể nhúng video vào tài liệu HTML bằng các chức năng sau: <video> , <object> và <embed> . Mỗi hoạt động khác nhau và mỗi loại sử dụng src Thuộc tính để trỏ đến URL của video mong muốn.
Khi bạn đang tạo một trang web, bạn có thể quyết định rằng bạn muốn nhúng video vào tài liệu. Ví dụ:bạn có thể đang viết một hướng dẫn về cách nướng một chiếc bánh và bao gồm một video cùng với công thức.
Có một số cách để nhúng video vào tài liệu HTML. Trong hướng dẫn này, chúng tôi sẽ trình bày ba cách bạn có thể nhúng video bằng cách sử dụng các HTML này các chức năng:sử dụng <video> , sử dụng <object> và sử dụng <embed> .
Thẻ video
HTML5 bao gồm một phần tử hữu ích để nhúng video vào các trang web:<video> . Mặc dù phần tử không hoạt động trong tất cả các trình duyệt web hiện đại - nó vẫn còn hơi mới - thẻ sẽ hoạt động trong hầu hết các trình duyệt.
Phần tử video có hai tham số:nguồn video của bạn và các điều khiển bạn muốn sử dụng. Đây là cú pháp cho video nhúng HTML <video> thẻ:
<video controls="controls" src="videos/ourVideo.mp4"> This browser does not support the video element. </video>
Trong ví dụ trên, chúng tôi sử dụng src thuộc tính tham chiếu video tại videos/ourVideo.mp4 . Chúng tôi cũng yêu cầu trình duyệt sử dụng bộ điều khiển mặc định đi kèm với nó bằng cách sử dụng controls thuộc tính. Văn bản trong <video> của chúng tôi thẻ sẽ xuất hiện nếu video không thể hiển thị trên trang web.
Nếu chúng tôi muốn bao gồm các nguồn thay thế, chúng tôi có thể sử dụng mã sau:
<video controls="controls"> <source src="videos/ourVideo.mp4" type="video/mp4"> <source src="videos/ourSecondVideo.mp3" type="video/mp3"> This browser does not support the video element. </video>
Bây giờ chúng tôi đã chèn một video trên trang web của mình bằng cách sử dụng phần tử nguồn của chúng tôi. Ở trên, chúng tôi đã đề cập đến tài nguyên mp4 và mp3, nhưng bạn có thể sử dụng bất kỳ định dạng video chuẩn nào trong <video> thẻ.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Thẻ Nhúng
Ngoài ra, bạn có thể sử dụng <embed> phần tử để nhúng video và các nội dung đa phương tiện khác vào một HTML trang web. Đây là ví dụ về <embed> đang được sử dụng để tham chiếu video Adobe Flash trên trang web:
<embed src="videos/ourVideo.swf" width="600px" height="400px">
Mã này hiển thị video Flash trên trang web. Chúng tôi cũng đã sử dụng width và height để chỉ định kích thước của trình phát video của chúng tôi. Trong trường hợp này, trình phát video của chúng tôi sẽ hiển thị ở kích thước 600 × 400.
Tuy nhiên, nếu bạn đang tham chiếu đến tài nguyên Flash, video của bạn có thể không phát. Điều này là do người dùng phải cài đặt và hoạt động Flash trên hệ thống của họ, còn nhiều người dùng thì không.
Thẻ đối tượng
Chúng tôi cũng có thể sử dụng <object> để nhúng các loại phương tiện khác nhau vào một HTML trang web. Ví dụ:bạn có thể sử dụng thẻ này để nhúng HTML5 tài nguyên video, âm thanh, Flash hoặc tệp PDF vào trang web của bạn. Đây là một ví dụ về <object> phần tử đang được sử dụng để nhúng video vào trang web:
<object src="videos/ourVideo.mp4" width="600px" height="400px"></object>
Một lần nữa, người dùng phải cài đặt và hoạt động Flash cho <object> để làm việc. Ngay cả khi bạn vẫn muốn sử dụng <object> , hãy cân nhắc sử dụng <video> hoặc cả hai cho người dùng chưa cài đặt Flash.
Kết luận
HTML bao gồm ba phần tử cho phép bạn nhúng các tệp video vào một trang web:<video> , <object> và <embed> . Vì vậy, nếu bạn đang muốn thêm video vào trang web, bạn nên sử dụng các thẻ này. Hôm nay, chúng ta đã thảo luận về việc sử dụng các thẻ này và khả năng tương thích của chúng với các trình duyệt và Flash.
Giờ đây, bạn đã được trang bị kiến thức cần thiết để nhúng video vào bất kỳ trang web nào!