Hướng dẫn html video play with sound - phát video html với âm thanh

Video và âm thanh trên web

Dòng video và âm thanh trực tuyến đầu tiên được thực hiện bởi các công nghệ dựa trên plugin độc quyền như Flash và Silverlight. Cả hai đều có vấn đề về bảo mật và khả năng tiếp cận, và hiện đã lỗi thời, có lợi cho các phần tử HTML gốc

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Chúng tôi sẽ không dạy bạn cách tạo các tệp âm thanh và video - đòi hỏi một kỹ năng hoàn toàn khác. Chúng tôi đã cung cấp cho bạn các tệp âm thanh và video mẫu và mã ví dụ cho thử nghiệm của riêng bạn, trong trường hợp bạn không thể tự mình nắm giữ.

Lưu ý: Trước khi bạn bắt đầu ở đây, bạn cũng nên biết rằng có khá nhiều OVP (các nhà cung cấp video trực tuyến) như YouTube, Dailymotion và Vimeo và các nhà cung cấp âm thanh trực tuyến như SoundCloud. Các công ty như vậy cung cấp một cách thuận tiện, dễ dàng để lưu trữ và tiêu thụ video, vì vậy bạn không phải lo lắng về mức tiêu thụ băng thông khổng lồ. OVP thậm chí thường cung cấp mã làm sẵn để nhúng video/âm thanh vào các trang web của bạn; Nếu bạn sử dụng tuyến đường đó, bạn có thể tránh được một số khó khăn mà chúng tôi thảo luận trong bài viết này. Chúng tôi sẽ thảo luận về loại dịch vụ này thêm một chút trong bài viết tiếp theo. Before you begin here, you should also know that there are quite a few OVPs (online video providers) like YouTube, Dailymotion, and Vimeo, and online audio providers like Soundcloud. Such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. OVPs even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. We'll be discussing this kind of service a bit more in the next article.

Phần tử

Phần tử

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

<video src="rabbit320.webm" controls>
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="rabbit320.webm">link to the videoa> instead.
  p>
video>

Các tính năng lưu ý là:

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Theo cách tương tự như đối với phần tử

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Người dùng phải có khả năng kiểm soát phát lại video và âm thanh (điều này đặc biệt quan trọng đối với những người bị động kinh.) Bạn phải sử dụng thuộc tính

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Đây được gọi là nội dung dự phòng - điều này sẽ được hiển thị nếu trình duyệt truy cập trang không hỗ trợ phần tử

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Video nhúng sẽ trông giống như thế này:

Bạn có thể thử ví dụ trực tiếp tại đây (xem thêm mã nguồn.)

Sử dụng nhiều định dạng nguồn để cải thiện khả năng tương thích

Có một vấn đề với ví dụ trên. Có thể video có thể không phát cho bạn, bởi vì các trình duyệt khác nhau hỗ trợ các định dạng video (và âm thanh) khác nhau. May mắn thay, có những điều bạn có thể làm để giúp ngăn chặn điều này là một vấn đề.

Nội dung của một tệp phương tiện

Đầu tiên, chúng ta hãy đi qua thuật ngữ một cách nhanh chóng. Các định dạng như MP3, MP4 và WebM được gọi là định dạng container. Họ xác định một cấu trúc trong đó các bản nhạc âm thanh và/hoặc video tạo nên phương tiện được lưu trữ, cùng với siêu dữ liệu mô tả phương tiện truyền thông, những codec nào được sử dụng để mã hóa các kênh của nó, v.v.container formats. They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.

Tệp WebM chứa một bộ phim có bản nhạc chính và một bản nhạc góc thay thế, cộng với âm thanh cho cả tiếng Anh và tiếng Tây Ban Nha, ngoài âm thanh cho bản nhạc Bình luận tiếng Anh có thể được khái niệm hóa như trong sơ đồ dưới đây. Cũng bao gồm các bản nhạc văn bản chứa chú thích đóng cho bộ phim, phụ đề tiếng Tây Ban Nha cho bộ phim và chú thích tiếng Anh cho bài bình luận.

