HTML 5 视频使用
视频格式
当前,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 文件
<video> 标签的属性
| 属性 | 值 | 描写叙述 |
|---|---|---|
| autoplay | autoplay | 假设出现该属性,则视频在就绪后立即播放。 |
| controls | controls | 假设出现该属性,则向用户显示控件,比方播放button。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 假设出现该属性,则当媒介文件完毕播放后再次開始播放。 |
| preload | preload |
假设出现该属性,则视频在页面载入时进行载入,并预备播放。 假设使用 "autoplay",则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
实例1
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。
control 属性供加入播放、暂停和音量控件。
实例2
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
video 元素同意多个 source 元素。
source 元素能够链接不同的视频文件。
浏览器将使用第一个可识别的格式。
HTML 5 视频使用的更多相关文章
- 【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直 ...
- premere cs4绿色版 安装 并且 视频导出 讲解
最近室友,开始在玩视频剪辑,用的是 premere cs4 绿色版.让他遇到的最大问题也是我之前遇到的最大问题,就是视频导出. 所以我在这里上传一套自己的一点点经验吧. 接下来,我就总结一下 我是怎么 ...
- Power BI官方视频(3) Power BI Desktop 8月份更新功能概述
Power BI Desktop 8月24日发布了更新版本.现将更新内容翻译整理如下,可以根据后面提供的链接下载最新版本使用. 1.主要功能更新 1.1 数据钻取支持在线版 以前的desktop中进行 ...
- 视频 - 在 VirtualBox 中部署 OpenStack
大家新年好,CloudMan 今天给大家带来一件新年礼物. 一直以来大家都反馈 OpenStack 学习有两大障碍:1. 实验环境难搭2. 体系复杂,难道大今天我就先帮大家解决环境问题.前两天我抽空在 ...
- canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- html5 与视频
1.视频支持格式. 有3种视频格式被浏览器广泛支持:.ogg,.mp4,.webm. Theora+Vorbis=.ogg (Theora:视频编码器,Vorbis:音频编码器) H.264+$$$ ...
- 基于RN开发的一款视频配音APP(开源)
在如今React.ng.vue三分天下的格局下,不得不让自己加快学习的脚步.虽然经常会陷入各种迷茫,学得越多会发现不会的东西也被无限放大,不过能用新的技术作出一些小项目小Demo还是会给自己些许自信与 ...
- 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频
目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...
- duang~免费的学习视频来啦:学霸君之全栈测试
学霸君向童鞋们推荐一款 同名学霸学习 视频教程 重点是完全免费收看学习噢!!! 今天 学霸君推荐腾讯课堂的学霸君之全栈测试 复制下方链接至腾讯课堂中报名学习 https://ke.qq.com/cou ...
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
随机推荐
- Java基础知识强化36:StringBuffer类之StringBuffer的概述
1. StringBuffer类概述: (1)String的缺陷: 我们如果对字符串进行拼接操作,每次拼接,都会构造一个新的String对象,既耗时,又浪费空间.如下图: (2)StringBuffe ...
- LDAP索引及缓存优化
一.设置索引 索引将查找信息和 Directory Server 条目关联起来. Directory Server支持以下几种索引: 1出现索引 (pres) - 列出了具有特定属性的条目,与属性的值 ...
- a标签调用js的几种方法
我们常用的在a标签中有点击事件: <a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScrip ...
- php设计模式——单例模式
单例模式概念 单例模式是指整个应用中类只有一个对象实例的设计模式. 单例模式的特点 一个类在整个应用中只有一个实例 类必须自行创建这个实例 必须自行向整个系统提供这个实例 php中使用单例模式的原因 ...
- Arcgis Engine - 鹰眼(减少闪烁)
网上看到的代码,都是一个模样,经过不断调试,无意中效果就可以了.主要是在"鼠标拖动的时候",网上的代码的鹰眼效果,感觉坑爹死了,闪烁超级严重.主要原因是鼠标拖动的时候,进行时时更新 ...
- (五)JS学习笔记 - Sizzle选择器
Sizzle词法解析 sizzle对于分组过滤处理都用正则,其中都有一个特点,就是都是元字符^开头,限制匹配的初始,所以tokenize也是从左边开始一层一层的剥离. •可能会应用到正则如下: // ...
- (转)yum 和 apt-get 用法及区别
原地址:http://www.cnblogs.com/adforce/archive/2013/04/12/3017577.html 一般来说著名的linux系统基本上分两大类: 1 RedHat系 ...
- mysql 简单的增删改查语句
增加记录: 注:null关键字与auto_increment限制条件相结合,可以为字段自动赋值:字段必须全,且一一对应:字符型用单引号: mysql> insert into test valu ...
- 为CKEDITOR内容中图片加上 图片服务器路径
做网站的时候,前台和后台是分开的, 用了CKEDITOR上传图片,但是发现内容带图片的时候,前台Web浏览的时候是一个红X,一看路径不对,上传的到数据库中的是相对的虚拟路径,例如:<img al ...
- Jmeter实现WebSocket协议的接口和性能测试方法
WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex). 浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一 ...