H5音频和视频

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5音频和视频相关的知识,希望对你有一定的参考价值。

使用媒体标签最大的缺点在于缺少编解码器的支持
一、浏览器支持性检测
检测浏览器是否支持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>

 

以上是关于H5音频和视频的主要内容,如果未能解决你的问题,请参考以下文章

H5视频/音频

H5录制视频音频(WebRTC)

h5 video 视频播放开发 和 问题集合

javascript检测浏览器对音频格式和视频格式的支持情况

h5页面自动播放视频音频_关于媒体文件自动全屏播放的实现方式

h5页面自动播放视频音频_关于媒体文件自动全屏播放的实现方式