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

时间: 2024-10-09 13:22:14

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

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

HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload="metadata"> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=676422 --> <source src="assets/dizzy.mp4" type="video/mp4"

18、HTML5 Video(视频)和 audio(音频)

video标签概述: <video> 元素提供了 播放.暂停和音量控件来控制视频. 同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留.如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变. <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的. <vid

HTML5 Video(视频)

HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari

HTML5学习(10)video和audio

Web站点上的视频和音频 直到现在,仍然不存在一项旨在网页上显示视频和音频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素/audio 元素来包含视频/音频的标准方法. <video> 元素支持三种视频格式: MP4, WebM, 和 Ogg <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg 使用 DOM 进行控制 HTML5 <video> 和

(转)让所有浏览器支持HTML5 video视频标签

转自http://www.zhangxinxu.com/wordpress/?p=661 一.前面的唠叨 我记得就是前几个月吧,有条消息说YouTube支持了HTML5视频嵌入标签video,好吧,我听说而已,因为我不是个擅长FQ的人,到底如何我也不得而知. 与主题不相关的HTML5方面的东西我就不多说了,对于video标签,获取大家都听说了,这个标签的功能如同现在HTML语言中的img标签,就现在,比如要链接并显示一张图片,可以这样子: <img data-src="http://ima

视频与音频

1.video(视频) 带控制器的视频播放器: <video> 元素提供了 播放.暂停和音量控件来控制视频. 同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留..如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变. <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的

16、HTML5 Video

直到现在,仍然不存在一项旨在网页上显示视频的标准 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件 HTML5 规定了一种通过 video 元素来包含视频的标准方法 实例 ---> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <

火狐放不了html5 video MP4格式

火狐放不了html5 video MP4格式 这里教大家解决火狐播放html5 video时 显示视频或mime类型不支持 这是因为火狐不支持mp4格式视频的播放,所以得把mp4格式的视频转为ogg格式的 一:下载 这里提供一个转换工具 [Total Video Audio Converter] 如果链接失效,请自行百度. 二:解压,打开 这里是解压版的,解压到硬盘里就行了, 然后双击totalvacvt.exe 这里是注册码: 姓 名:www.uzzf.com 序列号:ABCDEF1234BC

The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open source (MIT) media library written in JavaScript. A jQueryplugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio an