programming html

Luồng âm thanh html

Bạn nên luôn bao gồm các thuộc tính 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
4 và 
const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
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

Phần tử 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
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ên

Văn bản giữa 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
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ử 
const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
6

HTMLTự động phát

Để tự động bắt đầu video, hãy sử dụng thuộc tính 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
9

Thí dụ


 
 
Trình duyệt của bạn không hỗ trợ thẻ video.

Tự mình thử »

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 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
0 sau 
const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
9 để video của bạn bắt đầu phát tự động [nhưng bị tắt tiếng]

Thí dụ


 
 
Trình duyệt của bạn không hỗ trợ thẻ video.

Tự mình thử »

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
6

Yếu tố4. 09. 03. 54. 010. 5

Định dạng video HTML

Có 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ử 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
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ên

Văn bản giữa các thẻ 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
4 và 
const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
5 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử 
const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
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à video

Cho 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ử 


  

  
  

  
  
  

  
  download video
8 và 

  

  
  

  
  
  

  
  download video
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

  1. Kiểm tra định dạng mà trình duyệt hỗ trợ thông qua tính năng phát hiện [thường là một trong hai lựa chọn, như đã nêu ở trên]
  2. Nếu trình duyệt không hỗ trợ phát lại bất kỳ định dạng nào được cung cấp nguyên bản, hãy hiển thị hình ảnh tĩnh hoặc sử dụng công nghệ dự phòng để hiển thị video
  3. Xác định cách bạn muốn phát/khởi tạo phương tiện [e. g. một yếu tố 
    
  

  
  

  
  
  

  
  download video
    9, hoặc có lẽ là 
    const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
    1?]
  4. Cung cấp tệp phương tiện cho trình phát

Âm thanh HTML


  

  
  

  
  download audio

Đ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 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
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


  

  
  

  
  
  

  
  download video

Đ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 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
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 ngoan

For further info see element and Creating a cross-browser video player.

Âm thanh JavaScript

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];

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ử 


  

  
  

  
  
  

  
  download video
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


  

  
  

  
  
  

  
  download video
0

Nói. js sử dụng kỹ thuật này. Hãy thử bản trình diễn

Video JavaScript


  

  
  

  
  
  

  
  download video
1

Chú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


  

  
  

  
  
  

  
  download video
2

Trong 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ồng

Cũ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 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
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ử 


  

  
  

  
  
  

  
  download video
9


  

  
  

  
  
  

  
  download video
5

Tiếp theo, nếu được hỗ trợ, hãy kết nối nguồn webcam với phần tử video


  

  
  

  
  
  

  
  download video
6

Để tìm hiểu thêm, hãy đọc trang 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
7 của chúng tôi

Ghi âm đa phương tiện

Cá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 

const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
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ừ 
const myAudio = document.createElement['audio'];

if [myAudio.canPlayType['audio/mpeg']] {
  myAudio.setAttribute['src','audiofile.mp3'];
} else if [myAudio.canPlayType['audio/ogg']] {
  myAudio.setAttribute['src','audiofile.ogg'];
}

myAudio.currentTime = 5;
myAudio.play[];
5, chuyển luồng đó tới đối tượng 

  

  
  

  
  
  

  
  download video
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


  

  
  

  
  
  

  
  download video
1

Xem 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 


  

  
  

  
  
  

  
  download video
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 gian

Tiệ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 


  

  
  

  
  
  

  
  download video
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 ứng

Cá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ạn

Bạ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 


  

  
  

  
  
  

  
  download video
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/video

Nế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


  

  
  

  
  
  

  
  download video
5

thêm một chút JavaScript để phát hiện các sự kiện để phát và tạm dừng âm thanh


  

  
  

  
  
  

  
  download video
0

Bạ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/video

Dừng tải xuống phương tiện

Mặc dù việc dừng phát lại phương tiện dễ dàng như gọi phương thức 


  

  
  

  
  
  

  
  download video
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


  

  
  

  
  
  

  
  download video
1

Bằng cách xóa thuộc tính 


  

  
  

  
  
  

  
  download video
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 

  

  
  

  
  
  

  
  download video
06 sau khi xóa thuộc tính, vì chỉ xóa thuộc tính 

  

  
  

  
  
  

  
  download video
05 sẽ không gọi thuật toán tải. Nếu phần tử 

  

  
  

  
  
  

  
  download video
9 cũng có phần tử con 

  

  
  

  
  
  

  
  download video
09, thì những phần tử đó cũng nên được xóa trước khi gọi 

  

  
  

  
  
  

  
  download video
06

