H5音频和视频

Posted 2020-06-30

使用媒体标签最大的缺点在于缺少编解码器的支持
一、浏览器支持性检测
检测浏览器是否支持audio元素或video元素最简单的方式就是用脚本动态创建它，然后检测特定函数是否存在

var hasVideo=!!(document.createElement(‘video‘).canPlayType);

这段脚本会动态创建一个video元素，然后检查canPlayType()函数是否存在。通过"!!"运算符将结果转换成布尔值，反映出是否创建成功，如果不成功的话就需要出发另一套脚本向页面中引入媒体标签，例如Flash等其他播放技术了。

也可以在audio和video元素中放入备选内容，如果浏览器不支持，他们就会显示在内容元素对应的位置，可以把以Flash插件方式播放同样的视频代码作为备选内容。

将Flash作为后备的video元素

<video src="video.webm" controls>
  <object data="videoplayer.swf" type="application/x-shockwave-flash">
      <param name="movie" value="video.swf"/>
   </object>
   Your browser does not support html5 video.
</video> 

如果只是想让不支持的浏览器显示一行内容就简单了

<video src="videw.webm" controls>
    Your browser does not support HTML5 video.
</video>

二、媒体元素

HTML5中audio和video元素有很多相同之处，他们都支持播放、暂停、静音和消除静音、加载等。

controls告诉浏览器显示通用的用户控制，包括开始、停止、跳播以及音量控制，如果不指定controls，用户将无法播放网页上的音乐。

使用source元素，如果浏览器不支持特定的编解码器，那么就需要用到这个元素，他包含多个来源

<video src="" controls>
    <source src="bach_air.ogg"> 
    <source src="bach_air.mp3">
    an audio clip from johann sebastion bach.
</video>

浏览器会按照声明顺序判断，如果支持的不止一种，那么浏览器会选择支持的第一个来源。（按照用户体验由高到底或浏览器）

 自动播放--autoplay

ios不支持，会自动阻止

如果内置的控件不适应用户界面的布局，或者希望使用默认控件中没有的条件或者动作来控制音频或视频，可以借助内置的javascript函数和特性。

另外audio比vidio多了一些额外的特性

1、poster  在视频加载完成之前，代表视频内容的图片的URL地址，可以想想一下“电影海报”。该特性不仅可读，而且可以修改，一边更换图片

<video controls poster="/images/w3school.gif">   //类似于缩略图
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video> 

2、width和height   读取或设置显示的尺寸。如果与视频大小不匹配，可能导致居中，上下或者左右出现黑色区域。

具有指定宽度和高度的视频
<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

3、videoWidth

三、javascript函数和特性

方法：

load()   加载音频、视频文件，为播放做准备，通常情况下不必调用，除非是动态生成的元素，用来在播放前预加载。

play()  加载并播放音频、视频文件。

pause()  暂停

canPlayType(type)  方法浏览器是否能播放指定的音频/视频类型。

canPlayType(type)有一个特殊的用途，向动态创建的video元素中传入某段视频的MIME类型后，判断浏览器是否支持播放该类型的视频，而无需在浏览器窗口中显示任何内容

var hasVideo=!!(document.createElement(‘video‘).canPlayType(‘fooType‘));   返回true或false

canPlayType() 方法可返回下列值之一：
●"probably" - 浏览器最可能支持该音频/视频类型
●"maybe" - 浏览器也许支持该音频/视频类型
●"" - （空字符串）浏览器不支持该音频/视频类型

所有浏览器都支持 canPlayType() 方法。

注释：Internet Explorer 8 以及更早版本不支持该方法。

参数

值	描述
type	规定要检测的音频/视频类型。 常用值： video/ogg video/mp4 video/webm audio/mpeg audio/ogg audio/mp4 常用值，包括编解码器： video/ogg; codecs="theora, vorbis" video/mp4; codecs="avc1.4D401E, mp4a.40.2" video/webm; codecs="vp8.0, vorbis" audio/ogg; codecs="vorbis" audio/mp4; codecs="mp4a.40.5" 注释：如果包含编解码器，则只能返回 "probably"。

媒体属性：

audioTracks            返回表示可用音轨的 AudioTrackList 对象
autoplay            设置或返回是否在加载完成后随即播放音频/视频
buffered            返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller            返回表示音频/视频当前媒体控制器的 MediaController 对象
controls            设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin            设置或返回音频/视频的 CORS 设置
currentSrc            返回当前音频/视频的 URL
currentTime            设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted        设置或返回音频/视频默认是否静音
defaultPlaybackRate    设置或返回音频/视频的默认播放速度
duration            返回当前音频/视频的长度（以秒计）
ended                返回音频/视频的播放是否已结束
error                返回表示音频/视频错误状态的 MediaError 对象
loop                设置或返回音频/视频是否应在结束时重新播放
mediaGroup            设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted                设置或返回音频/视频是否静音
networkState        返回音频/视频的当前网络状态
paused                设置或返回音频/视频是否暂停
playbackRate        设置或返回音频/视频播放的速度
played                返回表示音频/视频已播放部分的 TimeRanges 对象
preload                设置或返回音频/视频是否应该在页面加载后进行加载
readyState            返回音频/视频当前的就绪状态
seekable            返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking                返回用户是否正在音频/视频中进行查找
src                    设置或返回音频/视频元素的当前来源
startDate            返回表示当前时间偏移的 Date 对象
textTracks            返回表示可用文本轨道的 TextTrackList 对象
videoTracks            返回表示可用视频轨道的 VideoTrackList 对象
volume                设置或返回音频/视频的音量

媒体事件

abort             当音频/视频的加载已放弃时
canplay             当浏览器可以播放音频/视频时
canplaythrough     当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange     当音频/视频的时长已更改时
emptied             当目前的播放列表为空时
ended             当目前的播放列表已结束时
error             当在音频/视频加载期间发生错误时
loadeddata         当浏览器已加载音频/视频的当前帧时
loadedmetadata   当浏览器已加载音频/视频的元数据时
loadstart         当浏览器开始查找音频/视频时
pause             当音频/视频已暂停时
play             当音频/视频已开始或不再暂停时
playing             当音频/视频在已因缓冲而暂停或停止后已就绪时
progress         当浏览器正在下载音频/视频时
ratechange         当音频/视频的播放速度已更改时
seeked             当用户已移动/跳跃到音频/视频中的新位置时
seeking             当用户开始移动/跳跃到音频/视频中的新位置时
stalled             当浏览器尝试获取媒体数据，但数据不可用时
suspend             当浏览器刻意不获取媒体数据时
timeupdate         当目前的播放位置已更改时
volumechange     当音量已更改时
waiting             当视频由于需要缓冲下一帧而停止

用addEventListener添加

例：添加play按钮控制音频

<audio id="clickSound" loop>
    <source src="z.mp3" />
</audio>
<button id="toggle" onclick="toggleSound()">play</button>
<script>
function toggleSound(){
    var clickSound=document.getElementById(‘clickSound‘);  //audio
    var toggle=document.getElementById(‘toggle‘);   //按钮
    if(clickSound.paused){
        clickSound.play();
        toggle.innerHTML="Pause";
    }else{
        clickSound.pause();
        toggle.innerHTML="Play";
    }
}
</script>