Các bản nhạc âm thanh và video trong bộ chứa giữ dữ liệu theo định dạng phù hợp cho codec được sử dụng để mã hóa phương tiện đó. Các định dạng khác nhau được sử dụng cho các bản nhạc âm thanh so với các bản nhạc video. Mỗi bản nhạc âm thanh được mã hóa bằng codec âm thanh, trong khi các bản nhạc video được mã hóa bằng cách sử dụng (như bạn có thể đã đoán) một codec video. Như chúng ta đã nói trước đây, các trình duyệt khác nhau hỗ trợ các định dạng video và âm thanh khác nhau và các định dạng chứa khác nhau (như MP3, MP4 và WebM, từ đó có thể chứa các loại video và âm thanh khác nhau).

Ví dụ:

• Một thùng chứa WebM thường gói Vorbis hoặc Opus Audio với video VP8/VP9. Điều này được hỗ trợ trong tất cả các trình duyệt hiện đại, mặc dù các phiên bản cũ hơn có thể không hoạt động.
• Một thùng chứa MP4 thường gói âm thanh AAC hoặc MP3 với video H.264. Điều này cũng được hỗ trợ trong tất cả các trình duyệt hiện đại.
• Container OGG có xu hướng sử dụng video Vorbis Audio và Theora. Điều này được hỗ trợ tốt nhất trong Firefox và Chrome, nhưng về cơ bản đã được thay thế bởi định dạng WebM chất lượng tốt hơn.

Có một số trường hợp đặc biệt. Ví dụ: đối với một số loại âm thanh, dữ liệu của Codec thường được lưu trữ mà không có thùng chứa hoặc với một thùng chứa đơn giản hóa. Một trường hợp như vậy là FLAC Codec, được lưu trữ phổ biến nhất trong các tệp FLAC, chỉ là các bản nhạc FLAC thô.

Một tình huống như vậy là tệp MP3 luôn phổ biến. Một "tệp MP3" thực sự là một bản nhạc âm thanh MPEG-1 Layer III (MP3) được lưu trữ trong một thùng chứa MPEG hoặc MPEG-2. Điều này đặc biệt thú vị vì trong khi hầu hết các trình duyệt không hỗ trợ sử dụng phương tiện MPEG trong các yếu tố

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Một trình phát âm thanh sẽ có xu hướng phát trực tiếp một bản nhạc âm thanh, ví dụ: Một tập tin MP3 hoặc OGG. Những thứ này không cần container.

Hỗ trợ tệp phương tiện trong trình duyệt

Lưu ý: Một số định dạng phổ biến, chẳng hạn như MP3 và MP4/H.264, rất tuyệt vời nhưng được các bằng sáng chế bị đóng gói; Đó là, có các bằng sáng chế bao gồm một số hoặc tất cả các công nghệ mà họ dựa trên. Tại Hoa Kỳ, các bằng sáng chế được bảo hiểm cho MP3 cho đến năm 2017 và H.264 được các bằng sáng chế trở nên trong suốt ít nhất 2027. Several popular formats, such as MP3 and MP4/H.264, are excellent but are encumbered by patents; that is, there are patents covering some or all of the technology that they're based upon. In the United States, patents covered MP3 until 2017, and H.264 is encumbered by patents through at least 2027.

Do những bằng sáng chế đó, các trình duyệt muốn thực hiện hỗ trợ cho các codec đó phải trả các khoản phí giấy phép khổng lồ. Ngoài ra, một số người thích tránh phần mềm bị hạn chế và chỉ thích sử dụng các định dạng mở. Do những lý do pháp lý và ưu đãi này, các nhà phát triển web thấy mình phải hỗ trợ nhiều định dạng để nắm bắt toàn bộ khán giả của họ.

Các codec được mô tả trong phần trước tồn tại để nén video và âm thanh vào các tệp có thể quản lý được, vì âm thanh thô và video đều cực kỳ lớn. Mỗi trình duyệt web hỗ trợ một loại codec, như Vorbis hoặc H.264, được sử dụng để chuyển đổi âm thanh và video nén thành dữ liệu nhị phân và quay lại. Mỗi codec cung cấp các lợi thế và nhược điểm của riêng mình, và mỗi container cũng có thể cung cấp các tính năng tích cực và tiêu cực của riêng mình ảnh hưởng đến quyết định của bạn để sử dụng.codecs, like Vorbis or H.264, which are used to convert the compressed audio and video into binary data and back. Each codec offers its own advantages and drawbacks, and each container may also offer its own positive and negative features affecting your decisions about which to use.

