网页中插入视频

在这里介绍两种方式在页面中插入视频，一种是以前常用的flash方式，一种是近几年流行起来的html5方式。

到底选择哪种方式就看你具体的项目：

• flash：兼容性比较好，视频会压缩，相比其他格式没有那么大，但是要知道的是视频越小质量就会越差的，而且flash方式插入的视频对移动端也不友好。如果要考虑移动端的话最好是用html5.
• html5：由于每个浏览器支持不同格式的视频，所以你必须在服务器放置好几个不同格式的视频，但是基本上公司都设有自己的服务器，硬盘的容量还是有保证的，毕竟可以还自己买硬盘加上。而在网络上传输的话由于视频的格式相比flash格式视频是大了些，占用带宽也会大，但是它的质量会更好些。

好了，说那么多，现在就进入主题吧。

也许你需要对手上的视频进行编码

你用摄像机拍摄的视频最初文件格式是由摄像机或视频编辑器软件（如 Adobe Premiere Pro CS4）决定的。这些原始文件不适合在互联网上传播。它们太大了，因为它们本来是被设计成通过DVD或其他介质传播的。

• 一般的数码相机视屏文件格式为AVI
• 手机：3GP，AVI,RMVB

要想在互联网上发行，这些文件就必须转换成用户容易下载和观看的格式。

各种各样的视频文件可以互相转换，这里推荐几款转换工具：

• 格式工厂
• Adobe Media Encoder CS4

它们两者的使用方法都可以直接拖进去然后选择“开始”即可。

对视频 文件编码（转换）需要花点时间，总的时间取决于视频的文件的大小，你要编码的格式和你电脑的可用资源。你可以把多个视频源文件添加到待编码队列中，可以针对每个编码任务进行配置，然后再开始编码。编码任务就会一个接一个的执行直到全部完成。

编码与格式的误区：

很多人将编码和格式误认为是同一个东西，人们总是以视频文件的后缀来唯一确定视频文件的支持程度。实际上，视频文件的后缀只是代表一种封装格式，而视频或音频的编码算法与封装格式本身无直接关系：同样的封装格式（同样的后缀名）可以封装不同编码算法的视频或音频。而视频播放设备是否支持视频播放，是不仅仅要看封装格式，还要看编码算法。

在页面中插入格式为FLA的视频

几乎所有的网民都安装了 Flash Player 多媒体播放器，所以可以放心使用地在页面中插入fla视频。

步骤：

1. 使用Adobe Media Encoder CS4/格式工厂软件把原始视频转换成FLV格式文件，这是一种压缩的格式，因此适用用于网络传输。
2. 使用Dreamweaver把处理后的视频文件添加到web中。

1：选择能适用于 Flash Player的输出格式，Adobe Media Encoder CS4中选择 FLV|F4V，格式工厂中选择FLV。

2：打开Dreamweaver点击插入------媒体-------插入FLV，选择你要添加的FLV视频。当把视频文件添加到web页面中时，Dreamweaver在页面中添加一个flash影片控制下载和播放（称为视频播放器）。页面中需要有足够的空间显示视频和视频播放器。

Dreamweaver中有两种不同的发布视频的方式（视频类型“选项），下面分别介绍。

累进式下载视频：首先将FLV文件下载到访问者的硬盘上，当下载了足够多的视频文件后就开始播放，它允许下载完成之前就开始播放视频文件。

• ”url“:flv文件地址；
• ”外观“：指定视频组件的外观，选择某项后，会在下面显示它的预览效果
• ；“宽度”，“高度”分别设置FLV的宽和高，单位是像素。你也可以点击后面的“检测大小”按钮来检测视频本来的大小；
• “限制高宽比”：保持FLV文件的宽度和高度比例不变；
• ”自动播放“：加载页面时会自动播放FLV文件；
• ”自动重新播放“：FLV文件循环播放；
• “确定”：将FLV文件插入到页面中。

优点：

• 服务器上不需要安装除了web服务器（apache或iis）以外的软件。
• 只要跟其他WEB资源一样，把视频传到服务器上即可。

缺点：

• 无法认证用户，不能管理和报告视频被下载的总量，也不能降低单个用户的可用带宽。
• 视频文件会被web浏览器缓存到用户电脑上，用户可以找到缓存里的视频文件并另存，这样就很难限制视频文件的传播。

然后打开你的站点会多出一个名为“Scripts"文件夹里面分别有两个文件夹

如果你觉得默认的视频控件不美观，你可以使用Flash创建一个更好的视频界面。然后把这个影片文件覆盖到Dreamweaver生成的界面expressInstall.swf文件即可。

浏览器打开效果如下图。

流视频：Flash Player链接到服务器，视频以流的形式传播，当收到信息后，会显示出来，然后就从内存中消除，它从不保存到用户磁盘上。

