zoukankan      html  css  js  c++  java
  • HTML Audio&Video

    audio video 所具有的属性大致相同

    1> src
    2> autoplay (boolean)
    3> preload

        none:不预加载
        metadata:只加载媒体的原数据(媒体字节数,第一帧,播放列表.持续时间等)
        auto:预加载

    4> poster(video) 当视频不可用时,展示代替的图片
    5> loop (boolean)
    6> controls
    7> width ,height
    8> error

            switch (video.error.code)
                {
                    case MediaError.MEDIA_ERROR_ABORTED:
                        alert("视频的下载过程被中止。");
                        break;
                    case MediaError.MEDIA_ERROR_NETWORK:
                        alert("网络发生故障,视频的下载过程被中止。");
                        break;
                    case MediaError.MEDIA_ERROR_DECODE:
                        alert("解码失败。");
                        break;
                    case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED:
                        alert("不支持播放的视频格式。");
                        break;
                    default:
                        alert("发生未知错误。");
                }    

    9> networkState
        
         多媒体元素<video>的networkState属性可以返回视频文件的网络状态,当浏览器读取视频文件时,将触发一个“progress”事件,通过该事件,可以获取视频文件在被打开过程中,各个不同阶段的网络状态值,networkState属性为只读属性,该属性对应4个返回值如下表所示。
         字符常量                          返回值            说明
         NETWORK_EMPTY             0                     数据加载初始化
         NETWORK_IDLE                  1                    文件加载成功,等待请求播放
         NETWORK_LOADING           2                    文件正在在加载过程中
         NETWORK_NO_SOURCE       3                    加载出错,没有找到支持的编码格式

    10 >currentSrc  播放中的媒体数据的URL地址(readonly)

    11 >buffered
        
        buffered 属性返回 TimeRanges 对象。TimeRanges 对象表示用户的音视频缓冲范围。缓冲范围指的是已缓冲音视频的时间范围。如果用户在音视频中跳跃播放,会得到多个缓冲范围。
        TimeRanges 对象 , 表示音视频的已缓冲部分。
        TimeRanges 对象属性:
        -> length - 获得音视频中已缓冲范围的数量
        -> start(index) - 获得某个已缓冲范围的开始位置
        -> end(index) - 获得某个已缓冲范围的结束位置(首个缓冲范围的下表是 0)。
        语法:
          myVid=document.getElementById("video1");
          alert("Start: " + myVid.buffered.start(0) + " End: " + myVid.buffered.end(0));

    12 >readyState (readonly)
         
        readyState 属性返回音频/视频的当前就绪状态。 就绪状态指示音频/视频是否已准备好播放。
        0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
        1 = HAVE_METADATA - 关于音频/视频就绪的元数据
        2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧/毫秒
        3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
        4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放
        语法 audio|video.readyState

    13 >seeking 与 seekable (readonly)
        
        seeking 属性返回用户目前是否在音频/视频中寻址。 寻址中(Seeking)指的是用户在音频/视频中移动/跳跃到新的位置。
        true|false。如果用户正在寻址,则为 true。否则为 false。


        seekable 属性返回 TimeRanges 对象。 TimeRanges 对象表示音频/视频中用户可寻址的范围。 可寻址范围指的是用户在音频/视频中可寻址(移动播放位置)的时间范围。 对于流视频,通常可以寻址到视频中的任何位置,即使其尚未完成缓冲。 表示音频/视频中的可寻址部分。
        TimeRanges 对象的属性:
        length - 获得音频/视频中可寻址范围的数量
        start(index) - 获得可寻址范围的开始位置
        end(index) - 获得可寻址范围的结束位置 (第一个可寻址范围的下标是 index 0)。

    14 >currentTime (r & w), startTime (r), duration (r)

        currentTime 属性设置或返回音频/视频播放的当前位置(以秒计)。当设置该属性时,播放会跳跃到指定的位置
        如果修改的位置上没有可用的媒体数据时,会抛出INVALID_STATE_ERR,如果修改的位置超出了浏览器在一次请求中可以请求的数据范围,会抛出INDEX_SIZE_ERR
        startTime  读取媒体播放的开始时间
        duration 读取媒体播放的总时间

    15 >played , paused , end (all readonly)

        played 属性返回 TimeRanges 对象。 TimeRanges 对象表示用户已经播放或看到的音频/视频范围。 已播范围指的是被播放音频/视频的时间范围。如果用户在音频/视频中跳跃,则会获得多个播放范围。
        表示音频/视频的已播范围。
        TimeRanges 对象的属性:
        length - 获得音频/视频中已播范围的数量
        start(index) - 获得某个已播范围的开始位置
        end(index) - 获得某个已播范围的结束位置(首段已播范围的下标是 0)。

        paused 返回布尔值 ,表示当前播放状态是 播放还是停止.
        end 返回布尔值,表示播放是否结束

    16 >defaultPlaybackRate 与 playbackRate

        defaultPlaybackRate 属性设置或返回音频/视频的默认播放速度。
        设置该属性仅会改变默认的播放速度,而不是当前的。要改变当前的播放速度,请使用 playbackRate 属性。
        只有 Google Chrome 支持 defaultPlaybackRate 属性。

        指示音频/视频的默认播放速度。
        例值:

        1.0 正常速度
        0.5 半速(更慢)
        2.0 倍速(更快)
        -1.0 向后,正常速度
        -0.5 向后,半速

    17 >volumn muted

        volumn 用来设置或读取媒体音量 0(静音) ~ 1(最大音量)
        muted 用来设置或读取媒体静音状态 true (静音) ,false (非静音)




    audio, video 方法


    1 >play 自动将 paused 改为 false
    2 >paused 自动将 paused 改为 true
    3 >load 重新载入媒体播放,自动把playbackRate 变为 defaultPlaybackRate
    4 >canplayType

        canPlayType() 方法浏览器是否能播放指定的音频/视频类型。
        canPlayType() 方法可返回下列值之一:
            "probably" - 浏览器最可能支持该音频/视频类型
            "maybe" - 浏览器也许支持该音频/视频类型
            "" - (空字符串)浏览器不支持该音频/视频类型
        规定要检测的音频/视频类型。 常用值:
            video/ogg
            video/mp4
            video/webm
            audio/mpeg
            audio/ogg
            audio/mp4

        常用值,包括编解码器:

            video/ogg; codecs="theora, vorbis"
            video/mp4; codecs="avc1.4D401E, mp4a.40.2"
            video/webm; codecs="vp8.0, vorbis"
            audio/ogg; codecs="vorbis"
            audio/mp4; codecs="mp4a.40.5"

        注释:如果包含编解码器,则只能返回 "probably"。


    audio, video 事件

            在利用video元素或audio元素读取或播放媒体数据的时候,会触发一系列的事件,如果用Javascript脚本来捕捉这些事件,就可以对这些事件进行处理了。对于这些事件的捕捉及其处理,可以按两种方式进行。
            ->1监听的方式,使用video元素或audio元素的addEventListener方法来对事件的发生进行监听,该方法的定义如下所示。
                videoElement.addEventListener(type,listener,useCapture);
                videoElement表示页面上的video元素或audio元素。type为事件名称,listener表示绑定的函数,
                useCapture是一个布尔值,表示该事件的响应顺序,该值如果为true,则浏览器采用capture响应方式,如果为false,浏览器采用bubbing响应方式,一般采用false,默认情况下也为false。


            ->2JavaScript脚本中常见的获取事件句柄的方式,
            如下例: <video id=”video1″ width=”320″ height=”240″ src=”sample.move” onplay=”begin_playing();”></video> function begin_playing(){….//略};

            下面是浏览器在请求媒体数据、下载媒体数据、播放媒体数据一直到播放结束这一系列过程中的事件。
            事件  描述
            loadstart   浏览器开始在网上寻找数据
            progress    浏览器正在获取媒体数据
            suspend     浏览器暂停获取媒体数据,但是下载过程并没有正常结束
            abort   浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是错误引起的
            error   获取媒体数据过程中出错
            emptied     video元素或audio元素所在网络突然变为未初始化状态(可能引起的原因有两个: 1.载入媒体过程中突然发生一个致命错误 2.在浏览器正在选择支持的播放格式时,又调用了Load方法重新载入媒体)
            stalled     浏览器尝试获取媒体数据失败
            play    即将开始播放,当执行力play方法时触发,或数据下载后元素被设为autoplay(自动播放)属性
            pause   播放暂停,当执行了pause方法时触发
            loadedmetadata  浏览器获取完毕媒体的时间长和字节数
            loadeddata  浏览器已加载完毕当前播放位置的媒体数据,准备播放
            waiting     播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧
            playing     正在播放
            canplay     浏览器能够播放媒体,但估计以当前播放速率不能直接将媒体播放完毕,播放期间需要缓冲
            canplaythrough  浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要缓冲
            seeking     seeking属性变为true,浏览器正在请求数据
            seeked  seeking属性变为false,浏览器停止请求数据
            timeupdate  当前播放位置被改变,可能是播放过程中的自然改变,也可能是人为地改变,或由于播放不能连续而发生的跳变
            ended   播放结束后停止播放
            ratechange  defaultplaybackRate(默认播放速率)或playbackRate属性(当前播放速率)被改变
            durationchange  播放时长被改变
            volumechange    volume属性(音量)被改变或muted属性(静音状态)被改变
        


        

  • 相关阅读:
    Task 和 Function
    FPGA中双向端口的设计原理及仿真
    EDK实用实例之LED
    分频电路设计(笔记)
    你了解Promise么
    配置vue多页
    Chrome控制台console的那些属性
    关于读书
    django常用命令
    django 简易博客开发 2 模板和数据查询
  • 原文地址:https://www.cnblogs.com/mguo/p/3028716.html
Copyright © 2011-2022 走看看