Mọi thứ trở nên phức tạp hơn một chút vì không chỉ mỗi trình duyệt hỗ trợ một bộ định dạng tệp container khác nhau, mà mỗi người còn hỗ trợ một lựa chọn codec khác nhau. Để tối đa hóa khả năng trang web hoặc ứng dụng của bạn sẽ hoạt động trên trình duyệt của người dùng, bạn có thể cần cung cấp cho mỗi tệp phương tiện bạn sử dụng ở nhiều định dạng. Nếu trang web của bạn và trình duyệt của người dùng không chia sẻ định dạng phương tiện chung, phương tiện của bạn sẽ không phát.

Do sự phức tạp của việc đảm bảo phương tiện của ứng dụng của bạn có thể xem được trên mọi kết hợp của trình duyệt, nền tảng và thiết bị bạn muốn tiếp cận, việc chọn sự kết hợp tốt nhất giữa codec và container có thể là một nhiệm vụ phức tạp. Xem chọn đúng bộ chứa trong các định dạng hộp chứa phương tiện (loại tệp) để được trợ giúp chọn định dạng tệp container phù hợp nhất với nhu cầu của bạn; Tương tự, xem chọn một codec video trong hướng dẫn codec video web và chọn codec âm thanh trong hướng dẫn codec âm thanh web để được giúp chọn các codec phương tiện đầu tiên sử dụng cho nội dung và đối tượng mục tiêu của bạn.

Một điều cần ghi nhớ: Trình duyệt di động có thể hỗ trợ các định dạng bổ sung không được hỗ trợ bởi các tương đương máy tính để bàn của họ, giống như chúng có thể không hỗ trợ tất cả các định dạng giống nhau mà phiên bản máy tính để bàn. Trên hết, cả trình duyệt máy tính để bàn và di động có thể được thiết kế để giảm tải xử lý phát lại phương tiện (cho tất cả các phương tiện hoặc chỉ cho các loại cụ thể mà nó không thể xử lý nội bộ). Điều này có nghĩa là hỗ trợ phương tiện truyền thông phụ thuộc một phần vào phần mềm mà người dùng đã cài đặt.

Vì vậy, làm thế nào để chúng tôi làm điều này? Hãy xem ví dụ cập nhật sau đây (cũng dùng thử trực tiếp tại đây):

<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the videoa> instead.
  p>
video>

Ở đây, chúng tôi đã lấy thuộc tính

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Mỗi phần tử

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Tham khảo hướng dẫn của chúng tôi về các loại phương tiện và định dạng để được trợ giúp chọn các thùng chứa và codec tốt nhất cho nhu cầu của bạn, cũng như để tìm kiếm các loại MIME phù hợp để chỉ định cho mỗi loại.

Các tính năng khác

Có một số tính năng khác mà bạn có thể bao gồm khi hiển thị video HTML. Hãy xem ví dụ tiếp theo của chúng tôi:

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  preload="auto"
  poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the videoa> instead.
  p>
video>

UI kết quả trông giống như thế này:

Các tính năng bao gồm:

Bạn có thể kiểm soát kích thước video với các thuộc tính này hoặc với CSS. Trong cả hai trường hợp, các video duy trì tỷ lệ chiều rộng chiều rộng bản địa của họ-được gọi là tỷ lệ khung hình. Nếu tỷ lệ khung hình không được duy trì bởi các kích thước bạn đặt, video sẽ phát triển để lấp đầy không gian theo chiều ngang và không gian không được lấp đầy sẽ được cung cấp một màu nền chắc chắn theo mặc định.aspect ratio. If the aspect ratio is not maintained by the sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default.

Làm cho âm thanh hoặc video bắt đầu phát ngay lập tức, trong khi phần còn lại của trang đang tải. Bạn được khuyên không nên sử dụng video tự động phát (hoặc âm thanh) trên các trang web của bạn, bởi vì người dùng có thể thấy nó thực sự khó chịu.

