视频格式

当前,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 视频使用的更多相关文章

  1. 【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直 ...

  2. premere cs4绿色版 安装 并且 视频导出 讲解

    最近室友,开始在玩视频剪辑,用的是 premere cs4 绿色版.让他遇到的最大问题也是我之前遇到的最大问题,就是视频导出. 所以我在这里上传一套自己的一点点经验吧. 接下来,我就总结一下 我是怎么 ...

  3. Power BI官方视频(3) Power BI Desktop 8月份更新功能概述

    Power BI Desktop 8月24日发布了更新版本.现将更新内容翻译整理如下,可以根据后面提供的链接下载最新版本使用. 1.主要功能更新 1.1 数据钻取支持在线版 以前的desktop中进行 ...

  4. 视频 - 在 VirtualBox 中部署 OpenStack

    大家新年好,CloudMan 今天给大家带来一件新年礼物. 一直以来大家都反馈 OpenStack 学习有两大障碍:1. 实验环境难搭2. 体系复杂,难道大今天我就先帮大家解决环境问题.前两天我抽空在 ...

  5. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  6. html5 与视频

    1.视频支持格式. 有3种视频格式被浏览器广泛支持:.ogg,.mp4,.webm. Theora+Vorbis=.ogg  (Theora:视频编码器,Vorbis:音频编码器) H.264+$$$ ...

  7. 基于RN开发的一款视频配音APP(开源)

    在如今React.ng.vue三分天下的格局下,不得不让自己加快学习的脚步.虽然经常会陷入各种迷茫,学得越多会发现不会的东西也被无限放大,不过能用新的技术作出一些小项目小Demo还是会给自己些许自信与 ...

  8. 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频

    目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...

  9. duang~免费的学习视频来啦:学霸君之全栈测试

    学霸君向童鞋们推荐一款 同名学霸学习 视频教程 重点是完全免费收看学习噢!!! 今天 学霸君推荐腾讯课堂的学霸君之全栈测试 复制下方链接至腾讯课堂中报名学习 https://ke.qq.com/cou ...

  10. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

随机推荐

  1. linux cat /proc/cpuinfo

    #cat /proc/cpuinfo processor : 0 #逻辑处理器的唯一标识符 vendor_id : AuthenticAMD #CPU厂商ID信息,如果处理器为英特尔处理器,则vend ...

  2. (一)《Java编程思想》学习——按位运算符、移位运算符

    (第三章) (一)按位运算符 按位逻辑运算符有: “与”(AND)        & 1&1=1;1&0=0;0&0=0 “或”(OR) | 1|1=1;1|0=1;0 ...

  3. C#简单注册表操作实例

    1.简介操作 //设置注册值 private void Button_Click(object sender, RoutedEventArgs e) { //路径及间隔符号要正确 //1.如果指定路径 ...

  4. HDU 2896 病毒侵袭 (AC自动机)

    这题模板题.............但是竟然要去重........调试了半天才发现.................... #include <cstdio> #include <i ...

  5. MYSQL常见出错mysql_errno()代码解析

    如题,今天遇到怎么一个问题, 在理论上代码是不会有问题的,但是还是报了如上的错误,把sql打印出來放到DB中却可以正常执行.真是郁闷,在百度里面 渡 了很久没有相关的解释,到时找到几个没有人回复的 & ...

  6. 【转】对ARM堆栈的理解

    对ARM堆栈的理解 堆栈严格来说应该叫做栈,栈(Stack)是限定仅在一端进行插入或删除操作的线性表.因此,对栈来说,可以进行插入或删除操作的一端端称为栈顶(top),相应地,另一端称为栈底(bott ...

  7. Selenium2Library关键字

    对Selenium2Library关键字的整理和翻译.英文不好,仅供参考. 1.Add Cookie [ name | value | path=None | domain=None | secure ...

  8. Android调用系统的Activity、ContentProvider、Service、Broadcast Receiver

    Intent-------->Action |_____________Activity------------------------------->Intent Action |___ ...

  9. Delphi中多线程下使用使用 UniDAC+MSSQL 需要注意的问题(连接前调用CoInitialize)

    一般解决方法是在线程开始启用 CoInitialize(nil),线程结束调用 CoUninitialize .如果你使用多种数据库连接,比如三层中经常切换到MSSQL和Oracle,我们只需在判断 ...

  10. 解决MVC项目中,静态html 未找到时候,404的跳转

    using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using ...