---- 视频Video对象

- 指定视频播放地址

  1. <video width="320" height="240" controls="controls">
  2. <source src="movie.ogg" type="video/ogg" />
  3. <source src="movie.mp4" type="video/mp4" />
  4. 你的浏览器不支持视频标签
  5. </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. 流弊博客集锦(updating)

    1.http://ifeve.com/ 2.淘宝的 code project http://code.taobao.org/ http://blog.csdn.net/tenfyguo/article ...

  2. java 实现视频转换通用工具类:视频相互转换-Ffmpeg(三)

    java 实现视频转换通用工具类:获取视频元数据信息(一) java 实现视频转换通用工具类:视频相互转换-总方法及Mencoder(二) 这节主要是ffmpeg的相关方法封装,在实际调用中主要使用f ...

  3. MFC 学习 之 状态栏的添加

    1.首先声明一个 CStatusBar  m_bar;//声明对象2.然后打开视图资源 String Table中添加两个字段值 3.创建了两个字段值以后,在OnintDialog() 所在的 .cp ...

  4. WINHTTP的API接口说明。

    BOOL WINAPI WinHttpAddRequestHeaders(   _In_  HINTERNET hRequest,   _In_  LPCWSTR pwszHeaders,   _In ...

  5. Redis的Time Event与File Event的微妙关系

    redis里设计了两类事件,一类是file event,一类是time event. 其中file event主要为网络事件而设计,而time event为一些后台事件设计. 在两类事件的管理设计上, ...

  6. careercup-中等难度 17.5

    17.5 写一个函数来模拟游戏. 游戏规则如下: 4个槽,里面放4个球,球的颜色有4种,红(R ),黄(Y),绿(G),蓝(B).比如, 给出一个排列RGGB,表示第一个槽放红色球,第二和第三个槽放绿 ...

  7. 解决MVC Jquery"此请求已被阻止,因为当用在 GET 请求中时,会将敏感信息透漏给第三方网站"的问题

    在ASP.NET MVC项目中,使用AJAX向控制器发送GET请求获取JSON数据时,出现这个错误:"此请求已被阻止,因为当用在 GET 请求中时,会将敏感信息透漏给第三方网站.若要允许 G ...

  8. JavaScript网站设计实践(六)编写live.html页面 改进表格显示

    一.编写live.html页面,1.JavaScript实现表格的隔行换色,并且当鼠标移过时当前行高亮显示:2.是输出表格中的abbr标签的内容 实现后的效果图是这样的: 1.实现思路 在输出表格的时 ...

  9. GitHub帮助文档翻译1——helloWorld

    工欲善其事必先利其器 ,都不知道 GitHub到底是什么,还怎么玩?因为总是会读了第一句就忘了下一句,形成不了感觉,所以希望把读GitHub的帮助文档都翻译出来,总是看大段大段的东西,谁都会懵圈的.希 ...

  10. Number of failed login attempts exceeds threshold value

    OEM发出好多告警,Number of failed login attempts exceeds threshold value. profile当前配置10次失败就会锁定user 查看下,dba_ ...