05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系

  1. 云栖社区>
  2. 博客>
  3. 正文

05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系

浣熊干面包 2017-11-16 12:01:00 浏览774
展开阅读全文

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html

1.引

概述

音频文件或视频文件都可以看做是一个容器文件(类似于压缩的zip

编解码器就是读取特定的容器格式,对其中的音频与视频轨进行解码,然后实现播放

解码器

解码器(decoder),是一种输入模拟视频信号并将它转换为数字信号格式,以进一步压缩和传输的硬件/软件设备

视频格式

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

支持状况

audiocanPlayType可以检测浏览器支持的文件格式

在线检测(右击查看源码)

http://dnt.dkill.net/DNT/HTML5/demo/check.html

2.video

逆天测试仅供参考

测试浏览器:谷歌,360,火狐,EdgeIE mp4格式的基本上都支持了,wmv格式的基本上都不支持,avi格式的火狐不支持

 

案例

1.简单案例:

<video src="images/big.mp4" controls loop>你的浏览器不支持</video>

<video src="images/big.mp4" poster="http://dnt.dkill.net/Images/banner.jpg" controls loop></video>

说明:

loop循环播放

controls显示工具栏

<video src="images/big.mp4" controls>你的浏览器不支持</video>

poster 视频预览图

<video src="images/big.mp4" poster="http://dnt.dkill.net/Images/banner.jpg" controls loop></video>

autoplay自动播放

<video src="images/big.mp4" controls autoplay loop>你的浏览器不支持</video>

preload是否在页面加载后载入视频如果设置了 autoplay 属性,则忽略该属性

属性值:

auto - 当页面加载后载入整个视频

meta - 当页面加载后只载入元数据 (有些是浏览器是metadata)

none - 当页面加载后不载入视频

<video src="images/big.mp4" controls preload="auto">你的浏览器不支持</video>

 

2.多源案例

浏览器自动选择第一个可识别的文件来播放

<video controls>

<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />

<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"/>

</video>

 

3.小播放器

<video id="myvideo" src="../images/big.mp4"poster="http://dnt.dkill.net/Images/banner.jpg" controls loop>回家休息休息。。。</video>

<script type="text/javascript">

var musicObj = $("#myvideo");

//单击控制播放与否

musicObj.click(function () {

if (this.paused) {

this.play();

else {

this.pause();

}

});

</script>

 

3.audio

学过video之后这个就小儿科了,简单介绍一下

基本用法

<audio src="http://dnt.dkill.net/DNT/music/棋子.mp3" controls></audio>

<audio controls>

<source src="http://www.dkill.net/DNT/music/棋子.ogg" type="audio/ogg" />

<source src="http://dnt.dkill.net/DNT/music/棋子.mp3" type="audio/mp3" />

</audio>

 

4. 扩展内容

大纲

在所有属性中,只有 videoWidth  videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。

浏览器测试

代码和测试结果看备注(基本上都是满足的)

属性

只读

ended

返回true代表播放结束

paused

ture代表暂停播放,false代表正在播放

seeking

返回用户是否正在音频/视频中进行查找

true代表查找

duration

获取视频总时间(单位秒)

currentSrc

返回媒体url

readyState

返回音频/视频当前的就绪状态

0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息

1 = HAVE_METADATA - 关于音频/视频就绪的元数据

2 = HAVE_CURRENT_DATA - 关于当前播放位置的数

据是可用的,但没有足够的数据来播放下一帧/毫秒

3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的

4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

networkState

回音频/视频的当前网络状态

0 = NETWORK_EMPTY - 音频/视频尚未初始化

1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源,但并未使用网络

2 = NETWORK_LOADING - 浏览器正在下载数据

3 = NETWORK_NO_SOURCE - 未找到音频/视频来源

回对象

error

this.error.code

1 = MEDIA_ERR_ABORTED - 取回过程被用户中止

2 = MEDIA_ERR_NETWORK - 当下载时发生错误

3 = MEDIA_ERR_DECODE - 当解码时发生错误

4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频

console.log(this.error.code);

played

得视频中以秒计的首段已播放的范围(部分)

属性值

length - 获得音频/视频中已播范围的数量

start(index) - 获得某个已播范围的开始位置

end(index) - 获得某个已播范围的结束位置

获取当前播放时间:this.played.end(0)

seekable

示音频/视频中的可寻址部分

属性值

length - 获得音频/视频中可寻址范围的数量


本文转自毒逆天博客园博客,原文链接:http://www.cnblogs.com/dunitian/p/5141492.html,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
浣熊干面包
+ 关注