H5新增了<video>和<audio>标签,提供对视频和音频的支持

  <audio>的属性与<video>属性相同

<video>

  video之间识别多个source标签,可以链接不同的视频资源,浏览器取最近的一个可识别的视频资源:(比如Safari只识别MP4,所以Safari取的是第二个source标签)

<video width="240" height="320" controls="controls" autoplay="autoplay" loop="loop" poster="xx.jpg">
<source src="xx.ogg" type="video/ogg">
<srouce src="xx.mp4" type="video/mp4">
Your browser doesn't support <video> tag.
<video>

  width: 设置视频显示的宽度

  height: 设置视频显示的高度

  controls: 用于控制视频的播放、暂停、音量等的显示

  autoplay: 视频就绪后,就直接播放

  loop: 控制视频是否能循环播放

  poster: 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。

  muted: 规定视频被静音

  preload: 页面加载的时候,视频同时也加载,并预备播放。但是当有autoplay参数时,忽略该参数

  src: 视频资源链接

  type: 视频类型

  

  提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

视频格式

  当前,video 元素支持三种视频格式:

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

  Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

  MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

  WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

音频格式

  当前,audio 元素支持三种音频格式:

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    

<video>和<audio>标签,对视频和音频的支持的更多相关文章

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

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

  2. <video>和<audio>标签

    一.<video>基本格式: <video width=" " heigh="" src=""> </vide ...

  3. video.js不能控制本地视频或者音频播放时长

    问题: 把视频放到本地,然后对视频进行测试,想要控制视频或者音频的播放时长,没办法做到,每次拉动进度条,都会使得本地视频重新播放 原因: 所有浏览器默认js无法访问本地地址,也就是说js不能对本地文件 ...

  4. HTML5 audio与video标签实现视频播放,音频播放

    随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...

  5. HTML5 Video与Audio 视频与音频

    ---- 视频Video对象 - 指定视频播放地址 <video width="320" height="240" controls="cont ...

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

    http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...

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

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

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

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

  9. JavaScript多个音频audio标签,点击其中一个播放时,其他的停止播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. python实现变参

    使用赋值表达式传递参数,可以颠倒参数列表的顺序.函数的参数提供默认参数 参数可以是变量,也可以是元祖.列表等内置的数据结构 在程序开发中,常常需要传递可变长度的参数.在函数的参数前使用标识符“*”可以 ...

  2. Oracle常用操作

      比较时间 select * from up_date where update < to_date('2007-09-07 00:00:00','yyyy-mm-dd hh24:mi:ss' ...

  3. CentOS6.8安装JDK1.7

    一.查看当前系统是否自带JDK rpm -qa | grep java tzdata-java-2016c-1.el6.noarch java-1.7.0-openjdk-1.7.0.99-2.6.5 ...

  4. ASP.NET MVC 之Model的呈现

    ASP.NET MVC 之Model的呈现(仅此一文系列三) 本文目的 我们来看一个小例子,在一个ASP.NET MVC项目中创建一个控制器Home,只有一个Index: public class H ...

  5. 如何优化运行在webkit上的web app

    如何优化运行在webkit上的web app 近来公司有个web app 项目运行在移动版android系统上,发现在电脑上跑的很流畅的web页面在移动版webkit上非常不流畅.根本无法和nativ ...

  6. SQL Server监控清单

    SQL Server监控清单 一. 服务器1. 状态监控(1) 服务器是否可访问?(2) 相应的数据库服务是否启用?(3) 操作系统事件日志中的错误或告警(4) 磁盘可用空间 服务器状态监控,不管使用 ...

  7. java applet初探之计算器

    这里是用java写的一个计算器,用appllet的方式在浏览器中运行,如果电脑上装有java运行环境jre就能一试.将html代码保存为*.html(名称能够自定),applettest编译为clas ...

  8. 先对数组排序,在进行折半查找(C++)

    第一步:输入15个整数 第二步:对这15个数进行排序 第三部:输入一个数,在后在排好序的数中进行折半查找,判断该数的位置 实现代码如下: 方法一: 选择排序法+循环折半查找法 #include< ...

  9. setprecision、fixed、showpoint的用法总结(经典!!超经典!!)

    首先要加头文件:iomanip 一:setprecision 作用:控制输出流显示浮点数的数字个数,setprecision(n)就是输出的n个数,会有四舍五入. 比如:double s=20.784 ...

  10. JS,CSS是前端,JAVA PHP ASP是后端,数据库是后端的处理对象,非代表前后底

    大海-mysql-oracle(529513481)  19:02:18 象我这边,前台都是php,而php做数据分析是不太理想的,做中间件没人力,难办 横瓜(601069289) 19:20:15  ...