Làm cách nào để thêm video âm thanh hình ảnh trong HTML?
|
Xin chào các lập trình viên. Chào mừng đến với blog Codewithrandom. Hôm nay chúng ta học cách thêm đa phương tiện vào Html Code. Chúng tôi tìm hiểu cách thêm Hình ảnh, Video và Âm thanh cũng như cách nhúng video YouTube vào trang web của bạn bằng HTML Show
QUẢNG CÁO 1. Cách thêm hình ảnh vào HtmlQUẢNG CÁO Chúng ta thêm hình ảnh vào HTML bằng cách sử dụng thẻ hình ảnh, thẻ hình ảnh được sử dụng để chèn hình ảnh vào HTML nên chúng ta có 2 thuộc tính trong thẻ hình ảnh 1tag là thẻ tệp là src=” Nơi chúng tôi chèn đường dẫn tệp để chèn hình ảnh và 2tag là .
QUẢNG CÁO đầu ra
QUẢNG CÁO Hơn 5 dự án HTML CSS với mã nguồn 2. Cách thêm video vào HTMLChúng tôi thêm thẻ video để chèn video vào trang web HTML của chúng tôi. Chúng tôi có nhiều thuộc tính trong thẻ video. Thẻ đầu tiên là thẻ nguồn trong thẻ nguồn này, chúng tôi chèn đường dẫn tệp vào thuộc tính src và chúng tôi có thuộc tính loại nên chúng tôi cung cấp mp4/Ogg Mã của Cách thêm video vào HTML
QUẢNG CÁO đầu ra
Hơn 100 dự án JavaScript với mã nguồn (Người mới bắt đầu đến Nâng cao) 3. Cách thêm âm thanh vào HTMLChúng tôi thêm âm thanh vào trang web của mình bằng thẻ âm thanh đơn giản, thẻ này rất giống với thẻ video HTML QUẢNG CÁO Tạo trang web du lịch bằng HTML & CSS QUẢNG CÁO Mã cách thêm âm thanh vào HTML
đầu ra Về cơ bản, chúng tôi sử dụng thẻ âm thanh và dễ dàng đặt nó vào src nhưng để hiểu rõ hơn, chúng tôi sử dụng nguồn trong thẻ âm thanh hoặc video của mình. Ngoài ra, ở đây chúng tôi xác định loại âm thanh của mình và đây là âm nhạc/âm thanh của chúng tôi đã sẵn sàng để xem trên trang web. Ngoài ra, chúng tôi sử dụng thẻ điều khiển mà chúng tôi sử dụng trong thẻ video của mình để kiểm soát để chúng tôi sử dụng trong âm thanh để kiểm soát phát/tạm dừng và tăng/giảm âm lượng nhạc 4. Cách thêm video Youtube vào HTMLThêm video YouTube vào HTML cũng là đa phương tiện, vì vậy trước tiên chúng tôi truy cập YouTube và sao chép bất kỳ liên kết video nào và hãy tạo thẻ iframe. Tôi biết đó là thẻ mới cho một số Người mới bắt đầu. Tôi cũng là Người mới bắt đầu nên hãy tạo thẻ iframe bên trong chỉ xác định chiều rộng và chiều cao Mã của Cách thêm video youtube vào HTML QUẢNG CÁO
QUẢNG CÁO đầu ra QUẢNG CÁO
QUẢNG CÁO Trang web phòng tập thể dục đáp ứng bằng HTML, CSS & JavaScript QUẢNG CÁO Trong bài đăng này, chúng tôi tìm hiểu cách thêm đa phương tiện vào HTML, như hình ảnh, video và âm thanh cũng như tìm hiểu cách nhúng video YouTube vào HTML bằng mã hóa đơn giản. Nếu chúng tôi đã làm sai hoặc có bất kỳ sự nhầm lẫn nào, vui lòng gửi bình luận để trả lời hoặc giúp bạn học tập dễ dàng Trong bài đăng trên blog này, chúng tôi sẽ thảo luận về Cách thêm đa phương tiện vào HTML với mã nguồn hoàn chỉnh để bạn có thể chỉ cần sao chép và dán chúng vào dự án của riêng mình Trước đó, các công nghệ web gốc như HTML không cho phép nhúng video và âm thanh trên Web. Các công nghệ dựa trên plugin đã trở nên phổ biến để xử lý những nội dung như vậy, nhưng chúng có nhiều vấn đề, bao gồm cả việc không hoạt động tốt với các tính năng HTML/CSS, các vấn đề về bảo mật và khả năng truy cập. Sau đó, đặc tả HTML5 đã giới thiệu các tính năng như vậy với các phần tử và Phần tử được sử dụng để nhúng tệp âm thanh vào trang web và phần tử được sử dụng để nhúng video Cách thêm âm thanh trên trang webTrước HTML5, các tệp âm thanh đã được thêm vào trang bằng cách tích hợp âm thanh nền với sự trợ giúp của thẻ. Tệp đã được phát trong khi trang được xem và người dùng không thể tắt âm thanh. Trong HTML5, chúng tôi có thể nhúng các tệp âm thanh bằng thẻ và không cần kết nối các plugin của bên thứ ba. Phần tử âm thanh có thể được kiểm soát bằng HTML hoặc Javascript và được tạo kiểu bằng CSS Trong mã, thuộc tính src đề cập đến URL của tệp âm thanh và thuộc tính controls thêm bảng điều khiển (nút khởi chạy, thanh cuộn, bộ điều chỉnh âm lượng) Vì không phải tất cả các trình duyệt đều hỗ trợ tất cả các định dạng âm thanh, tệp âm thanh được mã hóa/giải mã bằng codec âm thanh (thiết bị điện tử kỹ thuật số hoặc ứng dụng phần mềm dựa trên máy tính hỗ trợ nén và giải nén dữ liệu âm thanh kỹ thuật số). Tất cả các định dạng của tệp âm thanh được thêm đồng thời thông qua phần tử có thuộc tính src Khi xác định các định dạng tệp khác nhau, chúng tôi khuyên bạn nên xác định loại MIME cho từng tệp để cho phép trình duyệt bản địa hóa tệp được hỗ trợ. Loại MIME được xác định bởi sự trợ giúp của thuộc tính type Các định dạng âm thanh phổ biến nhất là những định dạng sau MP3 – định dạng âm thanh phổ biến nhất, sử dụng nén mất dữ liệu và cho phép giảm kích thước tệp. Bất chấp sự phổ biến của người dùng, các công ty truyền hình và đài phát thanh sử dụng các codec ISO-MPEG hiện đại hơn, như AAC hoặc MPEG-H AAC (Advanced Audio Codec) — codec đóng, tương tự MP3, nhưng so với loại sau, nó cung cấp chất lượng cao hơn với cùng mức độ nén hoặc mạnh hơn Ogg Vorbis— định dạng miễn phí với mã mở, được hỗ trợ trong Firefox, Opera và Chrome. Cung cấp âm thanh chất lượng tốt, nhưng không được người chơi thiết bị hỗ trợ đầy đủ Trong phiên bản HTML trước, video được nhúng vào trang thông qua plugin của bên thứ ba, chẳng hạn như QuickTime, RealPlayer hoặc Flash. HTML5 có một thẻ mới, dùng để chèn video vào trang web Trong một mã, nó trông như thế này Thuộc tính src cho biết URL của tệp và thuộc tính controls được sử dụng để hiển thị các phần tử điều khiển Mỗi trình duyệt hỗ trợ codec cụ thể, đó là lý do tại sao, để cung cấp khả năng phát lại video trong tất cả các trình duyệt, tệp video phải được đặt ở một số định dạng. Giống như trong trường hợp tệp âm thanh, tất cả các định dạng của tệp video đều được bao gồm trong phần tử, bắt đầu với phần tử được ưu tiên nhất. Mỗi tệp video phải có loại MIME, được xác định bởi thuộc tính loạiĐể đảm bảo rằng trình duyệt có thể xử lý các tệp video, hãy tạo một tệp. htaccess trong thư mục chứa trang web xác định các loại MIME cho video Ngày nay có 3 định dạng video cơ bản. MP4/MPEG-4, OGG và WebM +. Để nén dữ liệu video và phát lại chúng, chúng tôi sử dụng codec Đối với tệp video có định dạng MPEG-4, Н. 264 codec video và codec âm thanh ААС được sử dụng. Nếu bạn muốn sử dụng codec, bạn phải có giấy phép Đối với tệp video Ogg, hãy sử dụng codec video Theora và codec âm thanh Vorbis với mã mở Đối với các tệp video ở định dạng WebM +, hãy sử dụng codec video VP8 và codec âm thanh Vorbis. Trong trường hợp này, không cần giấy phép Hầu hết các máy chủ không cung cấp phương tiện Ogg hoặc mp4 với các loại MIME chính xác. Đối với điều này, bạn có thể cần phải thêm cấu hình thích hợp ________số 8 Phụ đề và tiêu đề được thêm vào tệp âm thanh và video thông qua phần tử, được sử dụng làm phần tử con củavà Để căn chỉnh trình phát video trên trang, hãy đặt phần tử vào vùng chứa, gán cho nó một lớp, sau đó xác định chiều rộng và chiều cao cho nó, tương ứng với kích thước video của bạn Làm cách nào để thêm video hình ảnh và âm thanh trong HTML?Phần tử , rất giống với cách nhúng hình ảnh. Các thuộc tính chúng ta có thể bao gồm là. src Thuộc tính này là viết tắt của nguồn, rất giống với thuộc tính src được sử dụng trong phần tử hình ảnh. Chúng tôi sẽ thêm liên kết đến tệp video trong thuộc tính src.
Làm cách nào để chèn âm thanh và video vào HTML?Để nhúng video vào HTML, chúng tôi sử dụng thẻ . Nó chứa một hoặc nhiều nguồn video cùng một lúc bằng cách sử dụng thẻ
Làm cách nào để chèn hình ảnh vào HTML?Thẻ HTML . Hình ảnh không được chèn kỹ thuật vào một trang web; . Thẻ
Làm cách nào để chèn âm thanh và video vào HTML bằng notepad?Trong Hướng dẫn này, chúng ta sẽ Thêm tệp âm thanh vào HTML bằng Trình soạn thảo văn bản Notepad. . Mở Notepad và bắt đầu viết cú pháp HTML. . Khai báo thẻ âm thanh HTML. . Chỉ định đường dẫn của tệp âm thanh. . Bước 4. Thêm thuộc tính điều khiển |
