---- 视频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,则忽略此特性

HTML5 Video与Audio 视频与音频的更多相关文章

  1. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  2. HTML5 video 和 audio

    video 用于在HTML或者XHTML文档中嵌入视频内容 使用 video 元素至少要提供两种视频格式的文件:OGG 和 MP4 OGG:采用 Theora 视频格式和 Vorbis 音频解码器 ( ...

  3. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  4. Html5学习进阶一 视频和音频

    HTML5 规定了一种通过 video 元素来包含视频的标准方法. 视频格式 当前,video 元素支持两种视频格式:   Internet Explorer Firefox 3.5 Opera 10 ...

  5. 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  6. html5 video,audio控制播放多次,请求/监测全屏状态

    audio 播放  Element.play();  如果在播放中,调用play,从头播放,则需要先load,同时绑定结束方法,如 Element.addEventListener('ended',f ...

  7. HTML5 video 连续播放视频

    HTML Video标签属性 html页面代码 <video height="2160" id="playVideo" width="3840& ...

  8. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...

  9. HTML5: HTML5 Video(视频)

    ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...

随机推荐

  1. UIView的Touch事件UIControlEvents详解

    首先,UIControlEvents有这个几种: UIControlEventTouchDown = << , // on all touch downs UIControlEventTo ...

  2. [React Native] Create a component using ScrollView

    To show a list of unchanging data in React Native you can use the scroll view component. In this les ...

  3. php中body下出现莫名空白字符

    php中body下出现莫名空白字符,出现原因 1. 模板前面有莫名格式空格,删不掉,必须把模板里面东西复制出来,新建一个文件弄进去,覆盖原有的 2.docutype前面出现代码,也会导致此问题(有可能 ...

  4. iOS常见文件及程序的启动原理

    一. iOS中常见文件 (一). Xcode6之前 创建项目,默认可以看见一个存放框架的文件夹 info文件以工程文件名开头,如:第一个项目-Info.plist 项目中默认有一个PCH文件 (二). ...

  5. Java 之 调用.Net的 WebService 整理

    最近做一个 java 调用 .net 服务的项目,其中 .net做了一个WebService,需要java来调用. 最开始.net的Service代码如下: using System; using S ...

  6. How the Kernel Manages Your Memory

    http://duartes.org/gustavo/blog/post/how-the-kernel-manages-your-memory/ After examining the virtual ...

  7. nginx配置文件特殊字符说明

    开发过程中经常重复配置nginx.conf,对里面的特殊字符始终不太明白具体的意义,今天百度nginx配置看到一篇不错的文章,转载记录下来,以备不时之需. nginx rewrite 正则表达式匹配 ...

  8. 关于Eclipse插件开发(一)

    plugin.xml是插件和Eclipse内核的接口,Eclipse就像一所大宅子.它的外墙(plugin.xml)有很多门(扩展点), 要熟练进入这座大宅子,就得先搞清楚它有那些门(扩展点). 插件 ...

  9. 设置apt-get

    1.配置apt-get源 cp /etc/apt/sources.list /etc/apt/sources.listbak #备份原有配置文件 nano /etc/apt/sources.list ...

  10. Entity Framework 配置

    Entity Framework的核心 – EDM(Entity Data Model) EDM概述 实体数据模型,简称EDM,由三个概念组成.概念模型由概念架构定义语言文件 (.csdl)来定义,映 ...