zoukankan      html  css  js  c++  java
  • HTML5 Video与Audio 视频与音频

    ---- 视频Video对象

    - 指定视频播放地址

    <video width="320" height="240" controls="controls">
       <source src="movie.ogg" type="video/ogg" />
       <source src="movie.mp4" type="video/mp4" />
       你的浏览器不支持视频标签
    </video>

    - 内嵌元素,若不支持将会显示那些指定的文字

    - 视频额外属性

    属性 描述
    ------------------------------------------------------------
    poster 在视频加载完成之前,代表视频内容的图片的URL地址
    width,heigth 设置显示尺寸
    videoWidth,videoHeight 返回视频的固有或自适应的宽度和高度,只读

    ---- 格式与浏览器匹配

    Codec Firefox Opera Chrome Safari IE IOS* Android
    --------------------------------------------------------------------
    OGG 3.5 10.50 3.0
    MP4 3.0 3.0 2.0
    WebM 4.0 10.60 6.0 9**
    Flash Plug-In Plug-In Plug-In Plug-In Plug-In 2.2

    ---- 音频Audio对象

    - 与视频同享 HTMLMediaElement
    - var audio = new Audio(src);

    (注意:以前Audio和Vidio都通用)

    - 常用的控制函数

    函数 动作
    ------------------------
    load() 加载音频/视频文件,为播放做准备.通常情况下不必调用,除非是动态生成的元素,用来在播放前预加载
    play() 加载并播放音频/视频文件,除非音频/视频已经暂停在其他位置了,否则默认从开头播放
    pause() 暂停处理播放状态的音频/视频文件
    canPlayType(type) 测试void元素是否支持给定MIME类型的文件

    - 只读的媒体属性

    属性 描述
    -------------------------
    duration 整个媒体文件的播放时长,以s为单位,如果无法获取时,则返回NaN
    paused 如果媒体文件当前被暂停,则返回true,如果还未开始播放,默认返回true
    ended 如果媒体文件已经播放完毕,则返回true
    startTime 返回最早的播放起始时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区
    error 在发生了错误的情况下返回的错误代码
    currentSrc 以字符串形式返回当前正在播放或已加载的文件,对应于浏览器在source元素中选择的文件

    - 可脚本控制的值

    属性 描述
    -------------------------
    autoplay 是否自动播放,或者查询是否已设置为autoplay
    loop 是否循环播放
    currentTime 以s为单位返回从开始播放到现在所用的时间,在播放过程中,设置currentTime来定位媒体快进/快退
    controls 显示或隐藏用户控制界面,或者查询用户控制界面是否可见
    volume 在0.0到1.0之间设置音频音量的相对值,或者查询当前音量值
    muted 设置静音,或检测是否为静音
    autobuffer 播放前是否进行缓冲加载,如果媒体已设置autoplay,则忽略此特性

  • 相关阅读:
    彻底领悟javascript中的exec与match方法
    javascript doT 使用
    pluginstorage 插件
    html5离线储存,application cache,manifest使用体验
    window.location.hash属性介绍 ajax后退按钮失效问题
    控制textarea光标移到末尾
    webkitanylink 谷歌浏览器CSS之A:HOVER
    正则表达式详细参考文档
    复杂应用的 CSS 性能分析和优化建议
    seaJs api 帮助文档
  • 原文地址:https://www.cnblogs.com/xgao/p/4200695.html
Copyright © 2011-2022 走看看