先简要概述一下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. python网络编程——IO多路复用之epoll

    1.内核EPOLL模型讲解     此部分参考http://blog.csdn.net/mango_song/article/details/42643971博文并整理 首先我们来定义流的概念,一个流 ...

  2. C标准I/O库函数与Unbuffered I/O函数

    一.C标准I/O库函数.Unbuffered I/O函数 1. C标准I/O库函数是如何用系统调用的 fopen(3) 调用open(2)打开制定的文件,返回一个文件描述符(一个int类型的编号),分 ...

  3. JAVA实现发送电子邮件

    相信大家对于网站也好,手机app也好,用户注册时,需要进行邮箱验证的功能特别好奇吧,本篇我将带领大家一起实现一下这个简单而又神奇的小功能,让我们的应用也可以加入这些神奇的元素.废话不多说,下面开始我们 ...

  4. 如何设置UILabel中的字体的间距

    cell.teacherDescriptionLabel.text = content; cell.teacherDescriptionLabel.textAlignment = NSTextAlig ...

  5. 【Java心得总结五】Java容器上——容器初探

    在数学中我们有集合的概念,所谓的一个集合,就是将数个对象归类而分成为一个或数个形态各异的大小整体. 一般来讲,集合是具有某种特性的事物的整体,或是一些确认对象的汇集.构成集合的事物或对象称作元素或是成 ...

  6. 利用Eclipse使用Java OpenCV（Using OpenCV Java with Eclipse）

    最近在上计算机视觉这门课程用到了OpenCV,于是找到了"Using OpenCV Java with Eclipse"这篇博文,是英文的,我将它翻译如下与大家分享 正文: 从2. ...

  7. 浅析JS中的模块规范（CommonJS，AMD，CMD）

    如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧,这些规范到底是啥东西,干嘛的. 一.CommonJS ...

  8. spring-boot - demo

    当我发现把最初的一个demo整的面目全非的时候,突然想要找一个简单的demo做测试,发现与其在原来的上面该,还不如新建一个demo. 官方入门:http://projects.spring.io/sp ...

  9. TypeError: invalid 'in' operand obj

    尝试在程序去访问远程的Web API,它在运行时,出现异常: TypeError: invalid 'in' operand obj 由于从服务器返回的数据是json.当我们需要得到这些数据时,还得需 ...

  10. 基于DevExpress的Winform程序安装包的制作

    在我们做系统开发的时候,都会面临一个安装包制作的问题,如何把我们做好的系统,通过安装包工具整合成一个安装包给客户进行安装.安装包的优势就是一步步安装就可以了,不用复制一大堆文件给客户,还怕缺少那个文件 ...