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 文件

支持状况

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

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

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

2.video

逆天测试仅供参考

,火狐,Edge,IE :mp4格式的基本上都支持了,wmv格式的基本上都不支持,avi格式的火狐不支持

案例

1.简单案例:

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

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

说明:

loop循环播放

controls显示工具栏

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

poster 视频预览图

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

autoplay自动播放

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

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

属性值:

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

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

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

<video src="data: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 - 获得音频/视频中可寻址范围的数量

start(index) - 获得可寻址范围的开始位置

end(index) - 获得可寻址范围的结束位置

alert("Start: " + this.seekable.start(0) + " End: " + this.seekable.end(0));

buffered

回一个TimeRanges对象,确认浏览器已经缓存媒体文件

属性值

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

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

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

alert("Start: " + this.buffered.start(0) + " End: " + this.buffered.end(0));

读写

src

src 属性设置或返回音频/视频的当前来源

loop

可以脚本控制播放,设置为true为循环播放

muted

以脚本控制播放,设置为true为静音

poster

设置视频封面地址

this.poster = 'http://dnt.dkill.net/Images/banner.jpg';

volume

设置或返回音频/视频的音量

规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字。

preload

置或返回音频/视频是否应该在页面加载后进行加载

属性值

auto 指示一旦页面加载,则开始加载音频/视频。

metadata 指示当页面加载后仅加载音频/视频的元数据。

none 指示页面加载后不应加载音频/视频。

controls

以脚本控制显示工具栏,设置为true为显示

autoplay

以脚本控制播放,设置为true为自动播放

currentTime

获取当前播放位置,返回时间(单位秒)

playbackRate

置或返回音频/视频播放的速度

置或返回音频/视频的默认播放速度

1.0 正常速度

0.5 半速(更慢)

2.0 倍速(更快)

-1.0 向后,正常速度

-0.5 向后,半速

<video id="myvideo"></ video>

$(function () {

var videoObj = $('#myvideo');

var This = videoObj.get(0);

This.controls = true;

This.poster = 'http://dnt.dkill.net/Images/banner.jpg';

This.src = 'images/big.mp4';

});

defaultPlaybackRate

专业酱油12年

设置或返回音频/视频的默认播放速度

1.0 正常速

0.5 半速(更慢)

2.0 倍速(更快)

-1.0 向后,正常速度

-0.5 向后,半速

不会影响当前播放速度

方法

addTextTrack()

向音频/视频添加新的文本轨道

语法

audio|video.addTextTrack(kind,label,language)

kind

规定文本轨道的类型。

"subtitles"

"caption"

"descriptions"

"chapters"

"metadata"

label

字符串值,为文本轨道规定标签。用于为用户对文本轨道进行标识。

language

双字母语言代码,规定文本轨道的语言。

中文

zh

英文

en

案例

canPlayType()

检测浏览器是否能播放指定的音频/视频类型

案例

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

load()

重新加载音频/视频元素

play()

开始播放音频/视频

pause()

暂停当前播放的音频/视频

事件

audio(video)媒体事件

事件+描述

abort 当音频/视频的加载已放弃时触发。

canplay 当浏览器可以开始播放音频/视频时触发。

canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。

durationchange 当音频/视频的时长已更改时触发。

emptied 当目前的播放列表为空时触发。

ended 当目前的播放列表已结束时触发。

error 当在音频/视频加载期间发生错误时触发。

loadeddata 当浏览器已加载音频/视频的当前帧时触发。

loadedmetadata 当浏览器已加载音频/视频的元数据时触发。

loadstart 当浏览器开始查找音频/视频时触发。

pause 当音频/视频已暂停时触发。

play 当音频/视频已开始或不再暂停时触发。

playing 当音频/视频在因缓冲而暂停或停止后已就绪时触发。

progress 当浏览器正在下载音频/视频时触发。

ratechange 当音频/视频的播放速度已更改时触发。

seeked 当用户已移动/跳跃到音频/视频中的新位置时触发。

seeking 当用户开始移动/跳跃到音频/视频中的新位置时触发。

