• H5学习系列之Audio和Video


    1、视频文件:音频轨道、视频轨道和一些元数据(视频封面、标题、子标题、字幕等相关信息)。

    2、目前H5还不支持的:流式音频和视频(H5对视频的支持只限于加载的全部媒体文件)、H5的媒体收到跨域资源共享的限制、全屏无法通过脚本控制。

    3、检测浏览器是否具有播放视频的功能

    var canPlay = document.createElement("video").canPlayType;
    if (canPlay) {alert("ok");}
    else {alert('error');}  //其实就是检测浏览器是否具有canplaytype函数

    4、audio 

    <audio controls src="/张含韵 - 问别.mp3">
    An audio clip from johann sebastian bach
    </audio>

    代码中controls 特性告诉浏览器显示通过的用户控制(开始、停止、跳播、以及音量控制),她之间的内容是为不支持audio元素的浏览器准备的替换内容

    <audio controls >

      <source src="" />

      <source src="" />
    An audio clip from johann sebastian bach
    </audio>

    浏览器根据自身播放能力自动选择,挑选最贱的来源进行播放

    autoplay属性:加载完成后自动播放(ios不支持)

    5、var docu = document.getElementById("audio");//同时适用于video这些属性他们两个相同

            var duration = docu.duration;//整个媒体的播放时常 以s为单位

            var paused = docu.paused;//如果媒体文件当前被暂停(或者未播放),返回true

            var ended = docu.ended;//如果文件已经播放完毕了返回true

            var currentSrc = docu.currentSrc;//以字符串形式返回当前正在播放文件对应于浏览器在source元素中选择的文件

            //以上都是只读属性

            docu.autoplay = true;//查询或者设置自动播放

            docu.loop = true;//查询或者设置循环播放

            docu.currentTime = "30";//查询或者只当前播放的位置

            docu.controls = true;//查询或者设置用户与控制界面

            docu.volume = 0.5;//查询或者设置音量0.0到1.0

            docu.muted = false;//查询或者设置是否静音

            docu.autobuffer = true;//通知播放器在媒体文件开始播放前,是否进行缓冲加载。(如果媒体文件已设置为autoplay,则忽略此属性)

     

    6、video特有的属性

    poster :在视频加载完成之前 图片得url;

    width、height:读取或设置显示尺寸。如果设置的宽度与视频本身不匹配,可能导致居中显示,上下或者左右可能出现黑色条状区域。

    videowidth、videoHeight:返回视频的固有或者自适应的宽度和高度(只读)

    onloadstart //客户端开始请求数据

    onprogress //客户端正在请求数据

    onsuspend //延迟下载

    onabort //客户端主动终止下载(不是因为错误引起)

    onerror //请求数据时遇到错误

    onstalled //网速失速

    onplay //play()和autoplay开始播放时触发

    onpause //pause()触发

    onloadedmetadata //成功获取资源长度

    onloadeddata //

    onwaiting //等待数据,并非错误

    onplaying //开始回放

    oncanplay //可以播放,但中途可能因为加载而暂停

    oncanplaythrough //可以播放,歌曲全部加载完毕

    onseeking //寻找中

    onseeked //寻找完毕

    ontimeupdate //播放时间改变

    onended //播放结束

    onratechange //播放速率改变

    ondurationchange //资源长度改变

    onvolumechange //音量改变

    以上所有事件都是可以捕捉到的 

      

  • 相关阅读:
    Codeforces Global Round 11
    2018-2019 ICPC, Asia Najing
    Codeforces Round #675 (Div. 2) ABCDE
    AtCoder Regular Contest 104 D(卡常)
    Navigator History Location
    键盘移动div
    键盘事件
    事件的传播
    事件的绑定
    事件的委派
  • 原文地址:https://www.cnblogs.com/lxtblogs/p/5243521.html
Copyright © 2020-2023  润新知