<video>和<audio>标签
一、<video>基本格式:
<video width=" " heigh="" src=""> </video>
二、<video>支持的格式:一般为mp3 和 mp4
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持video标签
</video>
- controls 属性 在视频元素的底部展示一个元素自带的控制条工具。
- loop 属性 视频结束后将重新开始播放。
- poster 属性 将在视频文件播放前显示图片。
- utoplay 属性 一旦视频就绪马上开始自动播放。
- preload 属性 是否在页面加载后载入视频。
- 可能值 :
- auto (默认) : 当页面加载后载入整个视频
- metadata : 只加载播放文件的基本信息 (如:尺寸、持续时间、第一帧信息、曲目列表等)
- none : 当页面加载后不载入视频
- duration 整个媒体文件的播放时长,以s为单位。
- currentTime 以s为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索。并定位到媒体文件的特定位置。
- ended 如果媒体文件已经播放完毕,则返回true
- paused 如果媒体文件当前被暂停,则返回true
- startTime 返回最早的播放起始时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区
- error 在发生了错误的情况下返回的错误代码
- currentSrc 以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件
- muted 为音频文件设置静音或者消除静音,或者检测当前是否为静音
- load ( ) 方法 用于加载媒体文件。
- pause ( ) 方法 暂停正在播放中的媒体文件。
- play ( ) 方法 播放加载完成的文件。
- canPlayType ( ) 方法 用来测试浏览器是否支持指定的媒体类型。
- 该方法返回3个可能值:
- 空字符串:表示浏览器不支持此种媒体类型
- maybe:表示浏览器可能支持此种媒体类型
- probably:表示浏览器确定支持此种媒体类型
- timeupdate 事件
- 在媒体文件播放过程中,如果播放位置发生变化,就会触发该事件。 结合多媒体元素的“currentTime”与“duration”属性,可以动态显示媒体文件播放的当前时间与总量时间。
- play 当多媒体元素开始播放媒体文件时触发
- pause 当多媒体元素中止播放媒体文件时触发
- ended 当媒体文件播放结束时触发
- error 当媒体文件在加载过程中出现错误时触发
- progress 当媒体元素正在读取媒体文件时触发
- emptied 当媒体元素播放一个未知或异常的媒体文件时触发
- waiting 当媒体元素正在等待加载下一帧播放数据时触发
- loadedmetadata 当多媒体元素加载完成时间与总字节数时触发
- playing 当媒体元素正在播放媒体文件时触发
- volumechange 当多媒体元素音量大小改变或启动静音时触发
<audio src=""> </audio>
<video>和<audio>标签的更多相关文章
- <video>和<audio>标签,对视频和音频的支持
H5新增了<video>和<audio>标签,提供对视频和音频的支持 <audio>的属性与<video>属性相同 <video> vide ...
- HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题
(一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...
- video标签、audio标签
1.video标签 <video src="nans.mp4" controls="controls" autoplay="autoplay& ...
- html5新媒体播放器标签video、audio 与embed、object
html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...
- html5 video/audio 标签
一般来说推荐使用,第三方的媒体播放库[例如 videojs 等],这些库的ui界面,js控制都已写好,功能也扩展的比较丰富 ,直接参考文档使用更加的高效! 这里还是 记录一下 html 原生 vide ...
- 论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...
- Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放
一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...
随机推荐
- BZOJ1324: Exca王者之剑
1324: Exca王者之剑 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 256 Solved: 131[Submit][Status] Desc ...
- SharePoint Srver 2010 资源汇总
转:http://bbs.winos.cn/thread-93681-1-1.html Microsoft SharePoint Server 2010 是适用于企业和网络的业务协作平台,可以帮助您通 ...
- Ubuntu下添加Eclipse快捷方式
首先是在/usr/share/applications下创建eclipse.desktop文件 1. 创建并编辑eclipse.desktop sudo vim /usr/share/applicat ...
- Strom的安装及使用
在使用storm之前,首先看zookeeper是否安装好 单机版 1.在node1上修改配置文件conf下的storm.yaml文件
- 利用 SerialPort 控件实现 PC 串口通信
整理参考自<Visual C#.NET 串口通信及测控应用典型实例>1.3 节 以及 一篇博文:C# 串口操作系列(1) -- 入门篇,一个标准的,简陋的串口例子. 硬件部分 如果是两个串 ...
- Find longest contiguous sub array
It's still an Amazon interview question. Given an array containing only stars '*' and hashes '#' . F ...
- centos git版本服务器配置
在服务器上安装git及做些操作 - 执行命令 ` sudo yum install curl-devel expat-devel gettext-devel openssl-devel zlib-de ...
- ASP.Net IE10 _doPostBack 未定义错误【转】
--昨天发现IE10下面ReportViewer执行报表会报错,发现为Js报_doPostBack 未定义错误,查找相关资料发现问题为 当前framework不能识别IE10版本,把该浏览器做降级处理 ...
- CM5(Cloudera Manager 5) + CDH5(Cloudera's Distribution Including Apache Hadoop 5)的安装详细文档
参考 :http://www.aboutyun.com/thread-9219-1-1.html Cloudera Manager5及CDH5在线(cloudera-manager-installer ...
- sp_send_dbmail权限问题
这段时间处理SSIS服务器迁移的事情,在处理一个发送邮件的任务的时候,突然出现如下错误, 拒绝了对对象 'sp_send_dbmail' (数据库 'msdb',架构 'dbo')的 EXECUTE ...