HTML5-音频和视频 - 芒果文档

📌 相关文章

📜 HTML5-音频和视频

📅 最后修改于: 2020-10-23 06:18:13 🧑 作者: Mango

HTML5功能包括不需要Flash的本地音频和视频支持。

HTML5

嵌入视频

这是在您的网页中嵌入视频文件的最简单形式-

当前的HTML5规范草案未指定浏览器应在video标签中支持哪些视频格式。但最常用的视频格式是-

您可以使用标记指定媒体以及媒体类型和许多其他属性。视频元素允许多个源元素，浏览器将使用第一种公认的格式-

这将产生以下结果-

HTML5视频标签可以具有许多属性，以控制控件的外观和感觉以及各种功能-

Sr.No.	Attribute & Description
1	autoplay This Boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
2	autobuffer This Boolean attribute if specified, the video will automatically begin buffering even if it’s not set to automatically play.
3	controls If this attribute is present, it will allow the user to control video playback, including volume, seeking, and pause/resume playback.
4	height This attribute specifies the height of the video’s display area, in CSS pixels.
5	loop This Boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end.
6	preload This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if autoplay is present.
7	poster This is a URL of an image to show until the user plays or seeks.
8	src The URL of the video to embed. This is optional; you may instead use the element within the video block to specify the video to embed.
9	width This attribute specifies the width of the video’s display area, in CSS pixels.

HTML5支持

当前的HTML5规范草案未指定浏览器应在音频标签中支持哪些音频格式。但最常用的音频格式是ogg，mp3和wav 。

您可以使用

这将产生以下结果-

HTML5音频标签可以具有许多属性来控制外观和控件的各种功能-

Sr.No.	Attribute & Description
1	autoplay This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
2	autobuffer This Boolean attribute if specified, the audio will automatically begin buffering even if it’s not set to automatically play.
3	controls If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
4	loop This Boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end.
5	preload This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
6	src The URL of the audio to embed. This is optional; you may instead use the element within the video block to specify the video to embed.

HTML5音频和视频标签可以具有许多属性，以使用JavaScript控制控件的各种功能-

S.No.	Event & Description
1	abort This event is generated when playback is aborted.
2	canplay This event is generated when enough data is available that the media can be played.
3	ended This event is generated when playback completes.
4	error This event is generated when an error occurs.
5	loadeddata This event is generated when the first frame of the media has finished loading.
6	loadstart This event is generated when loading of the media begins.
7	pause This event is generated when playback is paused.
8	play This event is generated when playback starts or resumes.
9	progress This event is generated periodically to inform the progress of the downloading the media.
10	ratechange This event is generated when the playback speed changes.
11	seeked This event is generated when a seek operation completes.
12	seeking This event is generated when a seek operation begins.
13	suspend This event is generated when loading of the media is suspended.
14	volumechange This event is generated when the audio volume changes.
15	waiting This event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

以下是允许播放给定视频的示例-

这将产生以下结果-

默认情况下，大多数服务器不为Ogg或mp4媒体提供正确的MIME类型，因此您可能需要为此添加适当的配置。

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4