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. List、Map、Set三个接口，存取元素时，各有什么特点？

    List  以特定次序来持有元素,可有重复元素:Set  无法拥有重复元素,内部排序(无序):Map 保存key-value值,value可多值.

  2. Python之路第一课Day7--随堂笔记(面向对象编程进阶...未完待续 )

    本节内容: 面向对象高级语法部分 静态方法.类方法.属性方法 类的特殊方法 反射 异常处理 Socket开发基础 作业:开发一个支持多用户在线的FTP程序 面向对象高级语法部分 一.静态方法 通过@s ...

  3. 一眼看懂深浅拷贝(clone)-C#

    这是使用的是序列化的方式实现深拷贝 [Serializable] class Person:ICloneable { /// <summary> /// 字符串在clone 中类似于值类型 ...

  4. [译] 理解PHP内部函数的定义（给PHP开发者的PHP源码-第二部分）

    文章来自:http://www.hoohack.me/2016/02/10/understanding-phps-internal-function-definitions-ch 原文:https:/ ...

  5. 剑指Offer面试题：11.打印1到最大的n位数

    一.题目:打印1到最大的n位数 题目:输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则打印出1.2.3一直到最大的3位数即999. 二.不同的解法 2.1 不假思索的解法 最容易想到的办 ...

  6. Hadoop学习笔记—12.MapReduce中的常见算法

    一.MapReduce中有哪些常见算法 (1)经典之王:单词计数 这个是MapReduce的经典案例,经典的不能再经典了! (2)数据去重 "数据去重"主要是为了掌握和利用并行化思 ...

  7. JavaScript利用replace更改所有符合条件字符

    利用replace替换字符串时,在正常使用情况下默认只能更改匹配到的第一个字符 var a=new String("fffffddd"); console.log(a.replac ...

  8. 2013 duilib入门简明教程 -- 前言(1)

        关于duilib的介绍就不多讲了,一来不熟,二来小伙伴们想必已经对比了多个界面库,也无需赘述.下面进入正题:     不看广告看疗效! 已有众多知名公司采用duilib做为界面库,如华为网盘. ...

  9. salesforce 零基础学习（四十八）自定义列表分页之Pagination基类封装 ※※※

    我们知道,salesforce中系统标准列表页面提供了相应的分页功能,如果要使用其分页功能,可以访问http://www.cnblogs.com/zero-zyq/p/5343287.html查看相关 ...

  10. iOS-UI-UI控件概述

    以下列举一些在开发中可能用得上的UI控件: IBAction和IBOutlet,UIView 1 @interface ViewController : UIViewController 2 3 @p ...