⑮HTML5 音视频标签的简单使用，状态标签，列表标签

ゞ浴缸里的玫瑰 2023-02-15 07:57 270阅读 0赞

### Html5 ###

*  音频 & 视频
 *  H5中对音视频的设计
 *   *  初次使用
     *  音视频兼容性写法
     *  音视频js相关属性
     *  音视频js相关函数
     *  js相关事件
 *  例：音阶导航
 *  状态标签
 *  列表标签
 *  注释标签
 *  标记标签

--------------------

***本人是个新手，写下博客用于自我复习、自我总结。  
如有错误之处，请各位大佬指出。  
学习资料来源于：尚硅谷***

--------------------

# 音频 & 视频 #

大家都有在网页中浏览视频的经历，但在Html5之前，对视频乃至音频都还没有一个标准。因此在网页中看到的视频，都要通过第三插件的方式嵌入，可能是QuickTime，也可能是 RealPlayer 或者 Flash。浏览器很好的整合了这些插件，从而让我们完全意识不到它们的存在。

在介绍Html5中的音视频标签前，我们需要了解一些概念：

1.  **容器**  
    大多数人会认为视频文件就是 .avi .mp4, 但事实上avi和mp4仅仅是容器的格式，  
    它只决定怎么将视频存储起来，而不关系存储的内容。有点类似于.zip。
    
    视频文件（视频容器）包含了**音频轨道**、**视频轨道**和其他一些**元数据**。  
    视频播放的时候，音频轨道和视频轨道是绑定在一起的。  
    元数据包含了视频的封面、标题、子标题、字幕等相关信息。
    
        主流的视频文件格式(容器格式)					主流的音频文件格式
         MPEG-4:       通常以.mp4为扩展名			MPEG-3    .mp3
         Flash视频:    通常以.flv为扩展名				Acc音频    .acc
         Ogg:	       通常以.ogv为扩展名		    Ogg音频	  .ogg
         WebM:	       通常以.webm为扩展名
         音频视频交错:  通常以.avi为扩展名
2.  **编解码器**  
    音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。  
    ![在这里插入图片描述][20200604193800623.png]  
    H.264： 别名 MPEG-4的第十部分,由MPEG研发并于2003年标准化。它的目的是支持一切设备，无论是低带宽低cpu，还是高带宽高cpu 或者是两者之间。要做到这一点，H.264标准被分成不同的几种配置。高配置使用了更多特性，这会导致在解码过程中更加消耗CPU，但视频文件本身会更小，视频效果也更好 。
    
    当然有一些编解码器受专利的保护，有一些则是免费的，例如Ogg的Vorbis音频编解码器。Ogg的Theora视频编解码器也是可以免费使用的。而想使用H.264的话就需要支付相关的费用了。
    
    现在的视频编解码器会使用各种技巧减少从一帧到另一帧过程中传递的信息数量，它们不会存储每一帧的所有信息，而只是存储两帧之间的差异信息。
    
    编码器也分有损和无损，无损视频文件一般太大，在网页中没有优势，所以通常选择去研究有损编解码器。有损编解码器中，信息在编码过程中丢失是无法避免的，反复的对视频编码会导致其画面不均匀。
3.  浏览器对于容器和编解码器**支持的情况**  
    ![在这里插入图片描述][202006041942511.png]  
    目前还没有一种编解码和容器的组合能应用于所有的浏览器中。
4.  处理视频的一个流程  
    1.制作一个Ogg容器中使用Theora视频和Vorbis音频的版本  
    2.制作另外一个版本，使用WebM视频容器（VP8 + Vorbis）  
    3.再制作一个版本，使用MP4视频容器，并使用H.264基本配置的视频和ACC低配的音频  
    4.链接上面3个文件到同一个video元素，并向后兼容基于Flash的视频播放器
5.  格式转化
    
        用 FFmpeg 制作MP4 视频
         	ffmpeg -i test.mp4 -c:v libx264 -s 1280x720 -b:v 1500k -profile:v high -level 3.1 -c:a aac -ac 2 -b:a 160k -movflags faststart OUTPUT.mp4
         
         用 FFmpeg 制作 WebM 视频
         	ffmpeg -i test.mp4 -c:v libvpx -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.webm
         
         FFmpeg 制作 Ogg 视频
         	ffmpeg -i test.mp4 -c:v libtheora -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogv
         
         FFmpeg 制作Mp3音频
         	ffmpeg -i test.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3
         	
         FFmpeg 制作Ogg音频
         	ffmpeg -i test.mp3 -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogg
         
         FFmpeg 制作ACC音频	
         	ffmpeg -i test.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac

