H5新标签之多媒体应用

作者: 梧桐叶_ | 来源:发表于2016-11-22 21:19 被阅读838次

    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

    相关文章

      网友评论

      • 2f11044c9473:codecs是什么东西,自己手打上去的??
        2f11044c9473:@梧桐叶_ 哦。感谢分享
        梧桐叶_:编译码器,关于视频的,具体也不是很懂
      • 061d00467955:不要粘w3c的东西,真正的视频音频不是这么玩的。
        梧桐叶_:纯手工打上去的:flushed:

      本文标题:H5新标签之多媒体应用

      本文链接:https://www.haomeiwen.com/subject/qnkmpttx.html