Video and audio content

音頻和視頻在網(wǎng)絡(luò)上

網(wǎng)絡(luò)開發(fā)人員想要在網(wǎng)上使用視頻和音頻很長時(shí)間，自從2000年代初，當(dāng)我們開始有足夠的帶寬足夠支持任何種類的視頻(視頻文件比文本甚至圖像大得多)。 在早期，諸如HTML的本地網(wǎng)絡(luò)技術(shù)沒有能夠在Web上嵌入視頻和音頻，因此基于專有(或基于插件)的技術(shù)，例如 / wiki / Adobe_Flash"class ="external"> Flash (以及以后的 Silverlight ) )變得普遍用于處理這樣的內(nèi)容。 這種技術(shù)工作確定，但它有一些問題，包括不能很好地與HTML / CSS功能，安全問題和輔助功能問題。

網(wǎng)絡(luò)開發(fā)人員想要在網(wǎng)上使用視頻和音頻很長時(shí)間，自從2000年代初，當(dāng)我們開始有足夠的帶寬足夠支持任何種類的視頻(視頻文件比文本甚至圖像大得多)。 在早期，諸如HTML的本地網(wǎng)絡(luò)技術(shù)沒有能夠在Web上嵌入視頻和音頻，因此基于專有(或基于插件)的技術(shù)，例如 / wiki / Adobe_Flash"class ="external"> Flash (以及以后的 Silverlight ) )變得普遍用于處理這樣的內(nèi)容。 這種技術(shù)工作確定，但它有一些問題，包括不能很好地與HTML / CSS功能，安全問題和輔助功能問題。

我們不會教你如何產(chǎn)生音頻和視頻文件 - 這需要一個完全不同的技能。 我們已向您提供 示例音頻和視頻文件和示例代碼為您自己的實(shí)驗(yàn)，以防您無法掌握自己的實(shí)驗(yàn)。

< video> 元件

>< video> 元素可讓您輕松嵌入視頻。 一個非常簡單的例子如下所示:

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

注意的特點(diǎn)是:

src

In the same way as for the <img> element, the src attribute contains a path to the video you want to embed. It works in exactly the same way.

controls

Users must be able to control video and audio playback (it's especially critical for victims of epilepsy.) You must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate JavaScript API. At minimum, the interface must include a way to start and stop the media, and to adjust the volume.

The paragraph inside the <video> tags

This is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older browsers. This can be anything you like; in this case we've provided a directly link to the video file, so the user can at least access it some way regardless of what browser they are using.

嵌入的視頻將如下所示:

您可以試試 這里的示例live (另請參閱 /simple-video.html"class ="external">源代碼)。

支持多種格式

上述示例有一個問題，如果您嘗試使用Safari或Internet Explorer等瀏覽器訪問上面的直播鏈接，您可能已經(jīng)注意到了。 視頻無法播放！ 這是因?yàn)椴煌臑g覽器支持不同的視頻(和音頻)格式。

讓我們快速閱讀術(shù)語。 格式(如MP3，MP4和WebM)稱為容器格式。 它們包含組成整首歌曲或視頻的不同部分，例如音軌，視頻軌(在視頻的情況下)和用于描述正在呈現(xiàn)的媒體的元數(shù)據(jù)。

音頻和視頻軌道也有不同的格式，例如:

• A WebM container usually packages Ogg Vorbis audio with VP8/VP9 video. This is supported mainly in Firefox and Chrome.
• An MP4 container often packages AAC or MP3 audio with H.264 video. This is supported mainly in Internet Explorer and Safari.
• The older Ogg container tends to go with Ogg Vorbis audio and Ogg Theora video. This was supported mainly in Firefox and Chrome, but has basically been superceded by the better quality WebM format.

音頻播放器將傾向于直接播放音軌，例如。 MP3或Ogg文件。 這些不需要容器。

上述格式存在將視頻和音頻壓縮為可管理的文件(原始視頻和音頻非常大)。 瀏覽器包含不同的 解碼器")是編碼或解碼數(shù)據(jù)流的計(jì)算機(jī)程序。編碼解碼器 ，例如Vorbis或H.264，用于將壓縮的聲音和視頻轉(zhuǎn)換為二進(jìn)制數(shù)字并返回。 如上所述，不幸的是瀏覽器并不都支持相同的編解碼器，因此您必須為每個媒體制作提供幾個文件。 如果你缺少正確的編解碼器解碼媒體，它只是不會播放。

那么我們該怎么做呢？ 請查看以下 -formats.html"class ="external">更新示例( -content / multiple-video-formats.html"class ="external">試試這里，也):

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

