html5 音频视频

tech2022-10-13 112

html5 音频视频

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下摘自Alexis Goldstein，Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3，第二版》一书。副本在世界各地的商店中都有出售，您也可以在这里以电子书的形式购买。

标记 (The Markup)

After that necessary business surrounding containers, codecs, and licensing issues, it’s time to examine the markup of the video element and its associated attributes.

在围绕容器，编解码器和许可问题进行了必要的业务之后，是时候检查video元素及其相关属性的标记了。

The simplest way to include HTML5 video in a web page is as follows:

在网页中包含HTML5视频的最简单方法如下：

As you’ve probably figured out from the preceding sections, this will only work in a limited number of browsers. It is, however, the minimum code required to have HTML5 video working to some extent. In a perfect world, it would work everywhere—the same way the img element works everywhere—but that’s a little way off just yet.

正如您可能从前面的部分中了解到的那样，这仅适用于有限数量的浏览器。但是，它是使HTML5视频在某种程度上正常工作所需的最低代码。在一个完美的世界中，它可以在任何地方使用img元素在任何地方都可以使用-但这还差一点。

Similar to the img element, the video element can also include width and height attributes:

与img元素类似， video元素也可以包含width和height属性：

Even though the dimensions can be set in the markup, they’ll have no effect on the aspect ratio of the video. For example, if the video in the previous example was actually 375×240 and the markup was as shown, the video would be centered vertically inside the 280-pixel space specified in the HTML. This stops the video from stretching unnecessarily and looking distorted.

即使可以在标记中设置尺寸，它们也不会影响视频的宽高比。例如，如果先前示例中的视频实际上是375×240，并且标记如图所示，则视频将在HTML中指定的280像素空间内垂直居中。这可以阻止视频不必要地拉伸并看起来失真。

The width and height attributes accept integers only, and their values are always in pixels. Naturally, these values can be overridden via scripting or CSS.

width和height属性仅接受整数，并且它们的值始终以像素为单位。当然，可以通过脚本或CSS覆盖这些值。

启用本机控件 (Enabling Native Controls)

No embedded video would be complete without giving the user the ability to play, pause, stop, seek through the video, or adjust the volume. HTML5’s video element includes a controls attribute that does just that:

没有使用户能够播放，暂停，停止，浏览视频或调节音量的功能，嵌入式视频是不完整的。 HTML5的video元素包含一个controls属性，它可以完成以下操作：

controls is a Boolean attribute, so no value is required. Its inclusion in the markup tells the browser to make the controls visible and accessible to the user.

controls是布尔属性，因此不需要任何值。它包含在标记中告诉浏览器使控件对用户可见并可以访问。

Each browser is responsible for the look of the built-in video controls. Figure 5.1 and Figure 5.2 show how these controls differ in appearance from browser to browser.

每个浏览器负责内置视频控件的外观。图5.1和图5.2显示了这些控件在外观上如何因浏览器而异。

Figure 5.1. The native video controls in Chrome

图5.1。 Chrome中的本机视频控件

Figure 5.2. … in Firefox

图5.2。 …在Firefox中

Figure 5.3. … in Internet Explorer

图5.3。 …在Internet Explorer中

Figure 5.4. … and in Opera

图5.4。 …和歌剧

autoplay属性 (The autoplay Attribute)

We’d love to omit reference to this particular attribute, since using it will be undesirable for the most part; however, there are cases where it can be appropriate. The Boolean autoplay attribute does exactly what its name implies: it tells the web page to play the video immediately as soon as possible.

我们很想忽略对这个特定属性的引用，因为在大多数情况下，使用它是不受欢迎的。但是，在某些情况下可能适当。布尔值autoplay属性确实具有其名称所隐含的含义：它告诉网页尽快播放视频。

Normally, this is a bad practice; most of us know too well how jarring it can be if a website starts playing video or audio as soon as it loads—especially if our speakers are turned up. Usability best practice dictates that sounds and movement on web pages should only be triggered when requested by the user. But this doesn’t mean that the autoplay attribute should never be used.

通常，这是一种不良做法；我们大多数人都非常清楚，如果一个网站在加载后立即开始播放视频或音频，尤其是如果我们的扬声器打开了，这会是多么令人震惊。可用性最佳实践规定，网页上的声音和移动仅应在用户请求时才触发。但这并不意味着不应该使用autoplay属性。

For example, if the page in question contains nothing but a video—that is, the user clicked on a link to a page for the sole purpose of viewing a specific video—it may be acceptable for it to play automatically, depending on the video’s size, surrounding content, viewing platform, and audience.

例如，如果所讨论的页面仅包含视频，即用户仅单击观看页面的链接只是为了观看特定视频，则可以接受自动播放，具体取决于视频的大小，周围的内容，观看平台和受众群体。

