H5新标签之多媒体应用

1、常见的视频格式

视频的组成部分:画面、音频、编码格式
视频编码:H.264、theora、VP8(google开源)

2、常见的音频格式

编码:AAC、MP3、Vorbis

3、HTML5虽然能在完全脱离插件的情况下播放音视频,但不是支持所有的格式

支持的视频格式:
OGG = 带有Theora视频编码+Vorbis音频编码的ogg文件
浏览器支持:F,C,O
MPEG4 = 带有H.264视频编码+AAC音频编码的MPEG4文件
浏览器支持:S,C
WebM = 带有VP8视频格式编码+Vorbis音频编码的WebM格式
浏览器支持:I、F、C、O

4、视频Video的使用方法

<video src="http://www.bigaody.com" controls="controls"></video>
< video src="文件地址" controls="controls">
    您的浏览器暂不支持video标签。播放视频
</video >
<video controls="controls" width="300">
    <source src="move.ogg" type='video/ogg; codecs="theora, vorbis"'>
    <source src="move.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="move.webm" type='video/webm; codecs="vp8, vorbis"' >
    您的浏览器暂不支持video标签。播放视频
</video >

5、video常见属性

属性 描述
autoplay autoplay 视频就绪自动播放
controls controls 向用户显示播放控件
width pixels(像素) 设置播放器宽度
height pixels(像素) 设置播放器高度
loop loop 播放完是否继续播放该视频,循环播放
preload preload 是否等加载完再播放
src url 视频url地址
poster imgurl 等待加载的画面图片
autobuffer autobuffer 设置为浏览器缓冲方式,不设置autoplay才有

6、video常见方法

方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
全屏 退出全屏
Webkit(Safari5.1/Chrome15) element.webkitRequestFullScreen() document.webkitCancelFullScreen()
Firefox(works in nightly) element.mozRequestFullScreen() document.mozCancelFullScreen()
W3C提议 element.requestFullscreen() document.exitFullscreen()

7、video的API属性

属性 说明
audioTracks 返回可用的音轨列表(MultipleTrackList对象)
autoplay 媒体加载后自动播放
buffered 返回缓冲部件的时间范围(TimeRanges对象)
controller 返回当前的媒体控制器(MediaController对象)
controls 显示播控控件
crossOrigin CORS设置
currentSrc 返回当前媒体的URL
currentTime 当前播放的时间,单位秒(快进快退10秒)
defaultMuted 缺省是否静音
defaultPlaybackRate 控件的缺省倍速
属性 说明
duration 返回媒体的播放总时长,单位秒
ended 返回当前播放是否结束标志
error 返回当前播放的错误状态
initialTime 返回初始播放的位置
loop 是否循环播放
mediaGroup 当前音频所属媒体组(用来链接多个音视频标签)
muted 是否静音
networkState 返回当前网络状态
paused 是否暂停
playbackRate 播放的倍速(加速、减速播放)
played 当前播放部件已经播放的时间范围(TimeRanges对象)
preload 页面加载时是否同时加载音视频
readyState 返回当前的准备状态
seekable 返回当前可跳转部件的时间范围(TimeRanges对象)
属性 说明
seeking 返回用户是否做了跳转操作
src 当前音视频源的URL
startOffsetTime 返回当前的时间偏移(Date对象)
textTracks 返回可用的文本轨迹(TextTrackList对象)
videoTracks 返回可用的视频轨迹(VideoTrackList对象)
volume 音量值

8、audio支持的格式

HTML5支持的音频格式:
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S

9、audio的使用

<audio  src="文件地址" controls="controls"></audio>
< audio src="文件地址" controls="controls">
    您的浏览器暂不支持audio标签。播放视频
</ audio>
< audio controls="controls"  >
    <source src="happy.MP3" type="video/mpeg" >
    <source src="happy.ogg" type="video/ogg" >
    您的浏览器暂不支持audio标签。播放视频
</ audio>

10、audio常见属性

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮
loop loop 如果出现该属性,则每当音频结束重新开始播放
preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性
src url 要播放的音频的URL
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容

  • 要在计算机内播放或是处理音频文件,也就是要对声音文件进行数、模转换,这个过程同样由采样和量化构成,人耳所能听到的声...
    Viking_Den阅读 9,920评论 1 10
  • 教程一:视频截图(Tutorial 01: Making Screencaps) 首先我们需要了解视频文件的一些基...
    90后的思维阅读 4,493评论 0 3
  • 视频编码与封装方式详解 1.编码方式和封装格式 2.视频编码标准两大系统 MPEG-1 MPEG-2 MPEG-3...
    latthias阅读 6,219评论 0 22
  • 一、基本语法 代码如下: embed src=url 说明:embed可以用来插入各种多媒体,格式可以是 Midi...
    Bruce_zhuan阅读 9,260评论 2 5
  • 你知道「编译」与「解释」的区别吗? 最近在看一些编译过程的知识点,看的比较多的是英文文献。在这之间经常遇到的两个单...
    青晨点支烟阅读 1,525评论 0 0