html5视频_HTML5视频-CSDN博客

html5视频

HTML5 video has the same syntax as HTML5 audio, but tends to have greater engagement with visitors.

HTML5视频的语法与HTML5音频的语法相同，但与访问者的互动度更高。

视频元素 (The video Element)

Today, every modern graphical browser supports the .mp4 (MPEG-4) codec, so that should be the minimal standard offered by your site:

如今，每种现代图形浏览器都支持.mp4(MPEG-4)编解码器，因此这应该是您的站点提供的最低标准：

<video src="drone.mp4" controls> 
</video>

The video will appear at its native resolution and size by default.

视频将默认以其原始分辨率和大小显示。

Like the <audio> element, the controls attribute will produce “built in” UI elements that are specific to the browser, version, platform and operating system. You can make your own UI elements, but they should be carefully considered, and require JavaScript. Also like <audio>, <video> supports the preload, loop and autoplay attributes. With the possible exception of background video, autoplay and loop should be avoided. Most modern browsers will only support autoplay if the muted attribute is also applied:

与<audio>元素一样， controls属性将生成特定于浏览器，版本，平台和操作系统的“内置” UI元素。您可以创建自己的UI元素，但是应该仔细考虑它们，并且需要JavaScript 。与<audio> ， <video>支持preload ， loop和autoplay属性。除了背景视频以外， 应避免自动播放和循环 。 如果同时应用了muted属性，大多数现代浏览器将仅支持自动播放：

<video src="drone.mp4" controls autoplay muted> 
</video>

The video element will automatically show the video’s first frame as the default placeholder. Since the first frame is often black, this can lead to large, unappealing black rectangles appearing on your page.

video元素将自动将视频的第一帧显示为默认占位符。由于第一帧通常是黑色的，因此可能会导致页面上出现大的，不吸引人的黑色矩形。

The solution is to use the poster attribute, directed to an image (usually a JPEG screenshot of the video at some interesting point) in the same aspect ratio as the video:

解决方案是使用poster属性，该属性以与视频相同的长宽比定向到图像(通常是在某个有趣点的视频的JPEG屏幕截图)：

<video src="drone.mp4" controls poster="aerial.jpg"> 
</video>

The poster attribute works best on videos that are not set to autoplay.

poster属性在未设置为autoplay视频上效果最佳。

预加载和播放 (Preloading and playsinline)

预载 (preload)

The preload attribute provides “hints” as to how much of the video should be “spooled up” by the browser. It should be emphasized that these are suggestions: the browser may decide not to follow the hint due to network conditions, battery level, and other factors.

preload属性提供有关浏览器应“缓冲”多少视频的“提示”。应该强调的是这些建议：由于网络条件，电池电量和其他因素，浏览器可能决定不遵循提示。

The preload attribute can take three values: none, metadata and auto.

preload属性可以采用三个值：无，元数据和自动。

none: the video should not be preloaded at all.
none ：根本不应该预加载视频。
metadata: only information such as the video’s length should be prefetched; video frames may or may not be preloaded.
metadata ：仅应提取视频长度之类的信息；视频帧可能会也可能不会预加载。
auto: downloading the entire video before the user presses play would be ideal (but again, the browser may not follow the suggestion).
auto ：在用户按下播放之前下载整个视频是理想的选择(但同样，浏览器可能不遵循建议)。

Using the preload attribute may be thought of as taking a bet on user’s interaction with the video. A value of auto (or a blank entry, i.e. just the attribute name, or preload="") should be used if you believe that it’s very likely that the user will play the video. preload="metadata" should be used if the user’s decision to play may be based on the length of the video.

可以认为使用preload属性可以押注用户与视频的互动 。如果您认为用户很有可能会播放视频，则应使用auto值(或空白条目，即仅属性名称或preload="" )。如果用户的播放决定可能基于视频的长度，则应使用preload="metadata" 。

内线 (playsinline)