Here’s how you’d use this attribute:

使用此属性的方法如下：

警告：移动浏览器会忽略autoplay (Warning: Mobile Browsers Ignore autoplay)

Many, if not all, mobile browsers will ignore the autoplay attribute, so the video will always wait for the user to press the play button before starting. This is sensible, given that mobile bandwidth is often limited and expensive.

许多(如果不是全部)移动浏览器将忽略autoplay属性，因此视频将始终等待用户在开始播放之前按下播放按钮。鉴于移动带宽通常有限且昂贵，这是明智的。

loop属性 (The loop Attribute )

Another available attribute that you should think twice before using is the Boolean loop attribute. Again, it’s fairly self-explanatory: according to the spec, this attribute will tell the browser to “seek back to the start of the media resource upon reaching the end.”

在使用之前，您应该三思而后行的另一个可用属性是布尔loop属性。再次，这是不言自明的：根据规范，此属性将告诉浏览器“在到达终点时回头搜索媒体资源”。

So if you created a web page whose sole intention was to annoy its visitors, it might contain code such as this:

因此，如果您创建的网页的唯一目的是惹恼其访问者，则该网页可能包含以下代码：

Autoplay and an infinite loop! We’d just need to remove the native controls and we’d have a trifecta of worst practices.

自动播放和无限循环！我们只需要删除本机控件，就可以得到最差实践的三重效果。

Of course, as with autoplay, there are some situations where loop can be useful: a browser-based game in which ambient sounds and music should play continuously when the page is open, for example.

当然，与autoplay ，在某些情况下loop可能很有用：例如，基于浏览器的游戏，其中，打开页面时，环境声音和音乐应连续播放。

预载属性 (The preload Attribute)

In contrast to the two previously discussed attributes, preload is certainly handy in a number of cases. The preload attribute accepts one of three values:

与前面讨论的两个属性相比， preload在许多情况下当然很方便。 preload属性接受以下三个值之一：

auto: indicates that the video and its associated metadata will start loading before the video is played. This way, the browser can start playing the video more quickly when the user requests it.

auto:表示视频及其相关的元数据将在播放视频之前开始加载。这样，浏览器可以在用户请求时更快地开始播放视频。

none: indicates that the video shouldn’t load in the background before the user presses play.

none:表示在用户按下播放之前不应在后台加载视频。

metadata: works like none, except that any metadata associated with the video (for example, its dimensions, duration, and the like) can be preloaded, even though the video itself won’t be.

metadata:就像没有metadata:一样，除了与视频关联的任何元数据(例如，其尺寸，时长等)可以被预加载(即使视频本身不可以)之外，它的工作原理也不一样。

The preload attribute has no spec-defined default in cases where it’s omitted; each browser decides which of those three values should be the default state. This makes sense, as it allows desktop browsers on good connections to preload the video and/or metadata automatically, having no real adverse effect; yet it permits mobile browsers to default to either metadata ornone, as many mobile users have restricted bandwidth and will prefer to have the choice of whether or not to download the video.

如果省略了preload属性，则没有规范定义的默认值。每个浏览器都会确定这三个值中的哪个应为默认状态。这是有道理的，因为它允许处于良好连接状态的桌面浏览器自动预加载视频和/或元数据，而没有真正的负面影响；但它允许移动浏览器默认不使用metadata或none使用metadata ，因为许多移动用户的带宽受到限制，并且宁愿选择是否下载视频。

poster属性 (The poster Attribute)

When you attempt to view a video on the Web, usually a single frame of the video will be displayed in order to provide a teaser of its content. The poster attribute makes it easy to choose such a teaser. This attribute, similar to src, will point to an image file on the server by means of a URL.

当您尝试在Web上观看视频时，通常会显示视频的单个帧，以提供其内容的预告片。 poster属性使选择这样的预告片变得容易。与src类似，此属性将通过URL指向服务器上的图像文件。

Here’s how our video element would look with a poster attribute defined:

这是定义了poster属性的video元素的外观：

If the poster attribute is omitted, the default “poster” will be the first frame of the video, which displays as soon as it’s loaded.

如果忽略了poster属性，则默认的“海报”将是视频的第一帧，并在加载后立即显示。

muted属性 (The muted Attribute)

The muted attribute, a Boolean, controls the default state of the audio track for the video element.

muted属性(布尔值)控制video元素的音频轨道的默认状态。

Adding this attribute will cause the video’s audio track to default to muted, potentially overriding any user preferences. This will only control the default state of the element—a user interacting with the controls or JavaScript can change this.

添加此属性将导致视频的音轨默认为静音，从而可能会覆盖任何用户首选项。这将仅控制元素的默认状态-与控件或JavaScript交互的用户可以更改此状态。

