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. (原).NET程序加入多语言包解决方案工具，超级棒

    Multi-Language Add-In Version 5.04.0088 for Visual Studio 2013 安装包:http://www.jollans.com/SetupMulti ...

  2. Allegro之Win7下不能实时刷新操作显示的问题

    Allegro软件主界面下: setup-> user preferences-> display->opengl中选定disable_opengl,即关掉OpenGL后,再重新启动 ...

  3. checkbox选中状态不被改变

    让它的状态只能看不能改变,加上onclick="return false;". 也可以disabled="true";但是这个颜色变淡了; <input ...

  4. 数据库之SQL编程

    定义局部变量 declare @num int 途径一: 途径二: set 和select赋值方式的区别 唯一区别,如果从数据库表中获取数据,只能用 select ) select @name =st ...

  5. angularjs 自定义服务的三种方式

    angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...

  6. 开始研究unreal4了

    最后一个周末了,昨天去做了许多事,算是对最近的一些整理和了结吧.早上广州下雨了,9点起来吃了早餐之后又睡了1个小时.中午吃了泡面,幸福感max.晚上煎了菜脯蛋和肉卷,拖着拉着把<旋风十一人> ...

  7. wpf之mvvm基类

    当我们用MVVM设计模式的时候要实现INotifyPropertyChanged,每次都要实现这个接口比较麻烦,所以基类的作用就体现出来了.代码如下:   1 2 3 4 5 6 7 8 9 10 1 ...

  8. windows下 安装Kali Linux到 U盘的方法

    作者:玄魂工作室 \ 2016年10月20日 把Kali Linux安装到U盘好处很多,可以从U盘启动使用整个电脑的硬件资源, 可以随身携带,减少对自己电脑的影响. 今天要给大家讲的是如何在windo ...

  9. .net基础复习之一

    一.             ADO 与ADO.NET两种数据访问方式区别? 1. ADO与ADO.NET简介ADO与ADO.NET既有相似也有区别,他们都能够编写对数据库服务器中的数据进行访问和操作 ...

  10. react + iscroll5 实现完美 下拉刷新，上拉加载

    经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能. 一开始直接采用了react-iscroll插件,它是基于iscroll插件开发的组件.但是开发过程中,发现 ...