---- 视频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. mysql---where子查询、form子查询、exists子查询

    1.什么是子查询? 当一个查询是另一个查询的条件时,称之为子查询. 2.子查询有什么好处? 子查询可以使用几个简单命令构造功能强大的复合命令. 那么,现在让我们一起来学习子查询. 3.where型的子 ...

  2. 最牛X的编码套路

    最近,我大量阅读了Steve Yegge的文章.其中有一篇叫"Practicing Programming"(练习编程),写成于2005年,读后令我惊讶不已: 与你所相信的恰恰相反 ...

  3. css3动画属性中的transition属性

    一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...

  4. ThinkPHP CURD方法盘点:order方法

    order方法属于模型的连贯操作方法之一,用于对操作的结果排序. 用法 $Model->where('status=1')->order('id desc')->limit(5)-& ...

  5. 【剑指Offer学习】【全部面试题汇总】

    剑指Offer学习 剑指Offer这本书已经学习完了.从中也学习到了不少的东西,如今做一个总的文件夹.供自已和大家一起參考.学如逆水行舟.不进则退.仅仅有不断地学习才干跟上时候.跟得上技术的潮流! 全 ...

  6. iOS利用视频做起始页

    一个好的引导页会使得用户体验大大提升,利用视频来做,可以更简单的达到优雅的效果.使用MediaPlayer.framework框架下的AVPlayerLayer,它和Core Animation紧密地 ...

  7. java 引用类型及作用

    0. 引言 Java 中一共有 4 种类型的引用 : StrongReference. SoftReference. WeakReference 以及 PhantomReference , 这 4 种 ...

  8. mysql中删除表

    有两种方式: 1.delete from table table_name; 2.truncate table table_name; 第一种中,清空表后,主键id会在原先的记录基础上继续增加,而第二 ...

  9. jquery实现无缝滚动

    //点击上一页 $('.pointLeft').click(function() { if (prevAllow) { prevAllow = false; scrollUlLeft = scroll ...

  10. java_不知道数据类型情况下,数组遍历-反射

    if(items.getClass().isArray){ this.collection = new ArrayList(); int length = Array.getLength(items) ...