关注我们

HTML5 - 音频和视频

HTML5 <audio>和<video>标签使将媒体添加到网站变得简单。您需要设置src属性以标识媒体源，包括controls属性，以便可以播放和暂停媒体。

嵌入视频

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

<video src="foo.mp4"  width="300" height="200" controls>
   Your browser does not support the <video> element.   
</video>

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

Ogg - 具有Thedora视频编解码器和Vorbis音频编解码器的Ogg文件。
mpeg4 - 具有H.264视频编解码器和AAC音频编解码器的MPEG4文件。

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

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width="300" height="200" controls autoplay>
         <source src="/html5/foo.ogg" type ="video/ogg" />
         <source src="/html5/foo.mp4" type="video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

这将产生以下输出-

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

无涯教程网

Sr.No.	Attribute & Remark
1	autoplay 如果指定了此布尔属性，则视频将自动开始播放，而不会停止完成加载数据。
2	autobuffer 如果指定了此布尔属性，则即使未将视频设置为自动播放，视频也将自动开始缓冲。
3	controls 如果存在此属性，它将允许用户控制视频播放，包括音量，搜索和暂停/继续播放。
4	height 该属性指定视频显示区域的高度，以CSS像素为单位。
5	loop 如果指定了此布尔属性，则视频将在到达终点后自动返回起点。
6	preload 此属性指定视频将在页面加载时加载，并准备运行。忽略是否存在自动播放。
7	poster 这是要显示的图像的URL，直到用户播放或搜索为止。
8	src 嵌入视频的URL。这是可选的；您可以改用video块中的<source>元素来指定要嵌入的视频。
9	width 此属性指定视频显示区域的宽度，以CSS像素为单位。

嵌入音频

HTML5支持<audio>标签，该标签用于将声音内容嵌入HTML或XHTML文档中，如下所示。

<audio src="foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

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

您可以使用<source/>; 标签以指定媒体以及媒体类型和许多其他属性。音频元素允许多个源元素，并且浏览器将使用第一种公认的格式-

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src="/html5/audio.ogg" type="audio/ogg" />
         <source src="/html5/audio.wav" type="audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

这将产生以下输出-

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

链接：https://www.learnfk.comhttps://www.learnfk.com/html5/html5-audio-video.html

来源：LearnFk无涯教程网

Sr.No.	Attribute & Remark
1	autoplay 如果指定了此布尔属性，则音频将自动开始播放，而不会停止完成加载数据。
2	autobuffer 如果指定了此布尔属性，则即使未将其设置为自动播放，音频也将自动开始缓冲。
3	controls 如果存在此属性，它将允许用户控制音频播放，包括音量，搜索和暂停/继续播放。
4	loop 如果指定了此布尔属性，则音频将在到达终点后自动返回起点。
5	preload 此属性指定音频将在页面加载时加载，并准备运行。忽略是否存在自动播放。
6	src 要嵌入的音频的URL。这是可选的；您可以改用video块中的<source>元素来指定要嵌入的视频。

媒体事件

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

S.No.	Event & Remark
1	abort 播放中止时将生成此事件。
2	canplay 当有足够的可用数据可以播放媒体时，将生成此事件。
3	ended 播放完成时生成此事件。
4	error 发生错误时将生成此事件。
5	loadeddata 当媒体的第一帧完成加载时，将生成此事件。
6	loadstart 开始加载媒体时会生成此事件。
7	pause 暂停播放时会生成此事件。
8	play 回放开始或恢复时会生成此事件。
9	progress 定期生成此事件，以通知媒体下载进度。
10	ratechange 播放速度更改时会生成此事件。
11	seeked 查找操作完成时，将生成此事件。
12	seeking 查找操作开始时，将生成此事件。
13	suspend 暂停媒体加载时会生成此事件。
14	volumechange 音量改变时会生成此事件。
15	waiting 当请求的操作(如播放)被延迟以等待另一个操作(如搜寻)完成之前，将生成此事件。

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

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type="text/javascript">
         function PlayVideo() {
            var v=document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width="300" height="200" src="/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type="button" onclick="PlayVideo();" value="Play"/>
      </form>
      
   </body>
</html>

这将产生以下输出-

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

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

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

MySQL实战45讲 -〔林晓斌〕

重学前端 -〔程劭非（winter）〕

零基础学Java -〔臧萌〕

MongoDB高手课 -〔唐建法（TJ）〕

编译原理实战课 -〔宫文学〕

快手 · 移动端音视频开发实战 -〔展晓凯〕

计算机基础实战课 -〔彭东〕

Go进阶 · 分布式爬虫实战 -〔郑建勋〕

结构执行力 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)

HTML5 - 音频和视频

嵌入视频

视频属性

嵌入音频

音频属性

媒体事件

配置媒体类型