先简要概述一下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. IOS系列swift语言之课时二

    今天我们要讲的就是函数[对于函数,在最后面还有几道题,喜欢的博友可以看了自己做一下,和我交流一下] 当然这与我们的c语言还是有一定的共同之处的,对于有一些c语言或者是java基础的童鞋,我觉得是很容易 ...

  2. selenium结合最新版的sikuli使用

    sikuli安装,下载sikulixsetup-1.1.0.jar,地址:https://launchpad.net/sikuli/sikulix/1.1.0 在装有Java环境的机器上直接双击jar ...

  3. Go 作用

    Go语句的作用是表示一个batch(多条Tsql命令)的结束,并向sql server 提交batch,由于局部变量的作用域是基于batch的,所以,go语句限制局部变量的作用域在一个batch中. ...

  4. VMware Workstation and Hyper-V are not compatible. 解决方案

    VMware 和 Hyper-V 不能共存问题报错如下:VMware Workstation and Hyper-V are notcompatible. Remove the Hyper-V rol ...

  5. VS-项目发布失败的解决方案1

    报错信息 错误 1 未能将文件 Script\easyui\themes\gray\images\Thumbs.db 复制到 obj\Release\Package\PackageTmp\Script ...

  6. javascript技术难点（三）之this、new、apply和call详解

    4)    this.new.call和apply的相关问题 讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本 ...

  7. Huffman树进行编码和译码

    //编码#include<iostream> #include<cstdio> #include<cstring> #include<cstdlib> ...

  8. IOS学习之初识KVO

    什么是KVO? KVO(Key-Value Observing)键值观察,是一种通过对对象的某一个属性添加观察者,一旦这个属性值发生变化,就会通知当前观察者的一种机制. 该如何使用? 1.注册,指定被 ...

  9. SubSonic3.0使用例子

    前段时间开发的框架使用了SubSonic2.2以后,觉得开发效率提高了不少,后期维护起来也非常方便,不由的喜欢上了SubSonic.中间有想过升级到更高版本,但度娘一下就放弃了,只有极少的中文版说明, ...

  10. 使用maven来管理java项目

    初学maven,简单总结一下学习心得,若有不对的地方,欢迎各位大神给我指正~ 总结分为6个部分 maven概述 maven安装 maven项目结构和创建方法 maven配置文件settings.xml ...