這里我們將 src 屬性從實(shí)際的< video> 標(biāo)簽中取出，而是包含單獨(dú)的 / zh-CN / docs / Web / HTML / Element / source"title ="HTML源元素為圖片，音頻或視頻元素指定多個媒體資源，它是一個空元素，通常用于 不同瀏覽器支持的多種格式的相同媒體內(nèi)容"> < source> 指向其自己的來源的元素。 在這種情況下，瀏覽器將通過< source> 元素，播放第一個具有編解碼器支持。 包括WebM和MP4源應(yīng)該足以在大多數(shù)平臺和瀏覽器上播放您的視頻，這些天。

每個< source> 元素也有一個 type 屬性。 這是可選的，但建議您包含它們 - 它們包含 類型:MIME類型(現(xiàn)在正確稱為"媒體類型"，但有時(shí)也稱為"內(nèi)容類型")是與指示文件類型的文件一起發(fā)送的字符串(例如，聲音文件可能標(biāo)記為audio / ogg或 圖像文件圖像/ png)。 它的作用與傳統(tǒng)上在Windows上的文件擴(kuò)展名一樣。"> MIME類型的視頻文件，瀏覽器可以讀取這些文件，并立即跳過他們不理解的視頻。 如果不包括，瀏覽器將加載并嘗試播放每個文件，直到他們找到一個工作，獲得更多的時(shí)間和資源。

其他< video> 特征

您可以在HTML5視頻上添加其他功能。 看看我們的第三個例子，如下:

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

這將給我們一個輸出看起來像這樣:

新功能有:

width and height

You can control the video size either with these attributes or with CSS. In both cases, videos maintain their native width-height ratio — known as the 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.

autoplay

This attribute makes the audio or video start playing right away while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.

loop

This attribute makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.

muted

This attribute causes the media to play with the sound turned off by default.

poster

This attribute takes as its value the URL of an image, which will be displayed before the video is played. It is intended to be used for a splash or advertising screen.

preload

此屬性用于緩沖大文件的元素。 它可以采用3個值之一:

• "none" does not buffer the file
• "auto" buffers the media file
• "metadata" buffers only the metadata for the file

您可以在 在Github上播放(也 請注意，我們尚未將 autoplay 屬性包含在 實(shí)時(shí)版本 - 如果視頻開始播放，一旦頁面加載，你不會看到海報(bào)！

< audio> 元件

或更多的音頻源，使用src屬性或源元素表示;瀏覽器將選擇最適合的一個。"> < audio> 元素的工作原理與 < video> 元素，但有一些小的差異，如下所述。 典型示例可能如下所示:

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

這會在瀏覽器中產(chǎn)生類似以下內(nèi)容:

這比視頻播放器占用更少的空間，因?yàn)闆]有可視組件 - 您只需要顯示控制來播放音頻。 與HTML5視頻的其他差異如下:

• The <audio> element doesn't support the width/height attributes — again, there is no visual component, so there is nothing to assign a width or height to.
• It also doesn't support the poster attribute — again, no visual component.

除此之外，< audio> 支持與< video> 相同的所有功能 - 查看上述部分以了解更多信息。

顯示視頻文本軌道

現(xiàn)在我們將討論一個稍微更高級的概念，這是非常有用的知道。 許多人不能或不想聽到他們在網(wǎng)絡(luò)上找到的音頻/視頻內(nèi)容，至少在某些時(shí)候。 例如:

• Many people have auditory impairments (more commonly known as hard of hearing, or deaf) so can't hear the audio.
• Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown) or might not want to disturb others if they are in a quiet place (like a library.)
• People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.

