• html5关于视频和音频


    视频:video

    音频: audio

    不同的浏览器支持媒体的编码格式不同

    浏览器 视频编码格式 音频编码格式
    IE9+ H.264,vp8 mp3,wav
    FF4+ ogg theora,vp8 ogg vorbis,wav
    opera 10+ ogg theora,vp8 ogg vorbis,wav
    chrome 6+ H.264,ogg theora,vp8 ogg vorbis,mp3

    属性:

       src:媒体源

     autoplay:是否自动播放

     preload:预算加载数据(none:不预加载任何数据,metadata:预加载媒体的元数据,auto:预加载全部的数据)

      poster:(video元素,如果媒体数据不可用时,可以使用该属性向用户展示一幅替代用的图片)

      controls:控制面板

     error:在下载数据,播放数据时为null,出现错误时会有以下几个值:

               1:媒体数据在下载过程中由于用户操作所导致错误

               2:确认媒体资源可用,但是在下载过程中由于网络原因而导致错误

        3: 确主媒体资源可用,但是解码时发生错误

               4:媒体资源不可用媒体格式不被支持

    networkState:读取当前的网络状态

        0:元素处于初始化状态

               1:浏览器已选择好用什么编码格式来播放媒体了,但尚未建立网络连接

        2:媒体数据加载中

        3:没有支持的编码格式,不执行加载

    currentSrc:可以读取媒体正在播放的资源

    buffered:返回一个TimeRanges对象,这个对象表示浏览器是否对媒体数据进行了缓存,如果缓存了他的length属性返回1

    readyState:返回媒体当前播放位置的就绪状态

        0:没有获取到媒体的任何信息,当前播放位置没有数据

        1:获取到足够的媒体数据,但是当前的媒体数据不可用

        2:获取到当前播放的数据,但是没有获取到下一帧的数据

        3:获取到当前播放的数据,也获取到了下一帧的数据

        4:获取到当前播放的数据,也获取到了下一帧的播放数据,浏览器可以确保媒体是某一种速度进行加载

    seeking:表示浏览器是否正在请求媒体某一特定位置的数据,

    seekable:返回一个TimeRange对象,表示请求到数据的时间范围

    currentTime:表示媒体当前播放的位置,可以指定为某一个位置

    startTime:表示媒体播放的开始时间,和般为0

    duration:可以读取媒体文件总的播放时间

    played:返回一个TimeRange,表示已播放媒体的数据,开始时间为已播放数据开始时间,结束时间为已播放数据的结束时间

    paused:表示媒体是否处于暂停状态

    ended:表示媒体是否已播放完毕

    palybackRate:获取和设置媒体当前的播放速率

    defaultPlaybackRage:获取和设置媒体默认的播放速率

    volume:获取和设置媒体的音量。0表示静音

    muted:获取和设置媒体的静态状态,true表示静音

    方法:
    play():播放媒体,会将paused属性设为false

    pause():暂停媒体,会将paused属性设为true

    load():重新加载媒体,并将playbackRate属性设置为defaultPlaybackRate属性,error的值为null

    canPlayType('ogg/theora;codecs="theora,vorbis"'):用来判断浏览器是否支持播放某种类型的媒体

      空字符串:表示不支持

      maybe:表示有可能支持

        probably:表示一定支持

    事件:

    timeupdate

  • 相关阅读:
    双向链表

    一个简单makefile
    内存管理
    队列
    postgresql表结构查询sql
    postgresql 命令
    NSMutableDictionary 中使用setValueForKey 和 setObjectForKey有什么区别?
    ViewController 生命周期
    程序启动过程
  • 原文地址:https://www.cnblogs.com/xiaohui108/p/2855626.html
Copyright © 2020-2023  润新知