一、<video>基本格式:

 <video width=" " heigh="" src=""> </video>

二、<video>支持的格式:一般为mp3 和 mp4

三、source标签用法
作用:source标签可以链接不同的视频文件,浏览器将使用第一个可识别的格式,内容为source标签失效时的提醒
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持video标签
</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 为音频文件设置静音或者消除静音,或者检测当前是否为静音
 
五、video常用事件
  • load ( ) 方法 用于加载媒体文件。
  • pause ( ) 方法 暂停正在播放中的媒体文件。
  • play ( ) 方法 播放加载完成的文件。
  • canPlayType ( ) 方法 用来测试浏览器是否支持指定的媒体类型。
    • 该方法返回3个可能值:
    • 空字符串:表示浏览器不支持此种媒体类型
    • maybe:表示浏览器可能支持此种媒体类型
    • probably:表示浏览器确定支持此种媒体类型
  • timeupdate 事件
    • 在媒体文件播放过程中,如果播放位置发生变化,就会触发该事件。 结合多媒体元素的“currentTime”与“duration”属性,可以动态显示媒体文件播放的当前时间与总量时间。

事件总集合:
  • play 当多媒体元素开始播放媒体文件时触发
  • pause 当多媒体元素中止播放媒体文件时触发
  • ended 当媒体文件播放结束时触发
  • error 当媒体文件在加载过程中出现错误时触发
  • progress 当媒体元素正在读取媒体文件时触发
  • emptied 当媒体元素播放一个未知或异常的媒体文件时触发
  • waiting 当媒体元素正在等待加载下一帧播放数据时触发
  • loadedmetadata 当多媒体元素加载完成时间与总字节数时触发
  • playing 当媒体元素正在播放媒体文件时触发
  • volumechange 当多媒体元素音量大小改变或启动静音时触发
 
六、<audio>标签格式:
    <audio  src=""> </audio>

<video>和<audio>标签的更多相关文章

  1. <video>和<audio>标签,对视频和音频的支持

    H5新增了<video>和<audio>标签,提供对视频和音频的支持 <audio>的属性与<video>属性相同 <video> vide ...

  2. HTML5 学习07——Video(视频)Audio(音频)

    <video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...

  3. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  4. audio与video控件/标签的隐藏,iso/Android下自动全屏播放,短暂黑屏问题

    (一)audio音频标签 <audio src="xxx.mp3"></audio> (二)video视频标签 <video src="xx ...

  5. video标签、audio标签

    1.video标签 <video src="nans.mp4" controls="controls"  autoplay="autoplay& ...

  6. html5新媒体播放器标签video、audio 与embed、object

    html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...

  7. html5 video/audio 标签

    一般来说推荐使用,第三方的媒体播放库[例如 videojs 等],这些库的ui界面,js控制都已写好,功能也扩展的比较丰富 ,直接参考文档使用更加的高效! 这里还是 记录一下 html 原生 vide ...

  8. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

  9. Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放

    一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...

随机推荐

  1. BZOJ1324: Exca王者之剑

    1324: Exca王者之剑 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 256  Solved: 131[Submit][Status] Desc ...

  2. SharePoint Srver 2010 资源汇总

    转:http://bbs.winos.cn/thread-93681-1-1.html Microsoft SharePoint Server 2010 是适用于企业和网络的业务协作平台,可以帮助您通 ...

  3. Ubuntu下添加Eclipse快捷方式

    首先是在/usr/share/applications下创建eclipse.desktop文件 1. 创建并编辑eclipse.desktop sudo vim /usr/share/applicat ...

  4. Strom的安装及使用

    在使用storm之前,首先看zookeeper是否安装好 单机版 1.在node1上修改配置文件conf下的storm.yaml文件

  5. 利用 SerialPort 控件实现 PC 串口通信

    整理参考自<Visual C#.NET 串口通信及测控应用典型实例>1.3 节 以及 一篇博文:C# 串口操作系列(1) -- 入门篇,一个标准的,简陋的串口例子. 硬件部分 如果是两个串 ...

  6. Find longest contiguous sub array

    It's still an Amazon interview question. Given an array containing only stars '*' and hashes '#' . F ...

  7. centos git版本服务器配置

    在服务器上安装git及做些操作 - 执行命令 ` sudo yum install curl-devel expat-devel gettext-devel openssl-devel zlib-de ...

  8. ASP.Net IE10 _doPostBack 未定义错误【转】

    --昨天发现IE10下面ReportViewer执行报表会报错,发现为Js报_doPostBack 未定义错误,查找相关资料发现问题为 当前framework不能识别IE10版本,把该浏览器做降级处理 ...

  9. 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 ...

  10. sp_send_dbmail权限问题

    这段时间处理SSIS服务器迁移的事情,在处理一个发送邮件的任务的时候,突然出现如下错误,  拒绝了对对象 'sp_send_dbmail' (数据库 'msdb',架构 'dbo')的 EXECUTE ...