Làm cho video (hoặc âm thanh) bắt đầu phát lại bất cứ khi nào nó kết thúc. Điều này cũng có thể gây khó chịu, vì vậy chỉ sử dụng nếu thực sự cần thiết.

Khiến phương tiện truyền thông phát với âm thanh bị tắt theo mặc định.

URL của một hình ảnh sẽ được hiển thị trước khi video được phát. Nó được dự định sẽ được sử dụng cho màn hình giật gân hoặc màn hình quảng cáo.

Được sử dụng để đệm các tệp lớn; Nó có thể mất một trong ba giá trị:

• 3 không đệm tệp

• 4 bộ đệm tệp phương tiện

• 5 chỉ bộ đệm chỉ siêu dữ liệu cho tệp

Bạn có thể tìm thấy ví dụ trên có sẵn để phát trực tiếp trên GitHub (cũng xem mã nguồn.) Lưu ý rằng chúng tôi chưa bao gồm thuộc tính

Phần tử

Phần tử

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support this audio file. Here is a
    <a href="viper.mp3">link to the audioa> instead.
  p>
audio>

Điều này tạo ra một cái gì đó giống như sau trong trình duyệt:

Điều này chiếm ít không gian hơn một trình phát video, vì không có thành phần trực quan - bạn chỉ cần hiển thị các điều khiển để phát âm thanh. Sự khác biệt khác từ video HTML như sau:

• Phần tử

  video {
      position: fixed;
      text-align: center;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  }
  

  3 không hỗ trợ các thuộc tính ____ 36/________ 37 - một lần nữa, không có thành phần trực quan, do đó không có gì để gán chiều rộng hoặc chiều cao.
• Nó cũng không hỗ trợ thuộc tính
  1 - một lần nữa, không có thành phần trực quan.

Khác với điều này,

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Hiển thị các bản nhạc văn bản video

Bây giờ chúng ta sẽ thảo luận về một khái niệm nâng cao hơn một chút, thực sự hữu ích để biết. Nhiều người không thể hoặc không muốn nghe nội dung âm thanh/video họ tìm thấy trên web, ít nhất là vào một số thời điểm nhất định. Ví dụ:

• Nhiều người bị suy giảm thính giác (chẳng hạn như khó nghe hoặc điếc) vì vậy không thể nghe thấy âm thanh rõ ràng nếu có.
• Những người khác có thể không thể nghe được âm thanh vì họ đang ở trong môi trường ồn ào (như một quán bar đông đúc khi một trò chơi thể thao đang được hiển thị).
• Tương tự, trong các môi trường mà việc phát âm thanh sẽ là một sự phân tâm hoặc gián đoạn (chẳng hạn như trong thư viện hoặc khi đối tác đang cố ngủ), có chú thích có thể rất hữu ích.
• Những người không nói ngôn ngữ của video có thể muốn có bản ghi văn bản hoặc thậm chí dịch để giúp họ hiểu nội dung truyền thông.

Sẽ không tốt nếu có thể cung cấp cho những người này một bảng điểm của các từ được nói trong âm thanh/video? Vâng, nhờ video HTML, bạn có thể. Để làm như vậy, chúng tôi sử dụng định dạng tệp WebVTT và phần tử

<video src="rabbit320.webm" controls>
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="rabbit320.webm">link to the videoa> instead.
  p>
video>

Lưu ý: "Phiên âm" có nghĩa là "viết ra các từ được nói dưới dạng văn bản." Văn bản kết quả là một "bảng điểm". "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."

WebVTT là một định dạng để viết các tệp văn bản chứa nhiều chuỗi văn bản cùng với siêu dữ liệu như thời gian trong video mà mỗi chuỗi văn bản sẽ được hiển thị và thậm chí thông tin định vị/định vị hạn chế. Những chuỗi văn bản này được gọi là tín hiệu, và có một số loại tín hiệu được sử dụng cho các mục đích khác nhau. Các tín hiệu phổ biến nhất là:cues, and there are several kinds of cues which are used for different purposes. The most common cues are:

Bản dịch của tài liệu nước ngoài, đối với những người không hiểu những từ được nói trong âm thanh.

