Luồng âm thanh html
Bạn nên luôn bao gồm các thuộc tính 4 và 5. Nếu chiều cao và chiều rộng không được đặt, trang có thể nhấp nháy khi tải video Show
Phần tử 6 cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn từ. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiênVăn bản giữa 6 và các thẻ sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử 6HTMLTự động phátĐể tự động bắt đầu video, hãy sử dụng thuộc tính 9Thí dụ
Ghi chú. Trình duyệt Chromium không cho phép tự động phát trong hầu hết các trường hợp. Tuy nhiên, tự động phát tắt tiếng luôn được cho phép Thêm 0 sau 9 để video của bạn bắt đầu phát tự động (nhưng bị tắt tiếng)Thí dụ
Hỗ trợ trình duyệtCác số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử 6Yếu tố4. 09. 03. 54. 010. 5Định dạng video HTMLCó ba định dạng video được hỗ trợ. MP4, WebM và Ogg. Trình duyệt hỗ trợ cho các định dạng khác nhau là Phần tử 3 cho phép bạn chỉ định các tệp âm thanh thay thế mà trình duyệt có thể chọn từ. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiênVăn bản giữa các thẻ 4 và 5 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử 4 Chúng tôi có thể phân phối âm thanh và video trên web theo một số cách, từ các tệp phương tiện 'tĩnh' đến các luồng trực tiếp thích ứng. Bài viết này được dự định là điểm khởi đầu để khám phá các cơ chế phân phối khác nhau của phương tiện dựa trên web và khả năng tương thích với các trình duyệt phổ biến Các yếu tố âm thanh và videoCho dù chúng tôi đang xử lý các tệp âm thanh được ghi sẵn hoặc luồng trực tiếp, cơ chế cung cấp chúng thông qua các phần tử 8 và 9 của trình duyệt vẫn gần như giống nhau. Hiện tại, để hỗ trợ tất cả các trình duyệt, chúng tôi cần chỉ định hai định dạng, mặc dù với việc sử dụng định dạng MP3 và MP4 trong Firefox và Opera, điều này đang thay đổi nhanh chóng. Bạn có thể tìm thông tin về khả năng tương thích trong Hướng dẫn về các loại và định dạng phương tiện trên webĐể phân phối video và âm thanh, quy trình làm việc chung thường giống như thế này
Âm thanh HTML
Đoạn mã trên sẽ tạo một trình phát âm thanh cố gắng tải trước càng nhiều âm thanh càng tốt để phát lại mượt mà Ghi chú. Thuộc tính 2 có thể bị bỏ qua bởi một số trình duyệt di độngĐể biết thêm thông tin, hãy xem Thông tin cơ bản về âm thanh của trình duyệt chéo (Chi tiết về âm thanh HTML) Video HTML
Đoạn mã trên tạo trình phát video có kích thước 640x480 pixel, hiển thị hình ảnh áp phích cho đến khi video được phát. Chúng tôi hướng dẫn video tự động phát nhưng tắt tiếng theo mặc định Ghi chú. Thuộc tính 3 có thể bị bỏ qua bởi một số trình duyệt di động. Ngoài ra, tính năng tự động phát có thể gây tranh cãi khi sử dụng sai. Bạn nên đọc hướng dẫn Tự động phát cho phương tiện và Web Audio API để tìm hiểu cách sử dụng tự động phát một cách khôn ngoanFor further info see Âm thanh JavaScript
Chúng tôi đặt nguồn âm thanh tùy thuộc vào loại tệp âm thanh mà trình duyệt hỗ trợ, sau đó đặt đầu phát trong 5 giây và cố gắng phát nó Ghi chú. Phát sẽ bị bỏ qua bởi hầu hết các trình duyệt trừ khi được phát hành bởi một sự kiện do người dùng bắt đầu Cũng có thể cung cấp một phần tử 8 một tệp WAV được mã hóa base64, cho phép tạo âm thanh một cách nhanh chóng 0Nói. js sử dụng kỹ thuật này. Hãy thử bản trình diễn Video JavaScript 1Chúng tôi đặt nguồn của video tùy thuộc vào loại tệp video mà trình duyệt hỗ trợ, sau đó chúng tôi đặt chiều rộng và chiều cao của video API âm thanh trên web 2Trong ví dụ này, chúng tôi truy xuất tệp MP3 qua XHR, tải tệp đó vào nguồn và phát tệp đó (Bạn hãy tự mình thử). Tìm hiểu thêm về thông tin cơ bản về API âm thanh trên web trong Sử dụng API âm thanh trên web getUserMedia/API luồngCũng có thể truy xuất luồng trực tiếp từ webcam và/hoặc micrô bằng cách sử dụng 5 và API luồng. Điều này tạo thành một phần của công nghệ rộng lớn hơn được gọi là WebRTC (Truyền thông thời gian thực trên web) và tương thích với các phiên bản mới nhất của Chrome, Firefox và OperaĐể lấy luồng từ webcam của bạn, trước tiên hãy thiết lập phần tử 9 5Tiếp theo, nếu được hỗ trợ, hãy kết nối nguồn webcam với phần tử video 6Để tìm hiểu thêm, hãy đọc trang 7 của chúng tôiGhi âm đa phương tiệnCác tiêu chuẩn mới đang được triển khai để cho phép trình duyệt của bạn lấy phương tiện từ micrô hoặc máy ảnh của bạn bằng cách sử dụng 5 và ghi lại ngay lập tức bằng API ghi MediaStream mới. Bạn lấy luồng bạn nhận được từ 5, chuyển luồng đó tới đối tượng 00, lấy kết quả đầu ra và nạp vào nguồn âm thanh hoặc video của bạn*Cơ chế chính được phác thảo dưới đây 1Xem MediaStream Recording API để biết thêm chi tiết Tiện ích mở rộng nguồn phương tiện (MSE)Tiện ích mở rộng nguồn phương tiện là bản nháp đang hoạt động của W3C có kế hoạch mở rộng 01 để cho phép JavaScript tạo luồng phương tiện để phát lại. Việc cho phép JavaScript tạo luồng tạo điều kiện thuận lợi cho nhiều trường hợp sử dụng như phát trực tiếp thích ứng và phát trực tiếp thay đổi thời gianTiện ích mở rộng phương tiện được mã hóa (EME)Tiện ích mở rộng phương tiện được mã hóa là một đề xuất của W3C để mở rộng 01, cung cấp API để kiểm soát phát lại nội dung được bảo vệAPI hỗ trợ các trường hợp sử dụng từ giải mã khóa rõ ràng đơn giản đến video có giá trị cao (với việc triển khai tác nhân người dùng phù hợp). Trao đổi giấy phép/khóa được kiểm soát bởi ứng dụng, tạo điều kiện phát triển các ứng dụng phát lại mạnh mẽ hỗ trợ nhiều công nghệ bảo vệ và giải mã nội dung Một trong những cách sử dụng chính của EME là cho phép các trình duyệt triển khai DRM (Quản lý quyền kỹ thuật số), giúp ngăn nội dung dựa trên web (đặc biệt là video) bị sao chép Truyền phát thích ứngCác định dạng và giao thức mới đang được triển khai để tạo điều kiện phát trực tuyến thích ứng. Phương tiện phát trực tuyến thích ứng có nghĩa là băng thông và chất lượng thông thường của luồng có thể thay đổi theo thời gian thực để đáp ứng với băng thông khả dụng của người dùng. Phát trực tuyến thích ứng thường được sử dụng cùng với phát trực tiếp trong đó việc phân phối âm thanh hoặc video mượt mà là điều tối quan trọng Các định dạng chính được sử dụng để phát trực tuyến thích ứng là HLS và MPEG-DASH. MSE đã được thiết kế với DASH. MSE xác định các luồng byte theo ISOBMFF và M2TS (cả hai đều được hỗ trợ trong DASH, cái sau được hỗ trợ trong HLS). Nói chung, nếu bạn quan tâm đến các tiêu chuẩn, đang tìm kiếm sự linh hoạt hoặc muốn hỗ trợ hầu hết các trình duyệt hiện đại, có lẽ bạn nên sử dụng DASH Ghi chú. Hiện tại Safari không hỗ trợ DASH mặc dù dấu gạch ngang. js sẽ hoạt động trên các phiên bản Safari mới hơn được lên lịch phát hành với OSX Yosemite DASH cũng cung cấp một số cấu hình bao gồm các cấu hình onDemand đơn giản không yêu cầu tiền xử lý và chia nhỏ các tệp phương tiện. Ngoài ra còn có một số dịch vụ dựa trên đám mây sẽ chuyển đổi phương tiện của bạn sang cả HLS và DASH Để biết thêm thông tin, hãy xem Âm thanh và video web phát trực tiếp Tùy chỉnh Trình phát đa phương tiện của bạnBạn có thể quyết định rằng bạn muốn trình phát âm thanh hoặc video của mình có giao diện nhất quán trên các trình duyệt hoặc chỉ muốn điều chỉnh nó để phù hợp với trang web của bạn. Kỹ thuật chung để đạt được điều này là bỏ qua thuộc tính 03 để các điều khiển mặc định của trình duyệt không được hiển thị, tạo các điều khiển tùy chỉnh bằng HTML và CSS, sau đó sử dụng JavaScript để liên kết các điều khiển của bạn với API âm thanh/videoNếu bạn cần thêm thứ gì đó, bạn có thể thêm các tính năng hiện không có trong trình phát mặc định, chẳng hạn như tốc độ phát lại, chuyển đổi luồng chất lượng hoặc thậm chí phổ âm thanh. Bạn cũng có thể chọn cách làm cho trình phát của mình phản hồi — ví dụ: bạn có thể xóa thanh tiến trình trong một số điều kiện nhất định Bạn có thể phát hiện các sự kiện nhấp, chạm và/hoặc bàn phím để kích hoạt các hành động như phát, tạm dừng và xóa. Điều quan trọng là phải nhớ các điều khiển bàn phím để thuận tiện cho người dùng và khả năng truy cập Ví dụ nhanh — trước tiên hãy thiết lập âm thanh và điều khiển tùy chỉnh của bạn trong HTML 5thêm một chút JavaScript để phát hiện các sự kiện để phát và tạm dừng âm thanh 0Bạn có thể thử ví dụ này ở đây. Để biết thêm thông tin, hãy xem Tạo trình phát âm thanh tùy chỉnh của riêng bạn Các mẹo khác cho âm thanh/videoDừng tải xuống phương tiệnMặc dù việc dừng phát lại phương tiện dễ dàng như gọi phương thức 04 của phần tử, nhưng trình duyệt vẫn tiếp tục tải xuống phương tiện cho đến khi phần tử phương tiện được xử lý thông qua bộ sưu tập rácĐây là một mẹo dừng tải xuống cùng một lúc 1Bằng cách xóa thuộc tính 05 của phần tử phương tiện và gọi phương thức load(), bạn giải phóng các tài nguyên được liên kết với video, điều này sẽ dừng tải xuống mạng. Bạn phải gọi 06 sau khi xóa thuộc tính, vì chỉ xóa thuộc tính 05 sẽ không gọi thuật toán tải. Nếu phần tử 9 cũng có phần tử con 09, thì những phần tử đó cũng nên được xóa trước khi gọi 06Lưu ý rằng chỉ cần đặt thuộc tính 05 thành một chuỗi trống sẽ thực sự khiến trình duyệt coi thuộc tính đó như thể bạn đang đặt nguồn video thành một đường dẫn tương đối. Điều này khiến trình duyệt thử tải xuống một nội dung khác không chắc là video hợp lệTìm kiếm thông qua phương tiện truyền thôngCác phần tử phương tiện cung cấp hỗ trợ để di chuyển vị trí phát lại hiện tại đến các điểm cụ thể trong nội dung của phương tiện. Điều này được thực hiện bằng cách đặt giá trị của thuộc tính 12 trên phần tử; . Đặt giá trị thành thời gian, tính bằng giây, tại đó bạn muốn tiếp tục phát lạiBạn có thể sử dụng thuộc tính 14 của phần tử để xác định phạm vi của phương tiện hiện có sẵn để tìm kiếm. Điều này trả về một đối tượng 15 liệt kê phạm vi thời gian mà bạn có thể tìm kiếm 2Chỉ định phạm vi phát lạiKhi chỉ định URI của phương tiện cho phần tử 8 hoặc 9, bạn có thể tùy ý đưa vào thông tin bổ sung để chỉ định phần phương tiện sẽ phát. Để thực hiện việc này, hãy thêm dấu thăng ("#") theo sau là mô tả đoạn phương tiệnMột phạm vi thời gian được chỉ định bằng cú pháp 3Thời gian có thể được chỉ định dưới dạng số giây (dưới dạng giá trị dấu phẩy động) hoặc dưới dạng giờ/phút/giây được phân tách bằng dấu hai chấm (chẳng hạn như 2. 05. 01 trong 2 giờ, 5 phút và 1 giây) Một vài ví dụ 18Chỉ định rằng video sẽ phát trong phạm vi từ 10 giây đến 20 giây 19Chỉ định rằng video sẽ phát từ đầu đến 10. 5 giây 20Chỉ định rằng video sẽ phát từ đầu đến hai giờ 21Chỉ định rằng video sẽ bắt đầu phát sau 60 giây và phát đến hết video xử lý lỗiLỗi được gửi đến phần tử con 09 tương ứng với các nguồn dẫn đến lỗiĐiều này cho phép bạn phát hiện nguồn nào không tải được, điều này có thể hữu ích. Hãy xem xét HTML này 4Vì Firefox không hỗ trợ MP4 và 3GP trên một số nền tảng do tính chất vướng mắc bằng sáng chế của chúng, các phần tử 09 có ID "mp4_src" và "3gp_src" sẽ nhận được các sự kiện 24 trước khi tài nguyên Ogg được tải. Các nguồn được thử theo thứ tự xuất hiện và khi một nguồn tải thành công, các nguồn còn lại hoàn toàn không được thửKiểm tra xem trình duyệt có hỗ trợ các định dạng được cung cấp khôngSử dụng các nguồn đã được xác minh sau trong phần tử âm thanh và video của bạn để kiểm tra hỗ trợ
Nếu những thứ này không phát thì trình duyệt bạn đang kiểm tra không hỗ trợ định dạng đã cho. Cân nhắc sử dụng một định dạng khác hoặc sử dụng dự phòng Nếu những thứ này hoạt động nhưng các tệp bạn đang cung cấp thì không, có hai vấn đề có thể xảy ra 1. Máy chủ phương tiện không phân phối đúng loại mime với tệpMặc dù điều này thường được hỗ trợ, nhưng bạn có thể cần thêm phần sau vào tệp 51 của máy chủ phương tiện của mình 52. Tệp của bạn đã được mã hóa không chính xácCác tệp của bạn có thể đã được mã hóa không chính xác — hãy thử mã hóa bằng một trong những công cụ sau, những công cụ này đã được chứng minh là khá đáng tin cậy
Phát hiện khi không có nguồn nào được tảiĐể phát hiện rằng tất cả các phần tử 09 con không tải được, hãy kiểm tra giá trị của thuộc tính 53 của phần tử phương tiện. Nếu đây là 54, bạn biết rằng tất cả các nguồn không tải đượcNếu tại thời điểm đó, bạn thêm một nguồn khác, bằng cách chèn một phần tử 09 mới làm phần tử con của phần tử phương tiện, Gecko sẽ cố tải nguồn đã chỉ địnhHiển thị nội dung dự phòng khi không thể giải mã nguồnMột cách khác để hiển thị nội dung dự phòng của video, khi không có nguồn nào có thể được giải mã trong trình duyệt hiện tại, là thêm trình xử lý lỗi vào phần tử nguồn cuối cùng. Sau đó, bạn có thể thay thế video bằng nội dung dự phòng của nó 6 7Thư viện JavaScript âm thanh/videoMột số thư viện JavaScript âm thanh và video tồn tại. Các thư viện phổ biến nhất cho phép bạn chọn thiết kế trình phát nhất quán trên tất cả các trình duyệt và cung cấp dự phòng cho các trình duyệt không hỗ trợ âm thanh và video nguyên bản. Dự phòng trước đây đã sử dụng các plugin hiện đã lỗi thời như plugin Adobe Flash hoặc Microsoft Silverlight để cung cấp trình phát đa phương tiện trong các trình duyệt không hỗ trợ, mặc dù chúng không còn được hỗ trợ trên các máy tính hiện đại. Các chức năng khác như phần tử 56 cho phụ đề cũng có thể được cung cấp thông qua các thư viện phương tiệnChỉ có âm thanh
chỉ video
Âm thanh và video
API âm thanh trên web
hướng dẫn cơ bảnTạo trình phát video trên nhiều trình duyệt Hướng dẫn tạo trình phát video cơ bản trên nhiều trình duyệt bằng phần tử 9Khái niệm cơ bản về kiểu dáng trình phát videoVới trình phát video trên nhiều trình duyệt được đưa ra trong bài viết trước, bài viết này hiện xem xét việc cung cấp một số kiểu dáng cơ bản, đáp ứng cho trình phát Thông tin cơ bản về âm thanh trên nhiều trình duyệtBài viết này cung cấp hướng dẫn cơ bản để tạo trình phát âm thanh HTML hoạt động trên nhiều trình duyệt, với tất cả các thuộc tính, thuộc tính và sự kiện liên quan được giải thích và hướng dẫn nhanh về các điều khiển tùy chỉnh được tạo bằng API phương tiện Bộ đệm phương tiện, tìm kiếm và phạm vi thời gianĐôi khi, thật hữu ích khi biết số lượng 8 hoặc 9 đã tải xuống hoặc có thể phát ngay lập tức — một ví dụ điển hình về điều này là thanh tiến trình được lưu vào bộ đệm của trình phát âm thanh hoặc video. Bài viết này thảo luận cách tạo thanh bộ đệm/tìm kiếm bằng TimeRanges và các tính năng khác của API phương tiệnPhát lại HTMLTỷ lệ giải thíchThuộc tính 60 cho phép chúng tôi thay đổi tốc độ hoặc tốc độ phát một đoạn âm thanh hoặc video trên web. Bài viết này giải thích chi tiếtSử dụng API âm thanh trên webGiải thích những điều cơ bản về cách sử dụng Web Audio API để lấy, thao tác và phát lại nguồn âm thanh Hướng dẫn truyền phát trực tuyếnPhát trực tiếp âm thanh và video trên web Công nghệ phát trực tiếp thường được sử dụng để chuyển tiếp các sự kiện trực tiếp như thể thao, hòa nhạc và nói chung là các chương trình TV và Radio được phát trực tiếp. Thường được rút ngắn thành chỉ phát trực tuyến, phát trực tiếp là quá trình truyền phương tiện 'trực tiếp' tới máy tính và thiết bị. Đây là một chủ đề khá phức tạp và mới mẻ với rất nhiều biến số, vì vậy trong bài viết này, chúng tôi sẽ giới thiệu cho bạn về chủ đề này và cho bạn biết cách bạn có thể bắt đầu Thiết lập các nguồn phương tiện phát trực tuyến thích ứngGiả sử bạn muốn thiết lập nguồn phương tiện phát trực tuyến thích ứng trên máy chủ, được sử dụng bên trong phần tử phương tiện HTML. Bạn làm điều đó như thế nào? . MPEG-DASH và HLS (Phát trực tiếp HTTP. ) Truyền phát thích ứng DASH cho video HTML 5Chi tiết cách thiết lập phát trực tuyến thích ứng bằng DASH và WebM hướng dẫn nâng caoThêm chú thích và phụ đề vào video HTML Bài viết này giải thích cách thêm chú thích và phụ đề vào HTML 9, sử dụng Web_Video_Text_Tracks_Format và phần tử 56Viết mã Web Audio API hoạt động trên mọi trình duyệtHướng dẫn viết mã Web Audio API trình duyệt chéo Ghi âm dễ dàng với API MediaRecorderGiải thích những điều cơ bản về cách sử dụng MediaStream Recording API để ghi trực tiếp luồng phương tiện Ghi chú. Phiên bản hệ điều hành Firefox 1. 3 trở lên hỗ trợ giao thức RTSP để phân phối video trực tuyến. Giải pháp dự phòng cho các phiên bản cũ hơn là sử dụng 9 cùng với định dạng phù hợp cho Gecko (chẳng hạn như WebM) để phục vụ nội dung dự phòng. Thông tin thêm sẽ được công bố về điều này trong thời gian tốt |