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 ...
随机推荐
- wpf 中自定义控件及其使用
主要有3个步骤: 1. 首先创建一个自定义的控件,该控件继承 TextBox namespace EzIntePark.Presentation.Common { /// <summary> ...
- Java基础知识强化34:String类之String类的转换功能
1. String类的转换功能 String[] split(String regex)//将字符串变成字符串数组(字符串切割) byte[] getBytes()//将字符串变成字节数组 char[ ...
- 206.反转单列表 Reverse Linked List
Reverse a singly linked list. 使用栈 public class Solution { public ListNode ReverseList(ListNode head) ...
- flv网页播放器播放失败
在IIS6.0上发布网站时,在路径正确的情况下,网页flv播放器还是无法播放flv视频的解决方法. 1.打开IIS6.0管理器,打开发布的网站,点击打开属性窗口. 2.在HTTP头选项里找到MIME类 ...
- string.Format 指定字符串宽度
语法: { index[,alignment][:formatString]} index,为索引号,不用多说. alignment,是一个带符号的整数,绝对值的大小表示字段的宽度. formatSt ...
- 使用idea将本地项目上传至github及clone
一.上传 1.firl->settings 设置git 2.firl->settings 填写自己的登录名和密码,可以使用test测试是否连接成功 3. 就搞定了.github会自动建立一 ...
- 动态代理写connection连接池Demo
public class JdbcUtil2 { //声明连接池<放到LinkedList中,操作其中对象的速度快 只需要改变连接> private static LinkedList&l ...
- vmware workstation 7.0官方下载安装
https://my.vmware.com/group/vmware/downloads#tab2 这里注册后可以下载到vmware的所有产品,可以下载到免费的vmplayer,以及收费的vmware ...
- JVM调优总结 + jstat 分析(转)
[转] JVM调优总结 + jstat 分析 JVM调优总结 + jstat 分析 jstat -gccause pid 1 每格1毫秒输出结果jstat -gccause pid 2000 每格2秒 ...
- MobileProject
iOS开源项目MobileProject功能点介绍 一:MobileProject简介 MobileProject项目是一个以MVC模式搭建的开源功能集合,基于Objective-C上面进行编写,意在 ...