Lưu ý rằng chỉ cần đặt thuộc tính 


  

  
  

  
  
  

  
  download video
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ông

Cá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 


  

  
  

  
  
  

  
  download video
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ại

Bạn có thể sử dụng thuộc tính 


  

  
  

  
  
  

  
  download video
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 

  

  
  

  
  
  

  
  download video
15 liệt kê phạm vi thời gian mà bạn có thể tìm kiếm


  

  
  

  
  
  

  
  download video
2

Chỉ định phạm vi phát lại

Khi chỉ định URI của phương tiện cho phần tử 


  

  
  

  
  
  

  
  download video
8 hoặc 

  

  
  

  
  
  

  
  download video
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ện

Một phạm vi thời gian được chỉ định bằng cú pháp


  

  
  

  
  
  

  
  download video
3

Thờ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ụ


  

  
  

  
  
  

  
  download video
18

Chỉ định rằng video sẽ phát trong phạm vi từ 10 giây đến 20 giây


  

  
  

  
  
  

  
  download video
19

Chỉ định rằng video sẽ phát từ đầu đến 10. 5 giây


  

  
  

  
  
  

  
  download video
20

Chỉ định rằng video sẽ phát từ đầu đến hai giờ


  

  
  

  
  
  

  
  download video
21

Chỉ định rằng video sẽ bắt đầu phát sau 60 giây và phát đến hết video

xử lý lỗi

Lỗi được gửi đến phần tử con 


  

  
  

  
  
  

  
  download video
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


  

  
  

  
  
  

  
  download video
4

Vì 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ử 


  

  
  

  
  
  

  
  download video
09 có ID "mp4_src" và "3gp_src" sẽ nhận được các sự kiện 

  

  
  

  
  
  

  
  download video
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ông

Sử 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ợ

  • Âm thanh MP3 [
    
  

  
  

  
  
  

  
  download video
    25]. http. // jPlayer. org/audio/mp3/Miaow-01-Tempered-song. mp3 [phát âm thanh MP3 trực tiếp. ]
  • Âm thanh MP4 [
    
  

  
  

  
  
  

  
  download video
    26]. http. // jPlayer. org/audio/m4a/Miaow-01-Tempered-song. m4a [phát âm thanh MP4 trực tiếp. ]
  • Ogg âm thanh [
    
  

  
  

  
  
  

  
  download video
    27]. http. // jPlayer. org/audio/ogg/Miaow-01-Tempered-song. ogg [phát âm thanh OGG trực tiếp. ]
  • Video MP4 [
    
  

  
  

  
  
  

  
  download video
    28]. http. // jPlayer. org/video/m4v/Big_Buck_Bunny_Trailer. m4v [phát video MP4 trực tiếp. ]
  • Video WebM [
    
  

  
  

  
  
  

  
  download video
    29]. http. // jPlayer. org/video/webm/Big_Buck_Bunny_Trailer. webm [phát video WebM trực tiếp. ]
  • Video Ogg [
    
  

  
  

  
  
  

  
  download video
    50]. http. // jPlayer. org/video/ogv/Big_Buck_Bunny_Trailer. ogv [phát video OGG trực tiếp. ]

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ệp

Mặ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 


  

  
  

  
  
  

  
  download video
51 của máy chủ phương tiện của mình


  

  
  

  
  
  

  
  download video
5

2. Tệp của bạn đã được mã hóa không chính xác

Cá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

  • Audacity — Trình chỉnh sửa và ghi âm miễn phí
  • Miro — Trình phát video và nhạc mã nguồn mở miễn phí
  • Phanh tay — Bộ chuyển mã video mã nguồn mở
  • Firefogg — Mã hóa video và âm thanh cho Firefox
  • FFmpeg2 — Bộ mã hóa dòng lệnh toàn diện
  • Libav — Bộ mã hóa dòng lệnh toàn diện
  • vid. ly — Trình phát video, chuyển mã và phân phối
  • Internet Archive — Chuyển mã và lưu trữ miễn phí

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ử 


  

  
  

  
  
  

  
  download video
09 con không tải được, hãy kiểm tra giá trị của thuộc tính 

  

  
  

  
  
  

  
  download video
53 của phần tử phương tiện. Nếu đây là 

  

  
  

  
  
  

  
  download video
54, bạn biết rằng tất cả các nguồn không tải được

Nế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ử 


  

  
  

  
  
  

  
  download video
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ỉ định

Hiển thị nội dung dự phòng khi không thể giải mã nguồn

Mộ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ó


  

  
  

  
  
  

  
  download video
