HTML5中视频音频的使用详解_html5_网页制作
这篇文章主要给大家总结介绍了关于HTML5中视频音频的使用的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
一、video
1.1 video支持视频格式
常见的视频格式
视频的组成部分:画面、音频、编码格式
视频编码:H.264、Theora、VP8(google开源)
HTML5支持的视频格式:
1、Ogg
带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
2、MEPG4
带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
3、WebM
带有VP8视频编码+Vorbis音频编码的WebM格式
支持的浏览器: I、F、C、O
劣势:视频少、转码器几乎没有,不好转码
想要video能自动填充慢父div的大小,只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可
1.2 标签原型
指定一种视频格式,不能播就提示
<video id="media" src="examp.mp4" width="500"
poster="examp1.jpg" >您的浏览器不支持video</video>
给定多种视频格式,浏览器根据自身支持程度选择播放哪一种
注意:多个source标签,浏览器会从第一个开始识别,如果第一个不被识别,则会继续识别第二个;如果第一个识别成功,则会直接播放第一种格式视频
<video controls = “controls”>
<source src=”1.mp4” type=”video/mp4” /> //src属性写到source标签中,要指定视频的type类型,例如MP4的即为type=“video/mp4”
<source src = “2.ogg” type=”video/ogg” /> //ogg格式
<source src=”3.webm” type=”video/webm” /> //webm格式
</video>
1.3 重要的video标签属性
API 属性
常用API属性
duration:返回当前音频/视频的长度(以秒计)
paused:设置或返回音频/视频是否暂停
currentTime:设置或返回音频/视频中的当前播放位置(以秒计)
ended:返回音频/视频的播放是否已结束
1.4 Video API
1.4.1 Video 方法
常用方法
play():开始播放音频/视频
pause():暂停当前播放的音频/视频
1.4.2网络状态
获取video对象
Media = document.getElementById("media");
1.Media.currentSrc;
返回当前资源的URL
2.Media.src = value;
返回或设置当前资源的URL
3.Media.canPlayType(type);
是否能播放某种格式的资源
4.Media.networkState;
0.此元素未初始化
1.正常但没有使用网络
2.正在下载数据
3.没有找到资源
5.Media.load();
重新加载src指定的资源
6.Media.buffered;
返回已缓冲区域,TimeRanges
7.Media.preload;
none:不预载
metadata:预载资源信息
auto:
1.4.3 准备状态
1.Media.readyState
2.Media.seeking;
是否正在seeking
1.4.4 回放状态
1.Media.currentTime = value;
当前播放的位置,赋值可改变位置
2.Media.startTime;
一般为0,如果为流媒体或者不从0开始的资源,则不为0
3.Media.duration;
当前资源长度 流返回无限
4.Media.paused;
是否暂停
5.Media.defaultPlaybackRate = value;
默认的回放速度,可以设置
6.Media.playbackRate = value;
当前播放速度,设置后马上改变
7.Media.played;
返回已经播放的区域,TimeRanges,关于此对象见下文
8.Media.seekable;
返回可以seek的区域 TimeRanges
9.Media.ended;
是否结束
10.Media.autoPlay;
是否自动播放
11.Media.loop;
是否循环播放
12.Media.play();
播放
13.Media.pause();
暂停
1.4.5 视频控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
1.4.6 相关事件
1.首先绑定事件的话可以通过js中的addEventListener方法来绑定事件
2.常用事件
oncanplay:当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。
ontimeupdate: 当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。
onended:当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。
1.4.7 其他
1.全屏:
element.webkitRequestFullScreen();( webkit)
element.mozRequestFullScreen(); (Firefox )
element.requestFullscreen(); (W3C )
2.退出全屏:
document.webkitCancelFullScreen(); (webkit )
document.mozCancelFullScreen(); (Firefox)
document.exitFullscreen(); (W3C)
二、audio
2.1 audio格式
1.常见的音频格式
音频编码:ACC、MP3、Vorbis
2.HTML5支持的音频格式:
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
2.2 audio标签中的一些常用属性
对于音乐格式的支持
audio可通过new来创建。也可以通过用document来获取
//通过new关键字来创建Audio对象
var Music = new Audio("test.mp3");
//通过document来获取已经存在的Audio对象
var Music = document.getElementById("audio");
//当然这里也可以使用document.getElementsByClassName(\’className\’)等其他的方法来获取。
2.3 api所提供的对audio标签操作的一些属性和方法
2.4 常用的控制用的函数
2.5 audio标签API中的常用事件
首先绑定事件的话可以通过js中的addEventListener方法来绑定事件
其实video的api和audio几乎一致。稍稍有点不同。所以基本上会了一个其他的也就都会了
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对3399IT网的支持。
本文为网络共享文章,如有侵权请联系邮箱485837881@qq.com