<video>和<audio>标签,对视频和音频的支持
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>标签,对视频和音频的支持的更多相关文章
- Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放
一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...
- <video>和<audio>标签
一.<video>基本格式: <video width=" " heigh="" src=""> </vide ...
- video.js不能控制本地视频或者音频播放时长
问题: 把视频放到本地,然后对视频进行测试,想要控制视频或者音频的播放时长,没办法做到,每次拉动进度条,都会使得本地视频重新播放 原因: 所有浏览器默认js无法访问本地地址,也就是说js不能对本地文件 ...
- HTML5 audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...
- HTML5 Video与Audio 视频与音频
---- 视频Video对象 - 指定视频播放地址 <video width="320" height="240" controls="cont ...
- 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 ...
- 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 ...
- JavaScript多个音频audio标签,点击其中一个播放时,其他的停止播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- GridView动态增加行
GridView动态增加行GridView动态增加行 很多时候,我们需要可编辑的表格,来比较方便的进行数据的录入,比如学习成绩的录入.当然这就要求能够动态的增加行,来一次性录入多个学生的信息.现在用A ...
- boost------signals2的使用1(Boost程序库完全开发指南)读书笔记
signals2基于Boost的另一个库signals,实现了线程安全的观察者模式.在signals2库中,观察者模式被称为信号/插槽(signals and slots),他是一种函数回调机制,一个 ...
- SQL注入漏洞和SQL调优SQL注入漏洞和SQL调优
SQL注入漏洞和SQL调优 最近读了程序员的SQL金典这本书,觉得里面的SQL注入漏洞和SQL调优总结得不错,下面简单讨论下SQL注入漏洞和SQL调优. 1. SQL注入漏洞 由于“'1'='1'”这 ...
- 编写高质量equals方法
什么是equals方法 指示其他某个对象是否与此对象相等,equals方法存在Object类中,我们编写的类继承Object,可以覆盖Object的equals方法来实现我们的逻辑,去判断两个对象是否 ...
- iOS view和viewController的生命周期
一.ViewController的职责 对内管理与之关联的View,对外跟其他ViewController通信和协调.对于与之关联的View,ViewController总是在需要的时候才加载视图,并 ...
- C#中字符转换问题详解
C# 出来也有些日子了,最近由于编程的需要,对 C# 的类型转换做了一些研究,其内容涉及 C# 的装箱/拆箱/别名.数值类型间相互转换.字符的 ASCII 码和 Unicode 码.数值字符串和数值之 ...
- 依赖注入(IOC)二
依赖注入(IOC)二 上一章我们讲了构造注入与设值注入,这一篇我们主要讲接口注入与特性注入. 接口注入 接口注入是将抽象类型的入口以方法定义在一个接口中,如果客户类型需要获得这个方法,就需要以实现这个 ...
- Centos 上使用mmsh协议听猫扑网络电台 VLC播放器
Centos 上使用mmsh协议听猫扑网络电台 VLC播放器 安装CentOS已经有一段时间了,但是由于在Linux下除了学习,其他是事情都干不了.今天想闲来无事开了CentOS就想听一下歌,突然想起 ...
- PHP 数组拼接成字符串
PHP[知识分享] 数组拼接成字符串 <?php // 格式: [二维数组] Array ( [0] => Array ( [topicid] => 1 ) [1] => Ar ...
- create OpenVPN on ubuntu12.04
---恢复内容开始--- 最近比较火的有digitalocean 的SSD VPS,配置还不错.每个月5刀,512MB内存,CPU被虚拟过.不是KVM.链接能量也不大. 节点在西雅图,对环太平洋比较 ...