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 ...
随机推荐
- linux cat /proc/cpuinfo
#cat /proc/cpuinfo processor : 0 #逻辑处理器的唯一标识符 vendor_id : AuthenticAMD #CPU厂商ID信息,如果处理器为英特尔处理器,则vend ...
- (一)《Java编程思想》学习——按位运算符、移位运算符
(第三章) (一)按位运算符 按位逻辑运算符有: “与”(AND) & 1&1=1;1&0=0;0&0=0 “或”(OR) | 1|1=1;1|0=1;0 ...
- C#简单注册表操作实例
1.简介操作 //设置注册值 private void Button_Click(object sender, RoutedEventArgs e) { //路径及间隔符号要正确 //1.如果指定路径 ...
- HDU 2896 病毒侵袭 (AC自动机)
这题模板题.............但是竟然要去重........调试了半天才发现.................... #include <cstdio> #include <i ...
- MYSQL常见出错mysql_errno()代码解析
如题,今天遇到怎么一个问题, 在理论上代码是不会有问题的,但是还是报了如上的错误,把sql打印出來放到DB中却可以正常执行.真是郁闷,在百度里面 渡 了很久没有相关的解释,到时找到几个没有人回复的 & ...
- 【转】对ARM堆栈的理解
对ARM堆栈的理解 堆栈严格来说应该叫做栈,栈(Stack)是限定仅在一端进行插入或删除操作的线性表.因此,对栈来说,可以进行插入或删除操作的一端端称为栈顶(top),相应地,另一端称为栈底(bott ...
- Selenium2Library关键字
对Selenium2Library关键字的整理和翻译.英文不好,仅供参考. 1.Add Cookie [ name | value | path=None | domain=None | secure ...
- Android调用系统的Activity、ContentProvider、Service、Broadcast Receiver
Intent-------->Action |_____________Activity------------------------------->Intent Action |___ ...
- Delphi中多线程下使用使用 UniDAC+MSSQL 需要注意的问题(连接前调用CoInitialize)
一般解决方法是在线程开始启用 CoInitialize(nil),线程结束调用 CoUninitialize .如果你使用多种数据库连接,比如三层中经常切换到MSSQL和Oracle,我们只需在判断 ...
- 解决MVC项目中,静态html 未找到时候,404的跳转
using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using ...