diff options
Diffstat (limited to 'files/zh-cn/web/media')
| -rw-r--r-- | files/zh-cn/web/media/autoplay_guide/index.html | 265 | ||||
| -rw-r--r-- | files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html | 100 | ||||
| -rw-r--r-- | files/zh-cn/web/media/formats/video_codecs/index.html (renamed from files/zh-cn/web/media/formats/视频编解码器/index.html) | 0 | ||||
| -rw-r--r-- | files/zh-cn/web/media/index.html | 76 |
4 files changed, 441 insertions, 0 deletions
diff --git a/files/zh-cn/web/media/autoplay_guide/index.html b/files/zh-cn/web/media/autoplay_guide/index.html new file mode 100644 index 0000000000..db2ac88dc0 --- /dev/null +++ b/files/zh-cn/web/media/autoplay_guide/index.html @@ -0,0 +1,265 @@ +--- +title: Autoplay guide for media and Web Audio APIs +slug: Web/媒体/Autoplay_guide +translation_of: Web/Media/Autoplay_guide +--- +<p>Automatically starting the playback of audio (or videos with audio tracks) immediately upon page load can be an unwelcome surprise to users. While autoplay of media serves a useful purpose, it should be used carefully and only when needed. In order to give users control over this, browsers often provide various forms of autoplay blocking. <span class="seoSummary">In this guide, we'll cover autoplay functionality in the various media and Web Audio APIs, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully.</span></p> + +<p>Autoplay blocking is <em>not</em> applied to {{HTMLElement("video")}} elements when the source media does not have an audio track, or if the audio track is muted. Media with an active audio track are considered to be <strong>audible</strong>, and autoplay blocking applies to them. <strong>Inaudible</strong> media are not affected by autoplay blocking.</p> + +<h2 id="自动播放_和_自动播放暂停">自动播放 和 自动播放暂停</h2> + +<p>The term <strong>autoplay</strong> refers to any feature that causes audio to begin to play without the user specifically requesting that playback begin. This includes both the use of HTML attributes to autoplay media as well as the user of JavaScript code to start playback outside the context of handling user input.</p> + +<p>That means that both of the following are considered autoplay behavior, and are therefore subject to the browser's autoplay blocking policy:</p> + +<pre class="brush: html notranslate"><audio src="/music.mp4" autoplay></pre> + +<p>和</p> + +<pre class="brush: js notranslate">audioElement.play(); +</pre> + +<p dir="ltr" id="tw-target-text">以下网络功能和API可能会受到自动播放阻止的影响：</p> + +<ul> + <li>The {{Glossary("HTML")}} {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements</li> + <li>The <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> +</ul> + +<p>从用户的角度来看，网页或应用程序自动地发出噪音而没有警告可能会令人讨厌、不便或令人反感。因此，浏览器通常仅允许在特定情况下进行自动播放。</p> + +<h3 id="Autoplay功能">Autoplay功能</h3> + +<p>据新政策，媒体内容将在满足以下至少一个的条件下自动播放：</p> + +<ul> + <li>音频被静音或其音量设置为0</li> + <li>用户和网页已有交互行为（包括点击、触摸、按下某个键等等）</li> + <li>网站已被列入白名单；如果浏览器确定用户经常与媒体互动，这可能会自动发生，也可能通过首选项或其他用户界面功能手动发生</li> + <li>自动播放策略应用到{{HTMLElement("iframe")}}或者其文档上</li> +</ul> + +<p>否则，播放可能会被阻止。导致播放被阻塞的确切情况以及将网站列入白名单的具体方法因浏览器而异，但最好是遵循以上的原则。</p> + +<p>详情，请参阅 <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes">Google Chrome</a> 和 <a href="https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/">WebKit</a> 的自动播放政策。</p> + +<div class="blockIndicator note"> +<p><strong>注意:</strong> 换句话说，如果在尚无任何用户交互的页面中通过编程方式启动播放，则通常会阻止任何包含音频在内的媒体的播放。</p> +</div> + +<h2 id="能自动播放的媒体元素">能自动播放的媒体元素</h2> + +<p>既然我们已经介绍了什么是自动播放以及什么可以阻止自动播放，接下来我们将介绍您的网站或应用程序如何在页面加载时自动播放媒体，如何检测何时自动播放失败，以及当自动播放被浏览器拒绝时的应对技巧。</p> + +<h3 id="autoplay_属性">autoplay 属性</h3> + +<p>想让内容自动播放的最简单方法是将{{htmlattrxref("autoplay", "audio")}}属性添加到{{HTMLElement("audio")}}或{{HTMLElement("video")}}元素。并将{{domxref("HTMLMediaElement.autoplay", "autoplay")}}属性设置为 <code>true</code> ，当 <code>autoplay</code> 的属性为 <code>true</code> 时，媒体元素将在发生以下情况后尽快自动开始播放：</p> + +<ul> + <li> + <p>页面允许使用自动播放功能</p> + </li> + <li>媒体元素已在页面加载期间创建</li> + <li>假设网络性能或带宽没有显着变化，且已收到足够的媒体流并已开始播放，继续播放直至媒体结束而不会中断。</li> +</ul> + +<h4 id="例子1_autoplay属性">例子1: autoplay属性</h4> + +<p>使用 <code>autoplay</code> 属性的{{HTMLElement("audio")}}元素就像如下：</p> + +<pre class="brush: html notranslate"><audio id="musicplayer" autoplay> + <source src="/music/chapter1.mp4" +</audio> +</pre> + +<h4 id="例子2：检测自动播放失败">例子2：检测自动播放失败</h4> + +<p>如果你依靠自动播放功能去做一些重要的事情，或者自动播放失败会以任何方式影响你的应用程序，那你可能会想知道自动播放什么时候没有开始。不幸的是，对于{{htmlattrxref("autoplay", "audio")}}属性，识别自动播放是否成功开始是很棘手的。自动播放失败时<strong>不会触发</strong>任何事件。也没有抛出异常或可以设置回调，甚至在媒体元素上都没有标记来告诉你自动播放是否起作用。你实际能做的就是检查一些值，然后根据这些值猜测自动播放是否起作用。</p> + +<p dir="ltr" id="tw-target-text">如果您能够调整查看内容的方向，那么更好的方法是，依靠知道媒体播放已成功开始，而不是在媒体启动失败时知道。您可以通过侦听要在媒体元素上触发的{{event("play")}}事件来轻松实现此目的。</p> + +<p>The <code>play</code> event is sent both when the media is resumed after being paused <em>and</em> when autoplay occurs. That means that the first time the <code>play</code> event is fired, you know your media is being started for the first time after the page is opened.</p> + +<p>Consider this HTML for a media element:</p> + +<pre class="brush: html notranslate"><video src="myvideo.mp4" autoplay onplay=handleFirstPlay(event)"></pre> + +<p>Here we have a {{HTMLElement("video")}} element whose {{htmlattrxref("autoplay", "video")}} attribute is set, with an {{domxref("HTMLMediaElement.onplay", "onplay")}} event handler set up; the event is handled by a function called <code>handleFirstPlay()</code>, which receives as input the <code>play</code> event.</p> + +<p><code>handleFirstPlay()</code> looks like this:</p> + +<pre class="brush: js notranslate">function handleFirstPlay(event) { + let vid = event.target; + + vid.onplay = null; + + // Start whatever you need to do after playback has started +}</pre> + +<p>After getting a reference to the video element from the {{domxref("Event")}} object's {{domxref("Event.target", "target")}}, the element's <code>onplay</code> handler is set to <code>null</code>. This will prevent any future <code>play</code> events from being delivered to the handler. That could happen if the video is paused and resumed by the user or automatically by the browser when the document is in a background tab.</p> + +<p>At this point, your site or app can begin whatever it needs to do that relies upon the video having been started up.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> This approach doesn't differentiate between autoplay and the user starting playback manually.</p> +</div> + +<h3 id="The_play_method">The play() method</h3> + +<p>The term "autoplay" also refers to scenarios in which a script tries to trigger the playback of media that includes audio, outside the context of handling a user input event. This is done by calling the media element's {{domxref("HTMLMediaElement.play", "play()")}} method.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> It is strongly recommended that you use the <code>autoplay</code> attribute whenever possible, because support for autoplay preferences are more widespread for the <code>autoplay</code> attribute than for other means of playing media automatically. It also lets the browser take responsibility for starting playback, letting it optimize the timing of that taking place.</p> +</div> + +<h4 id="Example_Playing_video">Example: Playing video</h4> + +<p>This simple example plays the first {{HTMLElement("video")}} element found in the document. <code>play()</code> won't let the playback begin unless the document has permission to automatically play media.</p> + +<pre class="brush: js notranslate">document.querySelector("video").play();</pre> + +<h4 id="Example_Handling_play_failures">Example: Handling play() failures</h4> + +<p>It's much easier to detect a failure to autoplay media when you use the {{domxref("HTMLMediaElement.play", "play()")}} method to start it. <code>play()</code> returns a {{jsxref("Promise")}} which is resolved once the media successfully begins to play, and is rejected when playback fails to begin (such as if autoplay is denied). When autoplay fails, you likely will want to offer a way for the user to manually tell the browser to ask the user to grant permission to play media.</p> + +<p>You might use code like this to accomplish the job:</p> + +<pre class="brush: js notranslate">let startPlayPromise = videoElem.play(); + +if (startPlayPromise !== undefined) { + startPlayPromise.catch(error => { + if (error.name === "NotAllowedError") { + showPlayButton(videoElem); + } else { + // Handle a load or playback error + } + }).then(() => { + // Start whatever you need to do only after playback + // has begun. + }); +} +</pre> + +<p>The first thing we do with the result of <code>play()</code> is make sure it's not <code>undefined</code>. We check for this because in earlier versions of the HTML specification, <code>play()</code> didn't return a value. Returning a promise to allow you to determine success or failure of the operation was added more recently. Checking for <code>undefined</code> prevents this code from failing with an error on older versions of web browsers.</p> + +<p>We then add a {{jsxref("Promise.catch", "catch()")}} handler to the promise. This looks at the error's {{domxref("DOMException.name", "name")}} to see if it's <code>NotAllowedError</code>. This indicates that playback failed due to a permission issue, such as autoplay being denied. If that's the case, we should present a user interface to let the user manually start playback; that's handled here by a function <code>showPlayButton()</code>.</p> + +<p>Any other errors are handled as appropriate.</p> + +<p>If the promise returned by <code>play()</code> is resolved without error, the <code>then()</code> clause is run and can begin whatever needs to be done when autoplay has begun.</p> + +<h2 id="Autoplay_using_the_Web_Audio_API">Autoplay using the Web Audio API</h2> + +<p>In the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, a web site or app can start playing audio using the <code>start()</code> method on a source node linked to the {{domxref("AudioContext")}}. Doing so outside the context of handling a user input event is subject to autoplay rules.</p> + +<p><em>More content will come soon; autoplay blocking is still being worked on at Mozilla. If others have it already, they are welcome to pitch in with this section...</em></p> + +<h2 id="The_autoplay_feature_policy">The autoplay feature policy</h2> + +<p>In addition to the browser-side management and control over autoplay functionality described above, a web server can also express its willingness to allow autoplay to function. The {{Glossary("HTTP")}} {{HTTPHeader("Feature-Policy")}} header's <code><a href="/en-US/docs/Web/HTTP/Headers/Feature-Policy/autoplay">autoplay</a></code> directive is used to control which domains, if any, can be used to autoplay media. By default, the <code>autoplay</code> feature policy is set to <code>'self'</code> (<em>including the single quote characters</em>), indicating that autoplay is permitted as they're hosted on the same domain as the document.</p> + +<p>You can also specify <code>'none'</code> to disable autoplay entirely, <code>'*'</code> to allow autoplay from all domains, or one or more specific origins from which media can be automatically played. These origins are separated by space characters.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> The specified feature policy applies to the document and every {{HTMLElement("iframe")}} nested within it, unless those frames include an {{htmlattrxref("allow", "iframe")}}, which sets a new feature policy for that frame and all frames nested within it.</p> +</div> + +<p>When using the {{htmlattrxref("allow", "iframe")}} attribute on an <code><iframe></code> to specify a feature policy for that frame and its nested frames, you can also specify the value <code>'src'</code> to allow autoplay of media only from the same domain as that specified by the frame's {{htmlattrxref("src", "iframe")}} attribute.</p> + +<h3 id="Example_Allowing_autoplay_only_from_the_documents_domain">Example: Allowing autoplay only from the document's domain</h3> + +<p>To use the {{HTTPHeader("Feature-Policy")}} header to only allow media to autoplay from the document's {{Glossary("origin")}}:</p> + +<pre class="notranslate">Feature-Policy: autoplay 'self'</pre> + +<p>To do the same for an {{HTMLElement("iframe")}}:</p> + +<pre class="brush: html notranslate"><iframe src="mediaplayer.html" + allow="autoplay 'src'"> +</iframe> +</pre> + +<h3 id="Example_Allowing_autoplay_and_fullscreen_mode">Example: Allowing autoplay and fullscreen mode</h3> + +<p>Adding <a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a> permission to the previous example results in a <code>Feature-Policy</code> header like the following if fullscreen access is allowed regardless of the domain; a domain restriction can be added as well as needed.</p> + +<pre class="notranslate">Feature-Policy: autoplay 'self'; fullscreen</pre> + +<p>The same permissions, grated using the <code><iframe></code> element's <code>allow</code> property, look like this:</p> + +<pre class="brush: html notranslate"><iframe src="mediaplayer.html" + allow="autoplay 'src'; fullscreen"> +</iframe> +</pre> + +<h3 id="Example_Allowing_autoplay_from_specific_sources">Example: Allowing autoplay from specific sources</h3> + +<p>The <code>Feature-Policy</code> header to allow media to be played from both the document's (or <code><iframe></code>'s) own domain and <code>https://example.media</code> looks like this:</p> + +<pre class="notranslate">Feature-Policy: autoplay 'self' https://example.media</pre> + +<p>An {{HTMLElement("iframe")}} can be written to specify that this autoplay policy should be applied to itself and any child frames would be written thusly:</p> + +<pre class="brush: html notranslate"><iframe width="300" height="200" + src="mediaplayer.html" + allow="autoplay 'src' https://example.media"> +</iframe> +</pre> + +<h3 id="Example_Disabling_autoplay">Example: Disabling autoplay</h3> + +<p>Setting the <code>autoplay</code> feature policy to <code>'none'</code> disables autoplay entirely for the document or <code><iframe></code> and all nested frames. The HTTP header is:</p> + +<pre class="notranslate">Feature-Policy: autoplay 'none'</pre> + +<p>Using the <code><iframe></code>'s <code>allow</code> attribute:</p> + +<pre class="brush: html notranslate"><iframe src="mediaplayer.html" + allow="autoplay 'none'"> +</iframe> +</pre> + +<h2 id="Best_practices">Best practices</h2> + +<p>Tips and recommended best practices to help you make the most of working with autoplay are offered here.</p> + +<h3 id="Handling_autoplay_failure_with_media_controls">Handling autoplay failure with media controls</h3> + +<p>A common use case for autoplay is to automatically begin to play a video clip that goes along with an article, an advertisement, or a preview of the page's main functionality. To autoplay videos like these, you have two options: don't have an audio track, or have an audio track but configure the {{HTMLElement("video")}} element to mute the audio by default, like this:</p> + +<pre class="brush: html notranslate"><video src="/videos/awesomevid.webm" controls autoplay muted></pre> + +<p>This video element is configured to include the user controls (typically play/pause, scrubbing through the video's timeline, volume control, and muting); also, since the {{htmlattrxref("muted", "video")}} attribute is included, the video will autoplay but with the audio muted. The user has the option, however, of re-enabling the audio by clicking on the unmute button in the controls.</p> + +<h2 id="Browser_configuration_options">Browser configuration options</h2> + +<p>Browsers may have preferences that control the way autoplay works, or how autoplay blocking is handled. Here, any such preferences that may be of special significance or importance to you as a web developer are listed. These include any that may aid in testing or debugging as well as any that could be set in a way that you need to be prepared to handle.</p> + +<h3 id="Firefox">Firefox</h3> + +<dl> + <dt><code>media.allowed-to-play.enabled</code></dt> + <dd>A Boolean preference which specifies whether or not the {{domxref("HTMLMediaElement.allowedToPlay")}} property is exposed to the web. This is currently <code>false</code> by default (except in nightly builds, where it's <code>true</code> by default). If this is <code>false</code>, the <code>allowedToPlay</code> property is missing from the <code>HTMLMediaElement</code> interface, and is thus not present on either {{HTMLElement("audio")}} or {{HTMLElement("video")}} elements.</dd> + <dt><code>media.autoplay.allow-extension-background-pages</code></dt> + <dd>This Boolean preference, if <code>true</code>, allows browser extensions' background scripts to autoplay audio media. Setting this value to <code>false</code> disables this capability. The default value is <code>true</code>.</dd> + <dt><code>media.autoplay.allow-muted</code></dt> + <dd>A Boolean preference which if <code>true</code> (the default) allows audio media which is currently muted to be automatically played. If this has been changed to <code>false</code>, media with an audio track will not be permitted to play even if muted.</dd> + <dt><code>media.autoplay.block-webaudio</code></dt> + <dd>A Boolean preference which indicates whether or not to apply autoplay blocking to the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>. The default is <code>true</code>.</dd> + <dt><code>media.autoplay.default</code></dt> + <dd>An integer preference which specifies whether per-domain configuration for autoplay support by default is allowed (<code>0</code>), blocked (<code>1</code>), or prompt-on-use (<code>2</code>). The default value is <code>0</code>.</dd> + <dt><code>media.autoplay.enabled.user-gestures-needed</code> (Nightly builds only)</dt> + <dd>A Boolean preference which controls whether or not detection of user gestures is allowed to override the setting of <code>media.autoplay.default</code>. If <code>media.autoplay.default</code> is <em>not</em> set to <code>0</code> (autoplay allowed by default), this preference being <code>true</code> allows autoplay of media with audio tracks anyway if the page has been activated by user gestures, and media that isn't audible is not restricted at all.</dd> + <dt><code>media.block-autoplay-until-in-foreground</code></dt> + <dd>A Boolean preference which indicates whether or not media playback is blocked when started on a background tab. The default value, <code>true</code>, means that even when otherwise available, autoplay won't take place until after a tab is brought to the foreground. This prevents the distracting situation in which a tab begins playing sound and the user can't find the tab among all their tabs and windows.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a> (Learning guide)</li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Cross-browser audio basics</a></li> +</ul> diff --git a/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html b/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html new file mode 100644 index 0000000000..aed7160371 --- /dev/null +++ b/files/zh-cn/web/media/dash_adaptive_streaming_for_html_5_video/index.html @@ -0,0 +1,100 @@ +--- +title: 为 HTML 5 视频提供的 DASH 自适应串流 +slug: Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video +tags: + - DASH + - HTML + - HTML5 + - 指南 + - 视频流 +translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video +--- +<p><span class="seoSummary">经由 HTTP 的动态自适应串流（DASH）是一种自适应串流协议。</span> 这意味着它使得视频串流能基于网络性能来调整比特率，以保证视频流畅播放。</p> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>Firefox 21 包含了针对 HTM5 WebM 视频的 DASH 实现，但默认没有启用。可以通过在“about:config”里调整“<code>media.dash.enabled</code>”首选项来开启。</p> + +<p>Firefox 23 移除了针对 HTML5 WebM 视频的 DASH 实现。此功能将被 <a href="http://www.w3.org/TR/media-source/">媒体源扩展 API（MSE） </a>的实现取代。MSE 可实现通过 JavaScript 库（例如 dash.js）来提供对 DASH 的支持。详情参见 Bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=778617">778617</a>。</p> + +<h2 id="使用_DASH_-_服务端">使用 DASH - 服务端</h2> + +<p>首先，您需要将WebM视频转换为带有不同比特率的随附视频文件的DASH清单。根据您的需求，启动从 <a href="http://www.ffmpeg.org">ffmpeg.org</a> 的 ffmpeg 程序，就可以使用 libvpx 和 libbvorbis 支持的 WebM 视频和音频（版本2.5以上，3.2.5版本已通过测试）。</p> + +<h3 id="1._使用现有的WebM文件创建一个音频文件和多个视频文件。">1. 使用现有的WebM文件创建一个音频文件和多个视频文件。</h3> + +<p>例如：</p> + +<p>文件<em><strong>in.video</strong></em>可以是任何包含至少一个音频和一个视频流的容器，这些容器可以由ffmpeg解码，</p> + +<p>创建音频：</p> + +<pre><code>ffmpeg -i in.video -vn -acodec libvorbis -ab 128k my_audio.webm</code> + +</pre> + +<p>创建不同的视频</p> + +<pre><code>ffmpeg -i in.video -c:v </code>libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=160:190 -b:v 250k video_160x90_250k.webm + +ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=320:180 -b:v 500k video_320x180_500k.webm + +<code>ffmpeg -i in.video -c:v </code>libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=640:360 -b:v 750k video_640x360_750k.webm + +<code>ffmpeg -i in.video -c:v </code>libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=640:360 -b:v 1000k video_640x360_1000k.webm + +<code>ffmpeg -i in.video -c:v </code>libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=1280:720 -b:v 1500k video_1280x720_1500k.webm +</pre> + +<p>或使用命令创建以上视频：</p> + +<pre>ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \ +-g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=160:190 -b:v 250k video_160x90_250k.webm \ +-an -vf scale=320:180 -b:v 500k video_320x180_500k.webm \ +-an -vf scale=640:360 -b:v 750k video_640x360_750k.webm \ +-an -vf scale=640:360 -b:v 1000k video_640x360_1000k.webm \ +-an -vf scale=1280:720 -b:v 1500k video_1280x720_1500k.webm</pre> + +<h3 id="2._创建清单文件">2. 创建清单文件</h3> + +<pre><code>ffmpeg \ + </code>-f webm_dash_manifest -i video_160x90_250k.webm<code> \ + </code>-f webm_dash_manifest -i video_320x180_500k.webm<code> \ + </code>-f webm_dash_manifest -i video_640x360_750k.webm<code> \ + -f webm_dash_manifest -i video_1280x720_1500k.webm \ + </code>-f webm_dash_manifest -i <code>my_audio.webm \ + </code>-c copy \ + -map 0 -map 1 -map 2 -map 3<code> -map 4 \ + </code>-f webm_dash_manifest \ + -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \ +<code> my_video_manifest.mpd</code></pre> + +<p><code>-map</code> 参数对应输入文件的顺序（每个文件只对应一个参数）。<code>-adaptation_sets</code> 参数将它们分配给适配集；例如，以上命令创建一个包含 0,1,2,3 的视频集（0），而另一个（1）仅仅包含视频流 4 和音频流。</p> + +<p>将清单和相关的视频文件放在Web服务器或CDN上。 DASH通过HTTP来完成，因此只要您的HTTP服务器支持字节范围请求，并且DASH设置为使用 mimetype="application/dash+xml" 来支持 .mpd 文件即可。</p> + +<h2 id="使用DASH-客户端">使用DASH-客户端</h2> + +<p>您将需要修改网页，使其首先指向DASH清单，而不是直接指向特定的视频文件：</p> + +<pre class="brush: html"><video> + <source src="movie.<span class="ZmSearchResult" id="DWT648"><span class="ZmSearchResult" id="DWT650">mpd</span></span>"> + <source src="movie.webm"> + Your browser does not support the video tag. +</video></pre> + +<p>如果浏览器支持DASH，则您的视频现在将自适应地流式传输。</p> + +<h2 id="Links">Links</h2> + +<p><a href="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification" title="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">WebM DASH Specification at The WebM Project</a></p> + +<p><a href="http://dashif.org/" title="http://dashif.org/">DASH Industry Forum</a></p> + +<p><a href="http://wiki.webmproject.org/adaptive-streaming/instructions-to-playback-adaptive-webm-using-dash">WebM project description of how to create DASH files with FFMPEG</a></p> diff --git a/files/zh-cn/web/media/formats/视频编解码器/index.html b/files/zh-cn/web/media/formats/video_codecs/index.html index d299975762..d299975762 100644 --- a/files/zh-cn/web/media/formats/视频编解码器/index.html +++ b/files/zh-cn/web/media/formats/video_codecs/index.html diff --git a/files/zh-cn/web/media/index.html b/files/zh-cn/web/media/index.html new file mode 100644 index 0000000000..5a66bbe303 --- /dev/null +++ b/files/zh-cn/web/media/index.html @@ -0,0 +1,76 @@ +--- +title: Web 媒体技术 +slug: Web/媒体 +tags: + - 视频 + - 音频 +translation_of: Web/Media +--- +<div></div> + +<p><span class="seoSummary">逐年来，Web 呈现、创建并管理音频、视频和其他媒体的能力以不断增长的步伐发展。今日有着大量的 API、HTML 元素、DOM 界面和其他不仅仅限于完成这些任务，而是为了将媒体和其他技术联合使用以实现非凡事物的特性可供使用。这篇文章列出了可能对您掌握这些技术有帮助的多种 API 与其文档链接。</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="参考文献">参考文献</h2> + +<h3 id="HTML">HTML</h3> + +<p>这些文章含括了供媒体开发者使用的 HTML 特性。</p> + +<dl> + <dt>{{HTMLElement("audio")}}</dt> + <dd><code><audio></code> 元素用于在 Web 上下文中播放音频。这可以用于复杂媒体的隐性目标，亦或是用户控制播放音频的可见控制。可以从 JavaScript {{domxref("HTMLAudioElement")}} 对象中访问。</dd> + <dt>{{HTMLElement("video")}}</dt> + <dd><code><video></code> 元素是 Web 上下文中视频内容的端点。其可以简单地用于呈现视频，亦或是流式视频的目标。<code><video></code> 也可以用于连接媒体 API 和其他 HTML 与 DOM 技术，比如 {{HTMLElement("canvas")}} （用于抓取并控制框中内容)，例如，可以通过 JavaScript {{domxref("HTMLVideoElement")}} 对象访问。</dd> + <dt>{{HTMLElement("track")}}</dt> + <dd><code><track></code> 元素可以被放置在 {{HTMLElement("audio")}} 或者 {{HTMLElement("video")}} 元素内部，当在媒体播放时，以提供 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> 格式化字幕或标题轨道的参考。可以通过 JavaScript {{domxref("HTMLTrackElement")}} 对象访问。</dd> + <dt>{{HTMLElement("source")}}</dt> + <dd><code><source></code> 元素可以放在 {{HTMLElement("audio")}} 或者 {{HTMLElement("video")}} 元素内部，以指定当前显示的源媒体。可以使用多个不同格式、大小、分辨率的媒体源。可以从通过 JavaScript {{domxref("HTMLSourceElement")}} 对象中访问。</dd> +</dl> + +<h3 id="API">API</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/Media_Streams_API">媒体捕获和流媒体 API</a></dt> + <dd>使得串流、播放和控制本地和网络媒体成为可能的 API 参考文献。包括使用本地摄像头与麦克风来抓取视频、音频和静止图片。</dd> + <dt><a href="/en-US/docs/Web/API/Web_Audio_API">网络音频 API</a></dt> + <dd>网络音频 API 允许您生成、过滤并调节实时与预录的音频材料，并将其发送至 <code><audio></code> 元素、媒体流或磁盘中。</dd> + <dt><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></dt> + <dd>WebRTC （网页即时通信） 可以使互联网上任意两位用户在无需媒介的情况下中串流实时音频、视频和任意数据。</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="指南">指南</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Overview">Web 上的媒体技术概览</a></dt> + <dd>概览提供音频、视频播放与录制的开放网络技术和 API。若您不了解该使用哪种 API，这就是您的开始。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Accessibility">Web 设计中的媒体无障碍指南</a></dt> + <dd>在本指南中，我们将介绍 web 设计人员和开发人员创建的内容能让具有不同能力的人可以访问的方法。这个范围包括从 {{HTMLElement("image")}} 元素上简单地使用 {{htmlattrxref("alt", "img")}} 属性到为屏幕阅读者提供字幕标记的媒体。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats">Web 媒体类型和格式指南</a></dt> + <dd>关于文件类型和编解码器对于 web 上的图像、音频和视频媒体有效的指南。这包括使用何种格式处理什么内容的建议、最佳实践，以及如何提供后备方案和如何对媒体类型进行优先排序，还包括针对每个媒体容器和编解码器的一般浏览器支持信息。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide">媒体和 Web 音频 APIs 自动播放指南</a></dt> + <dd>出乎意料的自动播放媒体或音频对用户来说可能是一个不受欢迎的惊喜。虽然自动播放是有目的的，但应该谨慎使用。为了让用户控制这一点，许多浏览器现在都提供了自动播放阻塞的形式。本文是关于自动播放的指南，提供了一些技巧，告诉您何时以及如何使用它，以及如何使用浏览器优雅地处理自动播放阻塞。</dd> +</dl> + +<dl> +</dl> + +<h2 id="其他主题">其他主题</h2> + +<p>您可能会感兴趣的相关主题，这些技术可以用有趣的方式与媒体 API 共同使用。</p> + +<dl> + <dt><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></dt> + <dd>Canvas API 允许您在 {{HTMLElement("canvas")}} 上绘画、操纵并改变图像内容。这样可以与媒体以多种方式使用，包括设置 <code><canvas></code> 元素作为视频播放或摄像头捕获的终点以捕获或操纵视频帧。</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>WebGL 在已存在的 Canvas API 上提供了与 OpenGL ES 兼容的 API，使得在 Web 上制作强大的 3D 图像成为可能。通过一张画布，这可以用于为媒体内容添加 3D 图像。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API">WebVR</a></dt> + <dd>Web Virtual Reality API 支持虚拟现实 (VR) 设备，如 Oculus Rift 或 HTC Vive，使开发人员能够将用户的位置和移动转换为 3D 场景中的移动，然后在设备上显示。WebVR 有望逐渐被 WebXR 所取代，后者涵盖了更广泛的用例。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebXR_API">WebXR</a></dt> + <dd>WebXR 旨在最终取代 WebVR，是一种支持创建虚拟现实 (VR) 和增强现实 (AR) 内容的技术。混合现实内容可以显示在设备的屏幕上，或者是显示在目镜或耳机内。</dd> +</dl> +</div> +</div> |