Here it is added to our video element:

此处将其添加到我们的video元素中：

In previous versions of the HTML5 spec, there was an attribute called audio that took a value of muted. The new muted attribute replaces the audio attribute, which is now obsolete.

在HTML5规范的早期版本中，有一个名为audio的属性，该属性的值设置为muted 。新的muted属性将替换audio属性，该属性现在已过时。

添加对多种视频格式的支持 (Adding Support for Multiple Video Formats)

As we’ve discussed, there is currently no option to use a single container format to serve your video, even though that’s really the idea behind having the video element, and one which we hope will be realized in the near future. To include multiple video formats, the video element allows source elements to be defined so that you can allow each browser to display the video using the format of its choice. These elements serve the same function as the src attribute on the video element, so if you’re providing source elements, there’s no need to specify an src for your video element.

正如我们已经讨论过的，尽管实际上这是拥有video元素背后的想法，但目前尚没有使用单一容器格式来提供视频的选项，我们希望这种想法会在不久的将来实现。要包含多种视频格式， video元素允许定义source元素，以便您可以允许每个浏览器使用其选择的格式显示视频。这些元素的功能与video元素上的src属性相同，因此，如果要提供source元素，则无需为video元素指定src 。

To achieve full browser support, here’s how we’ll declare our source elements:

为了获得完整的浏览器支持，下面是我们声明source元素的方法：

The source element (oddly enough) takes an src attribute that specifies the location of the video file. It also accepts a type attribute that specifies the container format for the resource being requested. This latter attribute enables the browser to determine if it can play the file in question, thus preventing it from unnecessarily downloading an unsupported format.

source元素(奇怪的是)具有src属性，该属性指定视频文件的位置。它还接受type属性，该属性指定所请求资源的容器格式。后一个属性使浏览器能够确定它是否可以播放有问题的文件，从而防止其不必要地下载不受支持的格式。

The type attribute allows also a codec parameter to be specified, which defines the video and audio codecs for the requested file. Here’s how our source elements will look with the codecs specified:

type属性还允许指定编解码器参数，该参数定义了所请求文件的视频和音频编解码器。这是我们的source元素在指定编解码器下的外观：

You’ll notice that the syntax for the type attribute has been slightly modified to accommodate the container and codec values. The double quotes surrounding the values have changed to single quotes, and another set of nested double quotes is included specifically for the codecs.

您会注意到，对type属性的语法进行了一些修改，以适应容器和编解码器的值。围绕值的双引号已更改为单引号，并且专门为编解码器提供了另一套嵌套的双引号。

This can be a tad confusing at first glance, but in most cases you’ll just be copying and pasting those values once you have a set method for encoding the videos (which we’ll touch on later in this chapter). The important point is that you define the correct values for the specified file to ensure that the browser can determine which (if any) file it can play.

乍一看这可能有点令人困惑，但是在大多数情况下，一旦有了用于对视频进行编码的设置方法(我们将在本章稍后介绍)，就只会复制和粘贴这些值。重要的是要为指定的文件定义正确的值，以确保浏览器可以确定它可以播放哪个文件(如果有)。

注意：您需要哪种格式？ (Note: Which formats do you need?)

Depending on your website’s target audience, you may not require three source elements for full browser support. Support for video and audio codecs and containers is excellent, and you might only need one or two combinations. To help you decide which formats to use, be sure to check out the latest browser support info on Can I use.

取决于网站的目标受众，您可能不需要三个source元素即可获得完整的浏览器支持。对视频和音频编解码器和容器的支持非常出色，您可能只需要一个或两个组合。为了帮助您确定使用哪种格式，请确保查看有关“我可以使用”的最新浏览器支持信息。

源订单 (Source Order)

The three source elements are placed as children of the video element, and the browser being used to render the HTML will choose whichever container/codec format it recognizes—downloading only the resources it needs and ignoring the others. With our three file formats declared, our code will now look like this:

这三个source元素被放置为video元素的子元素，并且用于呈现HTML的浏览器将选择其能够识别的任何容器/编解码器格式-仅下载所需的资源，而忽略其他资源。声明了三种文件格式后，我们的代码将如下所示：

You’ll notice that our code is now without the src attribute on the video element. As mentioned, as well as being redundant, including it would override any video files defined in the source elements, so it’s necessary in this case to leave it out.

您会注意到，我们的代码现在在video元素上没有src属性。如前所述，它不仅是多余的，而且包括多余的内容将覆盖source元素中定义的所有视频文件，因此在这种情况下有必要将其省略。

不支持HTML5视频的浏览器怎么办？ (What about browsers without support for HTML5 video?)

