八、H5中对音视频的设计

html5标签

<video>:Html5提供的播放视频的标签
    src:资源地址
    controls:该属性定义是显示还是隐藏用户控制界面
    
<audio>:Html5提供的播放音频的标签
    src:资源地址
    controls:该属性定义是显示还是隐藏用户控制界面
    
<source>
    视频:
    type='video/webm; codecs="vp8, vorbis"'
    type='video/ogg; codecs="theora, vorbis"'
    type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
    
    音频:
    type='audio/ogg; codecs="vorbis"'
    type='audio/aac; codecs="aac"'
    type='audio/mpeg'

video标签的属性

width  :视频显示区域的宽度,单位是CSS像素
height :视频展示区域的高度,单位是CSS像素
poster :一个海报帧的URL,用于在用户播放或者跳帧之前展示

src       :    要嵌到页面的视频的URL
controls  :  显示或隐藏用户控制界面
autoplay  :  媒体是否自动播放
loop      :  媒体是否循环播放
muted     :  是否静音
preload   :  该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
                none: 提示作者认为用户不需要查看该视频,服务器也想要最小化访问流量;
                          换句话说就是提示浏览器该视频不需要缓存。
                metadata: 提示尽管作者认为用户不需要查看该视频,
                             不过抓取元数据(比如:长度)还是很合理的。
                auto: 用户需要这个视频优先加载;换句话说就是提示:如果需要的话,
                         可以下载整个视频,即使用户并不一定会用它。
                空字符串:也就代指 auto 值。

audio标签的属性

src       
controls  
autoplay  
loop      
muted     
preload   

音视频js相关属性

duration    :  媒体总时间(只读)
currentTime :  开始播放到现在所用的时间(可读写)
muted       :  是否静音(可读写,相比于volume优先级要高)
volume      :  0.0-1.0的音量相对值(可读写)
paused      :  媒体是否暂停(只读)
ended       :  媒体是否播放完毕(只读)
error       :  媒体发生错误的时候,返回错误代码 (只读)
currentSrc  :  以字符串的形式返回媒体地址(只读)


视频多的部分:
    poster  :   视频播放前的预览图片(读写)
    width、height  :   设置视频的尺寸(读写)
    videoWidth、 videoHeight  :   视频的实际尺寸(只读)

音视频js相关函数

play()  :  媒体播放
pause()  :  媒体暂停
load()  :  重新加载媒体

js相关事件

视频:
    abort    在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
    canplay 在媒体数据已经有足够的数据(至少播放数帧)可供播放时触发。这个事件对应CAN_PLAY的readyState。
    canplaythrough  在媒体的readyState变为CAN_PLAY_THROUGH时触发,表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意:手动设置currentTime会使得firefox触发一次canplaythrough事件,其他浏览器或许不会如此。
    durationchange  元信息已载入或已改变,表明媒体的长度发生了改变。例如,在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
    emptied 媒体被清空(初始化)时触发。
    ended   播放结束时触发。
    error   在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
    loadeddata  媒体的第一帧已经加载完毕。
    loadedmetadata  媒体的元数据已经加载完毕,现在所有的属性包含了它们应有的有效信息。
    loadstart   在媒体开始加载时触发。
    mozaudioavailable   当音频数据缓存并交给音频层处理时
    pause   播放暂停时触发。
    play    在媒体回放被暂停后再次开始时触发。即,在一次暂停事件后恢复媒体回放。
    playing 在媒体开始播放时触发(不论是初次播放、在暂停后恢复、或是在结束后重新开始)。
    progress    告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
    ratechange  在回放速率变化时触发。
    seeked  在跳跃操作完成时触发。
    seeking 在跳跃操作开始时触发。
    stalled 在尝试获取媒体数据,但数据不可用时触发。
    suspend 在媒体资源加载终止时触发,这可能是因为下载已完成或因为其他原因暂停。
    timeupdate  元素的currentTime属性表示的时间已经改变。
    volumechange    在音频音量改变时触发(既可以是volume属性改变,也可以是muted属性改变).。
    waiting 在一个待执行的操作(如回放)因等待另一个操作(如跳跃或下载)被延迟时触发

音频:
    abort    在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
    canplay 在媒体数据已经有足够的数据(至少播放数帧)可供播放时触发。这个事件对应CAN_PLAY的readyState。
    canplaythrough  在媒体的readyState变为CAN_PLAY_THROUGH时触发,表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意:手动设置currentTime会使得firefox触发一次canplaythrough事件,其他浏览器或许不会如此。
    durationchange  元信息已载入或已改变,表明媒体的长度发生了改变。例如,在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
    emptied 媒体被清空(初始化)时触发。
    ended   播放结束时触发。
    error   在发生错误时触发。元素的error属性会包含更多信息。参阅Error handling获得详细信息。
    loadeddata  媒体的第一帧已经加载完毕。
    loadedmetadata  媒体的元数据已经加载完毕,现在所有的属性包含了它们应有的有效信息。
    loadstart   在媒体开始加载时触发。
    mozaudioavailable   当音频数据缓存并交给音频层处理时
    pause   播放暂停时触发。
    play    在媒体回放被暂停后再次开始时触发。即,在一次暂停事件后恢复媒体回放。
    playing 在媒体开始播放时触发(不论是初次播放、在暂停后恢复、或是在结束后重新开始)。
    progress    告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
    ratechange  在回放速率变化时触发。
    seeked  在跳跃操作完成时触发。
    seeking 在跳跃操作开始时触发。
    stalled 在尝试获取媒体数据,但数据不可用时触发。
    suspend 在媒体资源加载终止时触发,这可能是因为下载已完成或因为其他原因暂停。
    timeupdate  元素的currentTime属性表示的时间已经改变。
    volumechange    在音频音量改变时触发(既可以是volume属性改变,也可以是muted属性改变).。
    waiting 在一个待执行的操作(如回放)因等待另一个操作(如跳跃或下载)被延迟时触发
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容

  • 教程一:视频截图(Tutorial 01: Making Screencaps) 首先我们需要了解视频文件的一些基...
    90后的思维阅读 4,678评论 0 3
  • 22、JQ的基础语法、核心原理和项目实战 jQ的版本和下载 jQuery版本 1.x:兼容IE6-8,是目前PC端...
    萌妹撒阅读 1,743评论 0 0
  • 第一章 HTML5 (2014年10月29日发布)新特性: 10个 (1)新的语义标签 (2)增强型表单 (3)视...
    fastwe阅读 948评论 0 1
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,872评论 0 0
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,092评论 1 32