能否向這些人提供在音頻/視頻中說出的話的抄本不是很好嗎？ 好了，感謝HTML5視頻，您可以使用 WebVTT 格式和 ="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/track"title ="HTML軌道元素用作媒體元素(音頻和視頻)的子代，它可以讓您 指定定時(shí)文本軌道(或基于時(shí)間的數(shù)據(jù))，例如自動處理字幕。軌道以WebVTT格式(.vtt文件) - 網(wǎng)絡(luò)視頻文本軌道格式化。"> < track> 元素。

WebVTT是一種用于寫入包含多個文本字符串以及元數(shù)據(jù)的文本文件的格式，諸如在視頻中希望每個文本字符串被顯示的時(shí)間，甚至是有限的樣式/定位信息。 這些文本字符串稱為提示，您可以根據(jù)不同的目的顯示不同的類型，最常見的是:

subtitles

Translations of foreign material, for people who don't understand the words spoken in the audio.

captions

Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.

timed descriptions

Text for conversion into audio, to serve people with visual impairments.

典型的WebVTT文件將如下所示:

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.

  ...

要使這個顯示與HTML媒體播放一起，您需要:

1. Save it as a .vtt file in a sensible place.
2. Link to the .vtt file with the <track> element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the kind attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use srclang to tell the browser what language you have written?the subtitles in.

這里有一個例子:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

這將導(dǎo)致顯示字幕的視頻，如下所示:

>

有關(guān)詳情，請參閱為HTML5視頻添加字幕和翻譯字幕。 您可以查找示例，與Github上的此文章一起， 由Ian Devlin撰寫(請參閱源代碼 。)這個例子使用一些JavaScript來讓用戶在不同的字幕之間進(jìn)行選擇。 請注意，要打開字幕，您需要按"CC"按鈕并選擇一個選項(xiàng) - English，Deutsch或Espa?ol。

主動學(xué)習(xí):嵌入您自己的音頻和視頻

對于這種主動學(xué)習(xí)，我們(理想情況下)喜歡你出去進(jìn)入世界，并記錄一些你自己的視頻和音頻 - 大多數(shù)手機(jī)，這些天，允許你輕松地記錄音頻和視頻，并提供了你可以傳輸 到你的電腦，你可以使用它。 你可能需要做一些轉(zhuǎn)換，最終在視頻情況下的WebM和MP4，以及音頻情況下的MP3和Ogg，但有足夠的程序，以允許你這樣做沒有太多的麻煩， 例如 Miro Video Converter 和 class ="external"> Audacity 。 我們希望你能去！

如果您無法提供任何視頻或音頻，那么您可以隨時(shí)使用我們的 視頻和音頻內(nèi)容"class ="external">樣本音頻和視頻文件，以執(zhí)行此練習(xí)。 您也可以使用我們的示例代碼作為參考。

我們希望您:

1. Save your audio and video files in a new directory on your computer.
2. Create a new HTML file in the same directory, called index.html.
3. Add <audio> and <video> elements to the page; make them display the default browser controls.
4. Give both of them <source> elements so that browsers will find the audio format they support best and load it. These should include type attributes.
5. Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.

為了額外的好處，您可以嘗試研究文本軌道，并制定如何添加一些字幕到您的視頻。

概要

這是一個包裝;我們希望你有樂趣在網(wǎng)頁上播放視頻和音頻！在下一篇文章中，我們將介紹使用像"title ="HTML內(nèi)聯(lián)框架元素iframe代表嵌套的瀏覽上下文，有效地將另一個HTML頁面嵌入到當(dāng)前頁面中在HTML 4.01中，文檔可能包含頭部和正文或頭部和框架集，但不能同時(shí)包含主體和框架集，然而，可以在正常的文檔主體內(nèi)使用iframe。每個瀏覽上下文具有其自己的會話歷史和活動文檔。包含嵌入內(nèi)容的瀏覽上下文稱為父瀏覽上下文。頂級瀏覽<iframe> and 上下文(沒有父級)通常是瀏覽器窗口。"> < iframe> 和\">docs / Web / HTML / Element / object"title ="HTML對象元素表示一個外部資源，可以被視為一個圖像，一個嵌套的瀏覽上下文或一個插件需要處理的資源。"> .\">< object> 。

也可以看看

• <audio>
• <video>
• <source>
• <track>
• Adding captions and subtitles to HTML5 video
• Audio and Video delivery: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.
• Audio and Video manipulation: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)