当前，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 文件

<!DOCTYPE HTML>

<html>

<body>

<video width="320" height="240" controls="controls">

  <source src="/i/movie.ogg" type="video/ogg">

  <source src="/i/movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

</body>

</html>

<video> 标签的属性

属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

【HTML5】video视频的更多相关文章

  1. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...

  2. HTML5: HTML5 Video(视频)

    ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...

  3. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

  4. HTML5 video 视频标签 常用属性

    最近在做手机端的 h5 页面的视频直播功能,用到了 Video 标签.其常用的属性有以下几个: src.poster.preload.autoplay.loop.controls.width.heig ...

  5. 让所有浏览器支持HTML5 video视频标签

    HTML5究竟需要多少种视频编码格式 当前,video 元素支持三种视频格式:Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编 ...

  6. HTML5 video 视频标签全属性详解

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  7. HTML5 video视频字幕的使用和制作

    一.video支持视频格式: 以下是三种最常用的格式 1. ogg格式:带有Theora视频编码(免费)+Vorbis音频编码的Ogg文件(免费) 支持的浏览器:firefox.chrome.oper ...

  8. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  9. html5 video标签屏蔽右键视频另存为的js代码-HTML5教程

    点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过   做HTML5的video标签,本身我们 ...

  10. HTML5 学习07——Video(视频)Audio(音频)

    <video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...

随机推荐

  1. motto7

    与其羡慕别人,还不如模仿别人的过程.

  2. c语言的头文件-不是c++类的头文件?

    下面的概述是参考的这篇文章:http://blog.csdn.net/bingxx11/article/details/7771437 c语言编程中也有,也需要头文件, 头文件不只是C++的类才需要! ...

  3. Linux时间不准确的问题![转]

    Linux时间不准确的问题![转] 安装完系统发现时间与现实时间相差+8小时,经分析由以下产生.我们在安装时选择的是上海,而centos5把bios时间认为是utc时间,所以+8小时给我们.这个时候的 ...

  4. kindle paperwhite折腾记

    在亚马逊官网上买了一个kindle paperwhite 一代(849元) , 打算再买个皮套, 淘宝店  http://detail.tmall.com/item.htm?spm=a230r.1.1 ...

  5. 第10章 使用Apache服务部署静态网站

    章节简述: 本章节中通过对比目前热门的网站服务程序来说明Apache服务程序的优势,并新增主机空间选购技巧小节. 了解SELinux服务的3种工作模式,小心谨慎的使用semanage命令和setseb ...

  6. ruby代码重构第一课

    (文章是从我的个人主页上粘贴过来的, 大家也可以访问我的主页 www.iwangzheng.com) 新手写代码的时候往往会出现很多重复的代码没有提取出来,大师高瞻远瞩总能提点很多有意义的改进,今天重 ...

  7. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  8. Nmap备忘单：从探索到漏洞利用（Part 4）

    这是我们的Nmap备忘单的第四部分(Part 1. Part 2. Part 3).本文中我们将讨论更多东西关于扫描防火墙,IDS / IPS 逃逸,Web服务器渗透测试等.在此之前,我们应该了解一下 ...

  9. HDU 1505 City Game （hdu1506 dp二维加强版）

    F - City Game Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submi ...

  10. Linux MySQL差异备份技巧

    MSSQL差异备份使用技巧 15 Apr 2013 所谓的差异备份,就是只备份最近一次备份之后到此次备份之前所增加的那一部分数据.打个比方我第N次备份后数据库存放的内容是ABCD,然后我第N+1次 备 ...