在网站中嵌入VideoJs视频播放器

一个博客难免需要引用视频来说明内容，但想要自己来实现一个视频播放器是不是一时半会就能完成的，更重要的是这需要对视频播放技术有一定的了解。于是自然而然的有人会想到开源项目。

html5已经原生支持视频元素

而我正在使用地便是video.js。它能够控制基本的播放器样式，支持mp4、webm、ogv视频格式，也能够插入字幕，基本上能够满足常用需求。 video.js也使用了html5的特性，如果浏览器不支持html5的话，想要播放视频还得用flash，虽然flash由于资源的消耗广为诟病，但是由于国内仍然有很大一部分浏览器不支持html5，主流的互联网公司的播放器仍为flash。 使用video.js很方便，只需要少许几部就可以完成。

第一步 包含头文件

这包括视频播放器所必须的控制文件javascrip以及播放器样式css文件。你可以选择使用免费的CDN服务，也可以将文件下载到你的服务器中。但显 然直接使用CDN服务更为方便，如果你选择下载项目文件的话，还需要处理播放器所用到的一些图片和字体，意味着需要重新指定这些文件的位置。

<link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.9/video.js"></script>

第二步 编写html网页的video元素

编写html网页的video元素关键在于设置video的属性。通过设置video的属性可以控制视频播放器按你的要求展示。 class属性：第一个参数video-js是必须的，这个属性让video.js知道，要让它来控制这个视频的样式以及功能； 第二个参数用来说明播放器的外观，默认只提供了一种外观“vjs-default-skin”，如果你需要自定义外观就可以将他设置为其他的值 有点让人不习惯的是，video.js的作者认为播放键放在中间会遮住内容，于是把它移到了左上方，但这实在有违对称的美感。不过幸好，它提供了一个参数将播放键改回中央：“vjs-big-play-centered” width和height参数用来指示播放器的长和高，没什么可说的 有preload参数来控制视频的加载，其值为”auto”时视频随网页自动自动加载，”none”时不预先加载 它还允许设置视频播放前的封面，当然如果你不指定会是视频的第一帧，其值为封面图片的地址。 这是一个video.js提供的样例，一般不需要什么修改。

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup=‘{"example_option":true}‘>
   <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‘ />
</video>

第三步 设置字幕

对于外文的视频，也许需要嵌入字幕，或者是在视频里加入一些说明，我找了老半天最终发现，video.js原生就支持字幕。它支持的是html5的标准字 幕格式WebVTT，文件后缀名为vtt，这个格式和最常见的srt格式很像，或者说将srt格式的字幕经过一步修改就可以成为WebVTT格式：在第一 行插入

WebVTT WebVTT格式对srt格式进行了少许扩展，使得它能够与网页相一致的方式方便地显示字幕。 其中一个扩展是控制字幕文字的样式，比如加粗、加下划线以及斜体，这完全html的语法相一致

粗体文本
<b>Lorem ipsum</b>
斜体文本
<i>dolor sit amet</i>
带下划线的文本
<u>consectetuer adipiscing</u> 第二个扩展在于对字幕显示位置的控制。 默认是居中于底侧，如果没有特殊要求就没必要折腾了。根据不同的设置，字幕可以放置于屏幕的各个位置，可以向通常那样横着显示，也可以竖着显示。
D:vertical / D:vertical-lr
垂直地显示文本而不是水平的。 它也指定文本是增长到左边（ vertical）还是右侧（ vertical-lr ）
L:X / L:X%
一个数字或百分比。 如果是一个百分点，那么它指从框架顶部开始的位置。如果是一个数字，它表示会是在多少行。
T:X%
视频上的水平文字位置。T:100% 表示文本会放在视频的右侧。

要使用这些设置，像下面这样把它们放在时间设置的旁边： 00:00:01.000 –> 00:00:10.000 A:middle T:50% 00:00:01.000 –> 00:00:10.000 A:end D:vertical 00:00:01.000 –> 00:00:10.000 A:start T:100% L:0%

第四部 高级设置

不喜欢，播放器的默认界面怎么办，那如何来更改呢？要实现这些更改，就需要对CSS和javascript有更深入的了解了。在这方面我也是新手，但可以举个例子，我是如何修改播放器字幕默认样式的。 要修改默认样式首先必须解决一个问题，使用定制的界面还能使用官方所提供的CDN服务吗？答案是可以的，但必须得使用一个不那么优雅的方式，重载那些样式的值。
如果你使用的是chrome或firefox浏览器，你可以用鼠标右键点中要修改样式的部分（这里是字幕所在位置），选择审查元素，便可方便查看所在元素 的id或是class。有了元素的定位方式后，在用其在vjs.zencdn.net/4.9/video-js.css文件中搜索，看一看都有哪些属 性，默认值是什么样。
比方说我想修改字幕的字体和颜色，只需要将以下代码插入网页头部的末尾就好了，必须要在引用外部样式的后边，否则就不会有效果。