百科：视频流是指视频数据的传输，例如，它能够被作为一个稳定的和连续的流通过网络处理。因为流动，客户机浏览器或插件能够在整个文件被传输完成前显示多媒体数据。

• ”服务器URL“：输入服务器名称，应用程序名称和实例名称。
• ”流名称“：指定要播放的FLV文件名称。如name.flv。
• ”包括外观“：flv文件的宽度和高度的总宽度和总高度是算上外观。
• ”实时视频输入”：Flash Player将播放从Flash® Media Server流入的实时视频流。如果要在网页上启用流视频，那么是必须有访问Flash® Media Server的权限。
• “缓冲时间”：设置在视频开始播放之前进行缓冲处理所需要的时间（秒为单位）。

优点：

• 可以及时回放视频，而不需要等下载一定多的量后才播放。
• 可以验证用户，只有授予权限的用户才能访问视频。
• 可以根据用户和视频文件分配带宽。
• 视频文件不会被浏览器缓存，所以能控制传播。

在页面中插入html5视频

各浏览器对基于html5<video>的兼容性：

Codecs/container	IE	Firefox	Safari	Chrome	Opera	iPhone	Android
Theora+Vorbis+Ogg	·	3.5+		5.0+	10.5+	·	·
H.264+AAC+MP4	9.0+	·	3.0+	5.0+‡	·	3.0+	2.0+
WebM	9.0+*	4.0+		6.0+	10.6+	·	2.3+

<video poster="movie.jpg" controls>
  <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
  <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
  <p>This is fallback content</p>
</video>

浏览器会根据自己的支持度开选择具体加载那种格式的视频文件，当然服务器端必须对同一个视频提供多种格式的支持。这里要提供的格式如下：

1. WEBM
2. MP4
3. OGG

服务器端推荐使用nginx。我们是前端的也里就不需要我们来考虑了了哈。

旧版本的ie

在html5没有流行之前，通用的视频播放解决方案是flash和flv，但是移动端开始流行起来，我们开始喜欢用html5，一般的做法是通过检测agent是否支持html5来决定使用video还是flash，在ie8以下的浏览器，flash几乎是唯一的选择。

• 服务端根据不同的浏览器输出不同的html，如果支持html5就输出video+mp4和webm，否则就输出flash相关的标签和脚本。
• 使用html5shiv和html5-video使IE支持video标签。参考
• 将object内嵌在video中。

将object内嵌在video中：

<video id="movie" width="320" height="240" preload controls>
  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />
  <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />
  <source src="pr6.mp4" />
  <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf">
    <param name="movie" value="flowplayer-3.2.1.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="flashvars" value="config={'clip': {'url': 'http://wearehugh.com/dih5/pr6.mp4', 'autoPlay':false, 'autoBuffering':true}}" />
    <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>
  </object>
</video>

工具：

• 格式工厂目测不支持webm和ogg
• Easy HTML5 Video 支持多种格式转换并生成html
  

video.js

现在介绍下第三种插入视频方式----利用插件video.js

有关它的介绍就不多说了，网上都有很多了。

我们先去它的官网，把这个插件下载下来。

所需的文件都在“dist”这个文件里面，video.js插件界面用全部用css制作，所以“font”界面文件，“lang”提示语言（默认用的是英文）

然后：

1. “font”，“lang”文件夹和“video-js.css”，“video.js”复制到我们的项目文件夹中，并在html文件的头部应用样式和脚本。

   <link href="move/video-js.css" rel="stylesheet" type="text/css">
     <script src="move/video.js"></script>

2. 然后在放置视频的地方放置如下代码 

     <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
         poster="http://video-js.zencoder.com/oceans-clip.png"
         data-setup="{}">
       <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
       <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
       <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
       <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
       <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
       <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
     </video>
   

   
   

初步效果如下

注意：

如果你的界面图标没有出来，那就是你的“font"文件的引用路径有问题，这时请打开你的“video-js.css”样式表进行修改

     3.现在我们把提示文字除掉，修改第二步html，把下面两句删除即可：

 <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
 <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->

补充：

该插件是默认不自动播放视频，如果要打开网页就自动播放视频，那么请在”video“标签中增加”autoplay="true""即可

最终代码

 <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
      poster="http://video-js.zencoder.com/oceans-clip.png"
      data-setup="{}">
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />

    <p class="vjs-no-js">您的浏览器不支持该视频文件</p>
  </video>

参考文献：

• 浅谈html5网页内嵌视频
• Web页面中添加视频
  

<video id="movie" width="320" height="240" preload controls>
  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />
  <source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />
  <source src="pr6.mp4" />
  <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf">
    <param name="movie" value="flowplayer-3.2.1.swf" />
    <param name="allowfullscreen" value="true" />
    <param name="flashvars" value="config={'clip': {'url': 'http://wearehugh.com/dih5/pr6.mp4', 'autoPlay':false, 'autoBuffering':true}}" />
    <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p>
  </object>
</video>

工具：