stalled 当浏览器尝试获取媒体数据,但数据不可用时触发。

suspend 当浏览器刻意不获取媒体数据时触发。

timeupdate 当目前的播放位置已更改时触发。

volumechange 当音量已更改时触发。

waiting 当视频由于需要缓冲下一帧而停止时触发。

当音频/视频处于加载过程中时,会依次发生以下事件

loadstart

durationchange

loadedmetadata

loadeddata

progress

canplay

canplaythrough

使用方法

常见两种:

addEventListener

$(function () {

var videoObj = $('#myvideo');

var This = videoObj.get(0);

This.controls = true;

This.poster = 'http://dnt.dkill.net/Images/banner.jpg';

This.src = 'images/big.mp4';

This.addEventListener('pause', function () {

alert('视频这么精彩你丫还敢暂停?');

});

});

document.getElementById('myvideo').addEventListener('pause', function () {

alert('视频这么精彩你丫还敢暂停?');

});

属性赋值

$(function () {

var videoObj = $('#myvideo');

var This = videoObj.get(0);

This.controls = true;

This.poster = 'http://dnt.dkill.net/Images/banner.jpg';

This.src = 'images/big.mp4';

This.onpause = myPause;

});

function myPause() {

alert('视频这么精彩你丫还敢暂停?')

}

05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系的更多相关文章

  1. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

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

  2. 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  3. 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  4. 08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储

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

  5. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  6. 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  7. 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  8. 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  9. 08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

随机推荐

  1. .Net多线程编程—预备知识

    1 基本概念 共享内存的多核架构:一个单独的封装包内封装了多个互相连接的未处理器,且所有内核都可以访问主内存.共享内存的多核系统的一些微架构,例如内核暂停功能,超频. 内核暂停功能:当使用内核不多的时 ...

  2. HashMap与TreeMap源码分析

    1. 引言     在红黑树--算法导论(15)中学习了红黑树的原理.本来打算自己来试着实现一下,然而在看了JDK(1.8.0)TreeMap的源码后恍然发现原来它就是利用红黑树实现的(很惭愧学了Ja ...

  3. JavaScript权威指南 - 数组

    JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. J ...

  4. Android业务组件化之子模块SubModule的拆分以及它们之间的路由Router实现

    前言: 前面分析了APP的现状以及业务组件化的一些探讨(Android业务组件化之现状分析与探讨),以及通信的桥梁Scheme的使用(Android业务组件化之URL Scheme使用),今天重点来聊 ...

  5. Android总结之链式调用(方法链)

    前言: 最近在学习总结Android属性动画的时候,发现Android的属性动画设计采用了链式调用的方式,然后又回顾了一下了以前接触的开源框架Glide也是采用链式调用的方式,还有最近火的一塌糊涂的R ...

  6. Openfiler配置RAC共享存储

    将 Openfiler 用作 iSCSI 存储服务器,主要操作步骤如下: 1.设置 iSCSI 服务 2.配置网络访问 3.指定物理存储器并对其分区 4.创建新的卷组 5.创建所有逻辑卷 6.为每个逻 ...

  7. PHP中PDO事务的使用方法

    事务 (Transaction) 是操作数据库中很重要的一个功能, 它可以让你预定一条, 或者一系列 SQL 语句, 然后一起执行. 在执行的过程中, 如果其中的某条执行失败, 可以回滚所有已更改的操 ...

  8. arcgis api for js入门开发系列六地图分屏对比(含源代码)

    上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...

  9. SuperMap-iServer-单点登录功能验证(CAS)

    SuperMap-iServer-单点登录功能验证(CAS) 1.测试目的: 验证SuperMap-iServer使用CAS单点登录的功能是否正常. 2.测试环境: SuperMap-iServer8 ...

  10. Angular2 Hello World 之 RC6

    angular2还没有发布正式版,确实有点不靠谱,变化太频繁,之前写的demo直接将js升级到最新版之后发现就不能用了……所以现在在写一篇demo——基于RC6.参考:http://web3.code ...