--------------------

# H5中对音视频的设计 #

--------------------

## 初次使用 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<video src="resource/video/test.mp4" controls="controls" width="500" height="500" ></video>
    		<audio src="resource/audio/test.mp3" controls ></audio>
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<video src="resource/video/test.mp4" autoplay muted controls width="500" height="500" poster="resource/img/xfz.png"></video>
    		<audio src="resource/audio/test.mp3" autoplay loop "></audio>
    	</body>
    </html>

--------------------

`<video>`:Html5提供的**播放视频**的标签。  
标签的属性：  
`src`:要嵌到页面的视频的URL  
`controls`:显示或隐藏用户控制界面  
`width` :视频显示区域的宽度，单位是CSS像素  
`height` :视频展示区域的高度，单位是CSS像素  
`poster` :一个海报帧的URL，用于在用户播放或者跳帧之前展示  
`autoplay` : 媒体是否自动播放  
`loop` : 媒体是否循环播放  
`muted` : 是否静音  
`preload` : 该属性旨在告诉浏览器，作者认为达到最佳的用户体验的方式是什么  
`none`: 提示，作者认为用户不需要查看该视频，服务器也想要最小化访问流量； 换句话说就是提示浏览器该视频不需要缓存。  
`metadata`: 提示，尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。  
`auto`: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。  
`空字符串`：也就代指 auto 值。

`<audio>`:Html5提供的**播放音频**的标签。  
标签的属性：  
`src`:要嵌到页面的音频的URL  
`controls`:显示或隐藏用户控制界面  
`autoplay`: 媒体是否自动播放  
`loop` : 媒体是否循环播放  
`muted` : 是否静音  
`preload` : 该属性旨在告诉浏览器，作者认为达到最佳的用户体验的方式是什么

--------------------

## 音视频兼容性写法 ##

`<source>`  
视频：  
type=‘video/webm; codecs=“vp8, vorbis”’  
type=‘video/ogg; codecs=“theora, vorbis”’  
type=‘video/mp4; codecs=“avc1.42E01E, mp4a.40.2”’

音频：  
type=‘audio/ogg; codecs=“vorbis”’  
type=‘audio/aac; codecs=“aac”’  
type=‘audio/mpeg’

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<video controls width="300" height="300">
    			<source src="resource/video/OUTPUT.mp4" type="video/mp4"></source>
    			<source src="resource/video/OUTPUT.ogv" type="video/ogg"></source>
    			<source src="resource/video/OUTPUT.webm" type="video/webm"></source>
    			当前浏览器不支持 video直接播放，点击这里下载视频： <a href="resource/video/OUTPUT.mp4">下载视频</a>
    		</video>
    
    		<audio controls >
    			<source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'></source>
    			<source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'></source>
    			<source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'></source>
    			当前浏览器不支持 video直接播放，点击这里下载音频： <a href="resource/audio/OUTPUT.mp3">下载音频</a>
    		</audio>
    
    	</body>
    </html>

--------------------

## 音视频js相关属性 ##

duration    :  媒体总时间(只读)
    currentTime :  开始播放到现在所用的时间(可读写)
    muted       :  是否静音(可读写,相比于volume优先级要高)
    volume      :  0.0-1.0的音量相对值(可读写)
    paused      :  媒体是否暂停(只读)
    ended       :  媒体是否播放完毕(只读)
    error       :  媒体发生错误的时候，返回错误代码 (只读)
    currentSrc  :  以字符串的形式返回媒体地址(只读)

以上为音视频都有的属性，以下为视频独有的部分属性:

