HTML5 提供了展示视频的标准

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

一、如何在html5中显示视频

视频格式有限制：目前支持这三种格式

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

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

            <source src="img/mov_bbb.ogg" type="video/ogg">

            <source src="img/mov_bbb.mp4"  type="video/mp4">

            Your browser does not support the video tag.

        </video>

    </body>

</html>

.ogg格式文件，适用于firefox、opera以及chrome浏览器。

确保Safari浏览器，视频格式必须是MPEG4格式。

在<source>写了两个，浏览器将使用第一个可识别的格式，如果都不识别的话，就只能显示”Your browser does not support the video tag.“

注意：Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。

附录：1、在Hbuilder中的文件样式

2、在chrome中测试

3、在IE9中测试

4、在IE8中的情况

HTML5 视频（一）的更多相关文章

  1. HTML5视频Video 音频Audio

    视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...

  2. [转] Android 4.4中播放HTML5视频<video>的Bug

    近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...

  3. html5视频全频播放

    html5视频全频播放 旋转90度 对video进行缩放 修正position 效果还凑合 代码 $(media).rotate({ // angle: 90, duration: 100, anim ...

  4. HTML5视频标签video

    现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...

  5. HTML5 视频规范简介

    HTML5 视频规范简介  创建于 2013-02-03, 周日 00:56  作者 白建鹏 HTML 一词是“超文本标记语言”(Hyper-Text Markup Language)的缩写,是用于描 ...

  6. 使用jQuery播放/暂停 HTML5视频

    文章来自:http://blog.okbase.net/jquery2000/archive/4485.html 我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后 ...

  7. html5 视频

    HTML规定了一种通过video元素来包含视频的标准方法 一段HTML5视频不可缺少的元素有video.controls等.. 直到现在,仍然不存在一项在网页上显示视频的标准. 大多数视频是通过fla ...

  8. 怎样获取HTML5视频的持续时间

    HTML5视频的Bigger体验是非常令人振奋的,非常easy的道理,不用载入和依赖烦人的Flash或其它第三方插件来播放视频,也是大功一件.我们能够通过自己定义控件对视频进行显示和操控,当中一个常见 ...

  9. 使用 video.js 开发 HTML5 视频页面

    时间 2015-05-13 17:11:58 The GIS Guy 原文  http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...

  10. 使用HTML5视频事件示例

    <!DOCTYPE html > <html > <head> <title>Video events example</title> &l ...

随机推荐

  1. 网站iis日志分析工具

    1.下载log parser https://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=24659 2.进 ...

  2. 输入框三种输入方式（selenium webdriver 干货）

    在机票预定的页面,输入出发城市和到达城市输入框的时候, 发现直接使用sendkeys不好使, 大部分情况出现输入某城市后没有输入进去, 经过几天的研究,发现可以采取三种方式: 1. 先点击输入框,待弹 ...

  3. RSA密钥生成与使用

    RSA密钥生成与使用 openssl生成工具链接:http://pan.baidu.com/s/1c0v3UxE 密码:uv48 1. 打开openssl密钥生成软件打开 openssl 文件夹下的  ...

  4. ORM数据层框架的设计热点：更新指定的列的几种设计方案

    ORM框架的定义:对象-关系映射(Object/Relation Mapping,简称ORM) 常见的是:数据库结构=>映射Object(实体属性)=>基于实体类的操作. 还有一种:数据库 ...

  5. 简单明了区分escape、encodeURI和encodeURIComponent

    一.前言 讲这3个方法区别的文章太多了,但是大部分写的都很绕.本文试图从实践角度去讲这3个方法. 二.escape和它们不是同一类 简单来说,escape是对字符串(string)进行编码(而另外两种 ...

  6. C++11 并发指南七(C++11 内存模型一：介绍)

    第六章主要介绍了 C++11 中的原子类型及其相关的API,原子类型的大多数 API 都需要程序员提供一个 std::memory_order(可译为内存序,访存顺序) 的枚举类型值作为参数,比如:a ...

  7. SQL Server 中的事务与事务隔离级别以及如何理解脏读, 未提交读,不可重复读和幻读产生的过程和原因

    原本打算写有关 SSIS Package 中的事务控制过程的,但是发现很多基本的概念还是需要有 SQL Server 事务和事务的隔离级别做基础铺垫.所以花了点时间,把 SQL Server 数据库中 ...

  8. Linux的原子操作与同步机制

    Linux的原子操作与同步机制   .进程1执行完“mov eax, [count]”后,寄存器eax内保存了count的值0.此时,进程2被调度执行,抢占了进程1的CPU的控制权.进程2执行“cou ...

  9. [LeetCode] Interleaving String - 交织的字符串

    题目如下:https://oj.leetcode.com/problems/interleaving-string/ Given s1, s2, s3, find whether s3 is form ...

  10. 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC

    系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...