The three source elements that we included inside our video element will cover all modern browsers, but we’re yet to ensure that our video will play for older browsers. As has been mentioned, you might still have a significant percentage of users utilizing browsers without native support for HTML5 video. Most of those users are on some version of Internet Explorer prior to version 9.

我们包含在video元素中的三个source元素将覆盖所有现代浏览器，但我们仍无法确保我们的视频能够在较旧的浏览器上播放。如前所述，您可能仍然有很大一部分用户在使用浏览器而没有对HTML5视频的原生支持。这些用户大多数都使用版本9之前的Internet Explorer版本。

In keeping with the principle of graceful degradation, thevideo element has been designed so that older browsers can access the video by some alternate means. Any browsers that fail to recognize the video element will simply ignore it, along with its source children. But if thevideo element contains content that the browser recognizes as valid HTML, it will read and display that content instead.

为了遵循正常降级的原则， video元素经过了设计，以便较旧的浏览器可以通过其他替代方法来访问视频。任何无法识别video元素的浏览器都将忽略该video元素及其source子级。但是，如果video元素包含浏览器识别为有效HTML的内容，它将读取并显示该内容。

What kind of content can we serve to those non-supportingbrowsers? According to Adobe, over one billion desktop users have the Flash Player plugin installed on their systems. And most of those instances of the Flash plugin are version 9 or later, which offer support for the MPEG-4 video container format. With this in mind, to allow Internet Explorer 8 and earlier (and other older browsers without support for HTML5 video) to play our video, we can declare an embedded Flash video to use as a fallback. Here’s the completed code for the video on The HTML5 Herald with the Flash fallback code included:

我们可以为那些不支持的浏览器提供什么样的内容？根据Adobe的说法，超过十亿的台式机用户在其系统上安装了Flash Player插件。而且大多数Flash插件实例为版本9或更高版本，它们支持MPEG-4视频容器格式。考虑到这一点，为了允许Internet Explorer 8和更早的版本(以及其他不支持HTML5视频的较旧的浏览器)播放我们的视频，我们可以声明一个嵌入式Flash视频作为后备。这是HTML5先驱报视频的完整代码，其中包括Flash后备代码：

We’ll skip going into all the details of how this newly added code works (this isn’t a Flash book, after all!), but here are a few points to note about this addition to our markup:

我们将跳过所有有关此新添加的代码的工作方式的详细信息(毕竟，这不是Flash书！)，但是在标记中需要注意以下几点：

The width and height attributes on the object element should be the same as those on the video element.

object元素上的width和height属性应与video元素上的width和height属性相同。

To play the file, we’re using the open-source JW Player by LongTail Video, which is free for non-commercial use, but you can use whichever video player you prefer.

要播放文件，我们使用LongTail Video的开源JW Player，该软件免费用于非商业用途，但您可以使用任何喜欢的视频播放器。

The Flash video code has a fallback of its own—an image file that displays if the code for the Flash video fails to work.

Flash视频代码具有自己的后备功能-一个图像文件，如果Flash视频的代码无法正常工作，则会显示该图像文件。 The fourth param element defines the file to be used (example.mp4). As has been mentioned, most instances of the Flash player now support video playback using the MPEG-4 container format, so there’s no need to encode another video format.

第四个param元素定义要使用的文件(example.mp4)。如前所述，大多数Flash播放器实例现在都支持使用MPEG-4容器格式的视频播放，因此无需编码其他视频格式。 HTML5-enabled browsers that support HTML5 video are instructed by the spec to ignore any content inside the video element that’s not a source tag, so the fallback is safe in all browsers.

规范指示支持HTML5视频的支持HTML5的浏览器忽略video元素中不是源标签的任何内容，因此后备在所有浏览器中都是安全的。

In addition to the Flash fallback content, you could also provide an optional download video link that allows the user to access a local copy of the video and view it at their leisure. This would ensure that nobody is left without a means to view the video.

除了Flash后备内容之外，您还可以提供一个可选的下载视频链接，该链接允许用户访问视频的本地副本并在闲暇时观看。这样可以确保没有人可以观看视频。

The last point to mention here is that, as is the case with the extra source elements, you may have no visitors from browsers without HTML5 video support on your website, or you might not be concerned about the small percentage using older browsers. In either of such cases, you could easily leave out the Flash fallback content and thus simplify the code.

最后要提到的一点是，与额外的source元素一样，您的网站上可能没有没有HTML5视频支持的浏览器访问者，或者您可能不担心使用旧版浏览器的访问者所占的比例很小。在这两种情况下，您都可以轻松地忽略Flash后备内容，从而简化代码。

翻译自: https://www.sitepoint.com/html5-video-and-audio-the-markup/

html5 音频视频

相关资源：jdk-8u281-windows-x64.exe

最新回复(0)