poster  :                   视频播放前的预览图片(读写)
    width、height  :            设置视频的尺寸(读写)
    videoWidth、 videoHeight  : 视频的实际尺寸(只读)

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<video src="resource/video/test.mp4" controls width="500" height="500" ></video>
    		<audio src="resource/audio/test.mp3" controls ></audio>
    	</body>
    	<script type="text/javascript"> window.onload=function(){ var video = document.querySelector("video"); var audio = document.querySelector("audio"); /*video.addEventListener("loadeddata",function(){ console.log(video.duration); })*/ /*setTimeout(function(){ console.log(video.duration); console.log(audio.duration); },500)*/ /*setInterval(function(){ console.log(video.currentTime); console.log(audio.currentTime); },1000)*/ //muted和volume之间不会同步 //muted的优先级比较高 /* video.muted=true; audio.muted=true; video.volume=0; audio.volume=0; console.log(video.muted) console.log(audio.muted) console.log(video.volume) console.log(audio.volume) */ /*console.log(video.paused) console.log(audio.paused) console.log(video.ended) console.log(audio.ended) console.log(video.error) console.log(audio.error) console.log(video.currentSrc) console.log(audio.currentSrc)*/ video.poster="resource/img/csdn.png" console.log(video.poster) console.log(video.width) console.log(video.height) video.addEventListener("loadeddata",function(){ console.log(video.videoWidth) console.log(video.videoHeight) }) } </script>
    </html>

--------------------

## 音视频js相关函数 ##

play()  :  媒体播放
    pause()  :  媒体暂停
    load()  :  重新加载媒体

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<video controls width="500" height="500" >
    			<source src="resource/video/test.mp4"></source>
    		</video>
    		<audio controls >
    			<source src="resource/audio/test.mp3"></source>
    		</audio>
    	</body>
    	<script type="text/javascript"> window.onload=function(){ var video = document.querySelector("video"); var audio = document.querySelector("audio"); var source = document.querySelectorAll("source"); source[0].src="xxx"; source[1].src="xxx"; // 重新加载 video.load(); audio.load(); } </script>
    </html>

--------------------

## js相关事件 ##

事件比较多，在这里也就不逐个展示了，大家有需要可以自己尝试。  
添加事件模板：

video.addEventListener("loadeddata",function(){ 
    	console.log(video.videoWidth)
    	console.log(video.videoHeight)
    })

**视频**:

abort	 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
    	canplay	在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
    	canplaythrough	在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
    	durationchange	元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
    	emptied	媒体被清空（初始化）时触发。
    	ended	播放结束时触发。
    	error	在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
    	loadeddata	媒体的第一帧已经加载完毕。
    	loadedmetadata	媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
    	loadstart	在媒体开始加载时触发。
    	mozaudioavailable	当音频数据缓存并交给音频层处理时
    	pause	播放暂停时触发。
    	play	在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
    	playing	在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
    	progress	告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
    	ratechange	在回放速率变化时触发。
    	seeked	在跳跃操作完成时触发。
    	seeking	在跳跃操作开始时触发。
    	stalled	在尝试获取媒体数据，但数据不可用时触发。
    	suspend	在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
    	timeupdate	元素的currentTime属性表示的时间已经改变。
    	volumechange	在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。
    	waiting	在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发

**音频**:

--------------------

# 例：音阶导航 #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } body{ background: pink; } a{ text-decoration: none; display: block; color: black; } ul{ list-style: none; margin: 200px auto; width: 908px; height: 38px; border: 1px solid; overflow: hidden; } ul>li{ float: left; height: 100%; width: 100px; text-align: center; line-height: 38px; } ul>li:not(:last-child){ border-right:1px solid ; } ul>li>div.down{ height: 100%; background: yellow; transition:.5s ; } ul>li:hover .down{ transform: translateY(-38px); } </style>
    	</head>
    	<body>
    		<div id="wrap">
    			<audio></audio>
    			<ul class="nav">
    				<li data-flag="a">
    					<a href="javascript:;">我的主页</a>
    					<div class="down"></div>
    				</li>
    				<li >
    					<a href="javascript:;">新闻头条</a>
    					<div class="down"></div>
    				</li>
    				<li data-flag="b">
    					<a href="javascript:;">电视剧</a>
    					<div class="down"></div>
    				</li>
    				<li >
    					<a href="javascript:;">最新电影</a>
    					<div class="down"></div>
    				</li>
    				<li data-flag="c">
    					<a href="javascript:;">腿长1米8</a>
    					<div class="down"></div>
    				</li>
    				<li>
    					<a href="javascript:;">小说大全</a>
    					<div class="down"></div>
    				</li>
    				<li data-flag="d">
    					<a href="javascript:;">旅游度假</a>
    					<div class="down"></div>
    				</li>
    				<li>
    					<a href="javascript:;">正品团购</a>
    					<div class="down"></div>
    				</li>
    				<li data-flag="e">
    					<a href="javascript:;">今日团购</a>
    					<div class="down"></div>
    				</li>
    			</ul>
    		</div>
    	</body>
    	<script type="text/javascript"> var liNodes = document.querySelectorAll(".nav>li"); var audio = document.querySelector("audio"); for(var i = 0;i < liNodes.length; i++){ liNodes[i].addEventListener("mouseenter",function(){ var flag = this.dataset.flag==undefined? this.dataset.flag: this.getAttribute("data-flag"); if(flag){ audio.src="http://s8.qhimg.com/share/audio/piano1/"+flag+"4.mp3"; audio.play(); } }) } </script>
    </html>

--------------------

# 状态标签 #

`meter`:用来显示已知范围的标量值或者分数值。

value:当前的数值。
    	min:值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为0
    	max:值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为1
    	low:定义了低值区间的上限值,如果设置了，它必须比最小值属性大，并且不能超过high值和最大值。未设置或者比最小值还要小时，其值即为最小值。
    	high:定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于low值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。
    	optimum:这个属性用来指示最优/最佳取值。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<meter value="60" min="20" max="100"></meter>
    		<meter value="80" min="20" max="100" low="40" high="60"></meter>
    		<meter value="30" min="20" max="100" low="40" high="60" optimum="80"></meter>
    	</body>
    </html>

![在这里插入图片描述][20200604214301635.png]  
`progress`:用来显示一项任务的完成进度

max:该属性描述了这个progress元素所表示的任务一共需要完成多少工作.
    	value：该属性用来指定该进度条已完成的工作量.
    			如果没有value属性,则该进度条的进度为"不确定",
    			也就是说,进度条不会显示任何进度,你无法估计当前的工作会在何时完成

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<progress value="50" max="100"></progress>
    		<progress max="100"></progress>
    	</body>
    </html>

![在这里插入图片描述][2020060421473598.png]

--------------------

# 列表标签 #

`datalist`:datalist会包含一组option元素，这些元素表示其表单控件的可选值。它的id必须要和input中的list一致

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css"> *{ margin: 0; padding: 0; } input::-webkit-input-placeholder{ color: pink; } </style>
    	</head>
    	<body>
    		<input type="text" placeholder="你最喜欢的女明星是？" list="zdy"></input>
    		<datalist id="zdy">
    			<option value="1">10岁的周冬雨</option>
    			<option value="2">20岁的周冬雨</option>
    			<option value="3">30岁的周冬雨</option>
    			<option value="4">40岁的周冬雨</option>
    		</datalist>
    	</body>
    </html>

![在这里插入图片描述][20200604215707900.png]  
`details`: 一个ui小部件，用户可以从其中检索附加信息。open属性来控制附加信息的显示与隐藏  
`summary`:用作 一个`<details>`元素的一个内容摘要（标题）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css"> *{ margin: 0; padding: 0; } </style>
    	</head>
    	<body>
    		<details>
    			<summary>csdn</summary>
    			<p>csdn1</p>
    			<p>csdn2</p>
    			<p>csdn3</p>
    		</details>
    	</body>
    </html>

![在这里插入图片描述][20200604215841678.png]

--------------------

# 注释标签 #

`ruby` `rt`: 展示文字注音或字符注释。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<span><ruby>你<rt>ni</rt>好</ruby></span>
    	</body>
    </html>

![在这里插入图片描述][20200604220201670.png]

--------------------

# 标记标签 #

`mark`:着重

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<span>你<mark>好</mark>CSDN</span>
    	</body>
    </html>

![在这里插入图片描述][20200604220308944.png]

--------------------

[20200604193800623.png]: https://img-blog.csdnimg.cn/20200604193800623.png
[202006041942511.png]: https://img-blog.csdnimg.cn/202006041942511.png
[20200604214301635.png]: https://img-blog.csdnimg.cn/20200604214301635.png
[2020060421473598.png]: https://img-blog.csdnimg.cn/2020060421473598.png
[20200604215707900.png]: https://img-blog.csdnimg.cn/20200604215707900.png
[20200604215841678.png]: https://img-blog.csdnimg.cn/20200604215841678.png
[20200604220201670.png]: https://img-blog.csdnimg.cn/20200604220201670.png
[20200604220308944.png]: https://img-blog.csdnimg.cn/20200604220308944.png