📜  HTML5-音频和视频

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


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

HTML5

嵌入视频

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

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

  • 奥格– OGG文件与Thedora视频编解码器和Vorbis音频编解码器。

  • mpeg4-带有H.264视频编解码器和AAC音频编解码器的MPEG4文件。

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

这将产生以下结果-

视频属性规范

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,mp3wav

您可以使用

这将产生以下结果-

音频属性规范

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