By default, pressing play on a video on an iOS will maximize the video to fullscreen size, obscuring the page content when it plays.

默认情况下，在iOS上按下视频播放按钮会将视频最大化到全屏尺寸，从而在播放时遮盖页面内容。

In most cases, this will improve the visibility of the video content for the user. But in some cases - such as using the video for a background - you don’t want this behaviour.

在大多数情况下，这将为用户提高视频内容的可见性。但是在某些情况下(例如将视频用作背景) ，您不希望这种行为。

The playsinline attribute solves this:

playsinline属性可解决此问题：

<video src="drone.mp4" 
	preload playsinline muted autoplay> 
</video>

Such a video will play on the device in its original layout, without obscuring the content of the page.

这样的视频将以其原始布局在设备上播放，而不会模糊页面的内容。

流畅的视频 (Fluid video)

Video should resize just as images do on a web page, using the same CSS technique:

使用相同CSS技术，视频应该像网页上的图像一样调整大小：

video { 
    width: 100%; 
    height: auto; 
}

As with images, the width property refers to the width of the video relative to its container, assuming standard static layout.

与图像一样， width属性是指视频相对于其容器的宽度，假设采用标准静态布局。

One of the benefits of hosting your own video is that any CSS can be applied to it. Feeling in a film noir mood, and want your videos to be black and white? No need to edit and re-export the video; just apply a CSS filter to it:

托管自己的视频的好处之一是可以将任何CSS应用于该视频。感觉像电影中的黑色电影，想要您的视频是黑白的吗？无需编辑和重新导出视频；只需对其应用CSS过滤器：

video { 
    filter: grayscale(100%) 
}

支持其他格式 (Supporting Other Formats)

While MP4 has universal support, it is almost two decades old, and not terribly efficient compared to more recent alternatives. You may find that converting the video to WebM format yields significant savings in file size and bandwidth costs.

尽管MP4具有普遍支持，但它已有近二十年的历史了，与最近的替代产品相比效率不高。您可能会发现，将视频转换为WebM格式可大大节省文件大小和带宽成本。

Unfortunately, WebM is not yet universally supported. In that case, you should provide the webm version first as a source, using mp4 as a fallback:

不幸的是，WebM尚未得到普遍支持。在这种情况下，您应该首先提供webm版本作为源，并使用mp4作为后备：

<video controls> 
    <source src="drone.webm"> 
    <source src="drone.mp4"> 
</video>

Note that these are not two different pieces of video content, or a playlist; rather, they are the same video, provided in two different codecs. Browsers that support webm will preferentially download the (smaller, faster to load) .webm file; browsers that do not will load the .mp4 version. Attributes in the video tag will apply to both versions.

请注意，这些不是两个不同的视频内容，也不是播放列表。相反，它们是同一视频，但提供了两种不同的编解码器。支持webm的浏览器将优先下载(更小，加载速度更快).webm文件。不会加载.mp4版本的浏览器。 video标签中的属性将同时应用于两个版本。

You will occasionally see code that includes the MIME type of the video:

您偶尔会看到包含视频的MIME类型的代码：

<video controls> 
    <source src="drone.webm" type="video/webm"> 
    <source src="drone.mp4" type="video/mp4"> 
</video>

Often this is combined with advice to add the following to your site’s .htaccess file:

通常，这与建议结合使用，以将以下内容添加到您站点的.htaccess文件中：

AddType video/webm .webm 
AddType video/mp4 .mp4

These steps provided an extra hint to the web hosting server as to what kind of content it was sending to the browser, and helped to ensure it was sent correctly. Today, most servers automatically recognize the video formats, and such steps are unnecessary, although including them doesn’t do any harm in the vast majority of cases.

这些步骤向Web托管服务器提供了有关向浏览器发送哪种内容的额外提示，并有助于确保正确发送了内容。如今，大多数服务器会自动识别视频格式，尽管在大多数情况下包括它们都不会造成任何危害，但无需采取此类步骤。