Bản phiên âm đồng bộ của hộp thoại hoặc mô tả về âm thanh quan trọng, để cho những người không thể nghe thấy âm thanh hiểu những gì đang diễn ra.

Văn bản nên được người chơi truyền thông nên nói để mô tả các hình ảnh quan trọng cho người dùng bị mù hoặc khiếm thị.

Một tệp WebVTT điển hình sẽ trông giống như thế này:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

…

Để có được hiển thị này cùng với phát lại phương tiện HTML, bạn cần phải:

1. Lưu nó dưới dạng tệp

   <video src="rabbit320.webm" controls>
     <p>
       Your browser doesn't support HTML video. Here is a
       <a href="rabbit320.webm">link to the videoa> instead.
     p>
   video>
   

   6 ở một nơi hợp lý.
2. Liên kết đến tệp

   <video src="rabbit320.webm" controls>
     <p>
       Your browser doesn't support HTML video. Here is a
       <a href="rabbit320.webm">link to the videoa> instead.
     p>
   video>
   

   6 với phần tử

   <video src="rabbit320.webm" controls>
     <p>
       Your browser doesn't support HTML video. Here is a
       <a href="rabbit320.webm">link to the videoa> instead.
     p>
   video>
   

   5.

   <video src="rabbit320.webm" controls>
     <p>
       Your browser doesn't support HTML video. Here is a
       <a href="rabbit320.webm">link to the videoa> instead.
     p>
   video>
   

   5 nên được đặt trong vòng

   video {
       position: fixed;
       text-align: center;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
   }
   

   3 hoặc

   video {
       position: fixed;
       text-align: center;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
   }
   

   2, nhưng sau tất cả các yếu tố

   video {
       position: fixed;
       text-align: center;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
   }

   8. Sử dụng thuộc tính

   <video controls>
     <source src="rabbit320.mp4" type="video/mp4" />
     <source src="rabbit320.webm" type="video/webm" />
     <p>
       Your browser doesn't support this video. Here is a
       <a href="rabbit320.mp4">link to the videoa> instead.
     p>
   video>
   

   3 để xác định xem các tín hiệu là

   <video controls>
     <source src="rabbit320.mp4" type="video/mp4" />
     <source src="rabbit320.webm" type="video/webm" />
     <p>
       Your browser doesn't support this video. Here is a
       <a href="rabbit320.mp4">link to the videoa> instead.
     p>
   video>
   

   4,

   <video controls>
     <source src="rabbit320.mp4" type="video/mp4" />
     <source src="rabbit320.webm" type="video/webm" />
     <p>
       Your browser doesn't support this video. Here is a
       <a href="rabbit320.mp4">link to the videoa> instead.
     p>
   video>
   

   5 hay

   <video controls>
     <source src="rabbit320.mp4" type="video/mp4" />
     <source src="rabbit320.webm" type="video/webm" />
     <p>
       Your browser doesn't support this video. Here is a
       <a href="rabbit320.mp4">link to the videoa> instead.
     p>
   video>
   

   6. Hơn nữa, sử dụng

   <video controls>
     <source src="rabbit320.mp4" type="video/mp4" />
     <source src="rabbit320.webm" type="video/webm" />
     <p>
       Your browser doesn't support this video. Here is a
       <a href="rabbit320.mp4">link to the videoa> instead.
     p>
   video>
   

   7 để nói với trình duyệt mà bạn đã viết phụ đề. Cuối cùng, thêm

   <video controls>
     <source src="rabbit320.mp4" type="video/mp4" />
     <source src="rabbit320.webm" type="video/webm" />
     <p>
       Your browser doesn't support this video. Here is a
       <a href="rabbit320.mp4">link to the videoa> instead.
     p>
   video>
   

   8 để giúp người đọc xác định ngôn ngữ mà họ đang tìm kiếm.

Đây là một ví dụ:

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Điều này sẽ dẫn đến một video có phụ đề được hiển thị, giống như thế này:

Để biết thêm chi tiết, bao gồm cả cách thêm nhãn, vui lòng đọc thêm chú thích và phụ đề vào video HTML. Bạn có thể tìm thấy ví dụ đi cùng với bài viết này trên GitHub, được viết bởi Ian Devlin (xem mã nguồn.) Ví dụ này sử dụng một số JavaScript để cho phép người dùng chọn giữa các phụ đề khác nhau. Lưu ý rằng để bật phụ đề, bạn cần nhấn nút "CC" và chọn một tùy chọn - Tiếng Anh, Deutsch hoặc Español.