6


  

  
  

  
  
  

  
  download video
7

Thư viện JavaScript âm thanh/video

Mộ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ử 


  

  
  

  
  
  

  
  download video
56 cho phụ đề cũng có thể được cung cấp thông qua các thư viện phương tiện

Chỉ có âm thanh

  • Trình quản lý âm thanh
  • Biên độJS
  • HowlerJS

chỉ video

  • trình phát lưu lượng. Miễn phí với hình mờ logo flowplayer. Mã nguồn mở [được cấp phép GPL. ]
  • JWPlayer. Yêu cầu đăng ký để tải về. Phiên bản mã nguồn mở [Giấy phép Creative Commons. ]
  • Tuyệt vờiVideo. Yêu cầu đăng ký. Thiết lập dựa trên biểu mẫu với liên kết dành riêng cho tên miền tới thư viện được lưu trữ trên CDN
  • Video. js. Miễn phí và mã nguồn mở [Apache 2 được cấp phép. ]

Âm thanh và video

  • jPlayer. Miễn phí và mã nguồn mở [MIT cấp phép. ]
  • yếu tố truyền thông. js. Miễn phí và mã nguồn mở [MIT cấp phép. ]

API âm thanh trên web

  • AudioContext Monkeypatch. Một polyfill cho các phiên bản cũ hơn của Web Audio API; . ]

hướng dẫn cơ bản

Tạ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ử 


  

  
  

  
  
  

  
  download video
9

Khái niệm cơ bản về kiểu dáng trình phát video

Vớ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ệt

Bà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 


  

  
  

  
  
  

  
  download video
8 hoặc 

  

  
  

  
  
  

  
  download video
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ện

Phát lại HTMLTỷ lệ giải thích

Thuộc tính 


  

  
  

  
  
  

  
  download video
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ết

Sử dụng API âm thanh trên web

Giả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ến

Phá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 ứng

Giả 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 5

Chi 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 cao

Thê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 


  

  
  

  
  
  

  
  download video
9, sử dụng Web_Video_Text_Tracks_Format và phần tử 

  

  
  

  
  
  

  
  download video
56

Viết mã Web Audio API hoạt động trên mọi trình duyệt

Hướng dẫn viết mã Web Audio API trình duyệt chéo

Ghi âm dễ dàng với API MediaRecorder

Giả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 


  

  
  

  
  
  

  
  download video
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

Bài Viết Liên Quan

Hướng dẫn pygame python 3
Hướng dẫn tạo comment trong wordpress
Những bài hát hot nhất tháng 9 năm 2023
Câu hỏi và câu trả lời html css
Các type command linux
Sao lưu cơ sở dữ liệu phpmyadmin xampp
Log bao nhiêu bằng căn3
Làm cách nào để chỉnh sửa cơ sở dữ liệu trong phpmyadmin?
Python lưu trữ dữ liệu dưới dạng JSON như thế nào?
Khung gui hiện đại python
Baptism of the Lord 2023
Cài đặt phần mở rộng php ssh2 CentOS
Smtplib có được bao gồm trong Python không?
Phản ứng Axios MongoDB
Bản đồ nhiệt excel theo trạng thái
Cách tìm độ dài của danh sách lồng nhau trong python
Python thêm giây vào datetime
Không thể nhập Excel vào SQL Server
Ứng dụng android php
Can you find out what day of week will be jan 1st 2023?

Toplist mới

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
7 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
7 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
7 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
7 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
7 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
7 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
7 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
7 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
7 tháng trước

Bài mới nhất

Đề thi toán vào 10 tp hồ chí minh năm 2024
Bài tập tiếng anh unit 1 lớp 7 năm 2024
Nhiệt độ trung bình trạm châu đốc năm 2024
Lỗi phiên chơi không hợp lệ minecraft trong server properties năm 2024
Độ tuổi phá thai trung bình ở việt nam năm 2024
Bài tập trắc nghiệm tiếng anh 9 unit 9 10 năm 2024
Bài tập viet cau relative clause replace by participles năm 2024
Cách làm thẻ visa để thanh toán quảng facebook năm 2024
Cựu quân nhân khác cựu chiến binh như thế nào năm 2024
Tìm hiểu về văn hóa ẩm thực hàn quốc năm 2024

Chủ Đề

programming Hỏi Đáp Là gì Mẹo Hay Toplist Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Tiếng anh Top List bao nhieu bao nhiêu hướng dẫn Món Ngon Bài tập So Sánh So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Bài Tập javascript Thế nào Ở đâu Hướng dẫn Dịch Tại sao Máy tính Đại học