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 ...
随机推荐
- 使用Gird++打印出现“Retrieving the COM class factory for component with CLSID”的解决办法
我们的接口需要返回一个gird++生成PDF文件的二进制数据,在本地测试都很好,发布到服务器上一直出现“Retrieving the COM class factory for component w ...
- 解决MacOS Terminal打开慢的问题
用了Mac有一段时间了,突然发现Terminal打开奇慢,每次打开都显示logining...,打开大概要个五六秒的时间,以前打开都是瞬间打开的啊,这对于我们这种追求速度的程序员怎么受的了呢.开始一直 ...
- [C#] 后端post的请求方法
C# 模拟post请求方法 方法1: /// <summary> /// 模拟Post请求 /// </summary> /// <param name="ur ...
- isArray
判断一个玩意是不是数组: (1)新方法:Array.isArray(); (2)旧方法:toString(); <!doctype html> <html lang="en ...
- centos6.6安装mysql5.7.6(采用MySQL Yum Repository)—(先看最后一行)
在centos6.6系统上采用MySQL Yum Repository安装mysql5.7.6: 帮助文档:http://dev.mysql.com/doc/refman/5.7/en/linux-i ...
- DatePickerDialog 控制只选择年月或年或月
etXyLevelDate.setOnTouchListener(selectDateTouchListener()); /** * @desc 选择日期操作 * @param @return * @ ...
- android资料
http://bbs.51cto.com/thread-903936-1.html http://zhidao.baidu.com/question/195697097.html?sort=4& ...
- cf Magic Numbers
http://codeforces.com/contest/320/problem/A #include <cstdio> #include <cstring> using n ...
- hdu 畅通工程再续
http://acm.hdu.edu.cn/showproblem.php?pid=1875 #include <cstdio> #include <cstring> #inc ...
- 自制单片机之十二……AT89C2051烧写器的制做与调试
现在都用S52了,还用C2051干嘛!价格也差不多.但是C2051的体积要比S51.S52小很多,而且引脚只有20只,在一些简单的控制中,这些引脚已足够了,小的体积更具有优势些.但目前好像还没有支持在 ...