Lưu ý: Theo dõi văn bản cũng giúp bạn với SEO, vì các công cụ tìm kiếm đặc biệt phát triển mạnh trên văn bản. Theo dõi văn bản thậm chí cho phép các công cụ tìm kiếm liên kết trực tiếp đến một điểm tại chỗ thông qua video. Text tracks also help you with SEO, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.

Học tập tích cực: Nhúng âm thanh và video của riêng bạn

Đối với việc học tích cực này, chúng tôi (lý tưởng) như bạn đi ra thế giới và ghi lại một số video và âm thanh của riêng bạn - hầu hết các điện thoại ngày nay cho phép bạn ghi lại âm thanh và video rất dễ dàng và miễn là bạn có thể chuyển nó vào Đối với máy tính của bạn, bạn có thể sử dụng nó. Bạn có thể phải thực hiện một số chuyển đổi để kết thúc với WebM và MP4 trong trường hợp video, và MP3 và OGG trong trường hợp âm thanh, nhưng có đủ chương trình ngoài đó để cho phép bạn làm điều này mà không gặp quá nhiều rắc rối, chẳng hạn như bộ chuyển đổi video Miro và Audacity. Chúng tôi muốn bạn có một đi!

Nếu bạn không thể cung cấp bất kỳ video hoặc âm thanh nào, thì bạn có thể thoải mái sử dụng các tệp âm thanh và video mẫu của chúng tôi để thực hiện bài tập này. Bạn cũng có thể sử dụng mã mẫu của chúng tôi để tham khảo.

Chúng tôi muốn bạn:

1. Lưu các tệp âm thanh và video của bạn trong một thư mục mới trên máy tính của bạn.
2. Tạo một tệp HTML mới trong cùng một thư mục, được gọi là

   <video controls>
     <source src="rabbit320.mp4" type="video/mp4" />
     <source src="rabbit320.webm" type="video/webm" />
     <p>
       Your browser doesn't support this video. Here is a
       <a href="rabbit320.mp4">link to the videoa> instead.
     p>
   video>
   

   9.
3. Thêm các phần tử

   video {
       position: fixed;
       text-align: center;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
   }
   

   3 và

   video {
       position: fixed;
       text-align: center;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
   }
   

   2 vào trang; Làm cho chúng hiển thị các điều khiển trình duyệt mặc định.
4. Cung cấp cho cả hai yếu tố

   video {
       position: fixed;
       text-align: center;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
   }

   8 để các trình duyệt sẽ tìm thấy định dạng âm thanh mà họ hỗ trợ tốt nhất và tải nó. Chúng nên bao gồm các thuộc tính
   1.
5. Cung cấp cho phần tử

   video {
       position: fixed;
       text-align: center;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
   }
   

   2 một poster sẽ được hiển thị trước khi video bắt đầu được phát. Hãy vui vẻ tạo ra đồ họa áp phích của riêng bạn.

Để có thêm tiền thưởng, bạn có thể thử nghiên cứu các bản nhạc văn bản và tìm ra cách thêm một số chú thích vào video của mình.

Kiểm tra kỹ năng của bạn!

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra kỹ năng của bạn: Đa phương tiện và nhúng. Lưu ý rằng câu hỏi đánh giá thứ ba trong bài kiểm tra này giả định kiến ​​thức về một số kỹ thuật được đề cập trong bài viết tiếp theo, vì vậy bạn có thể muốn đọc điều đó trước khi thử nó.

Bản tóm tắt

Và đó là một gói - chúng tôi hy vọng bạn đã vui chơi với video và âm thanh trong các trang web! Trong bài viết tiếp theo, chúng tôi sẽ xem xét các cách khác để nhúng nội dung trên web, sử dụng các công nghệ như

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  preload="auto"
  poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the videoa> instead.
  p>
video>

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  preload="auto"
  poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the videoa> instead.
  p>
video>

Xem thêm

Trong mô -đun này