先简要概述一下video标签：

video：嵌入视频到页面中

1. 声明video标签

单个视频的时候使用src：

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>

  Your browser does not support the <code>video</code> element.

</video>

多个视频的时候使用<source>标签：

<video controls>

  <source src="SampleVideo.ogv" type="video/ogv">

  <source src="SampleVideo.mp4" type="video/mp4">

  Your browser does not support the <code>video</code> element.

</video>

浏览器会先去识别是否支持Ogg格式文件，如果不支持，就读取MPEG-4的文件。同时可以规定编码格式，如下：

<video controls>

  <source src="SampleVideo.ogv" type="video/ogv; codecs=dirac, speex">

  Your browser does not support the <code>video</code> element.

</video>

2. 视频格式

不同的浏览器支持的格式不同参考Media formats supported by the audio and video elements：

经验总结：

通常嵌入的视频无法播放是2个原因，第一个是视频格式浏览器不支持，第二个原因是没有安装播放支持的插件。因为内嵌视频实际上会耗费很大资源，同时存在十分严重的兼容性问题，所以通常鼓励的事将视频嵌入到第三方播放网站执行。

提供几个方便实用的网站：

1. flowplayer：上传文件之后，自动生成文件链接，可以直接嵌入html页面中，支持HTML5（不过要付费。。。）

例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>video</title>

</head>

<body>

    <video controls>

        <source type="application/x-mpegurl" src="http://cdn.flowplayer.org/202777/96295-sunsetthroughsomeflowers2W1tsD5OeH.m3u8">

        <source type="video/webm" src="http://cdn.flowplayer.org/202777/96295-sunsetthroughsomeflowers2W1tsD5OeH.webm">

        <source type="video/mp4" src="http://cdn.flowplayer.org/202777/96295-sunsetthroughsomeflowers2W1tsD5OeH.mp4">

    </video>

</body>

</html>

新建页面，执行代码，可以看到支持HTML5的浏览器可以进行视频播放。

2. Video for Everybody: 兼容各大浏览器中关于video的问题，同时有一些关于视频压缩格式的建议

3. mediaelementjs: 推荐的补丁

4. vid.ly: 在线转换视频网站（只能免费转换一个视频）

4. online-convert：在线转换视频网站

参考资料：

1. MDN:HTMLVideoElement

2. MDN:Using HTML5 audio and video

3. MDN：<video>

4. html5please

html5 video的更多相关文章

  1. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

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

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

  3. 隐藏原生html5 video controls

    隐藏原生html5 video controls 凤凰视频焦点项目mobile html5播放器测试时bug,由于没有用原生的controls而是自己写的custom controls,虽然设置了co ...

  4. HTML5 <video> - 使用 DOM 进行控制

    HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,&l ...

  5. 移动端HTML5<video>视频播放优化实践[转]

    http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...

  6. ie8及ie8以下支持html5 video标签

    html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...

  7. HTML5 Video(视频)

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

  8. Html5 Video 实现方案

    来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...

  9. Chrome/Chromium HTML5 video 视频播放硬件加速

    Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的C ...

  10. HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速

    Introduction Video decode (e.g. YouTube playback) and encode (e.g. video chat applications) are some ...

随机推荐

  1. Security2:Create User

    User 用于访问DB Users based on logins in master (This is the most common type of user.) User based on a ...

  2. Java之控制反转和依赖注入

    1.简介 依赖注入和控制反转,目的是为了使类与类之间解耦合,提高系统的可扩展性和可维护性,下面通过一个例子来引入这一概念. 2.案例 1)一般情况下的类耦合 Main.java public clas ...

  3. WPF MVVM下做发送短信小按钮

    最近做一个项目,因为涉及到注册,因此需要发送短信,一般发送短信都有一个倒计时的小按钮,因此,就做了一个,在此做个记录. 一.发送消息 没有调用公司的短信平台,只是模拟前台生成一串数字,将此串数字输出一 ...

  4. 区分元素特性attribute和对象属性property

    × 目录 [1]定义 [2]共有 [3]例外[4]特殊[5]自定义[6]混淆[7]总结 前面的话 其实attribute和property两个单词,翻译出来都是属性,但是<javascript高 ...

  5. Detach Volume 操作 - 每天5分钟玩转 OpenStack（55）

    上一节我们成功地通过 attach 操作为 instance 添加了 volume,而与之相对的操作是 detach,就是将 volume 从 instance 上卸载下来. 下图是 Detach 操 ...

  6. IDDD 实现领域驱动设计－SOA、REST 和六边形架构

    上一篇:<IDDD 实现领域驱动设计-架构之经典分层> 阅读目录: SOA-面向服务架构 REST 与 RESTful 资源(Resources) 状态(State) 六边形架构 DDD ...

  7. 分享一段数据库中表数据更新SQL

    应用场景 我们在应用程序开发的时候,经常会遇到这样的一种情况:附属表更新了,主表的数据没有更新,这个关联表不只是外键的关联(通过附属表 ID 关联),主表中还会存在一些附属表的字段,这样一般做的目的是 ...

  8. mysql default unix_timestamp(now())

    按照mssql的创建方式,去创建mysql的默认值时间戳是不能被允许的,例如下面代码: CREATE TABLE USERINFO( CREATETIME INT NOT NULL DEFAULT U ...

  9. 1Z0-053 争议题目解析486

    1Z0-053 争议题目解析486 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 486.You execute the following Recovery Manager (R ...

  10. Apworks框架实战（一）：Apworks到底是什么？

    简介 Apworks是一款基于Microsoft .NET的面向领域驱动的企业级应用程序开发框架,它适用于以领域模型为核心的企业级系统的开发和集成.Apworks不仅能够很好地支持经典的分层架构,而且 ...