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

一个博客不免须要引用视频来讲明内容，但想要本身来实现一个视频播放器是否是一时半会就能完成的，更重要的是这须要对视频播放技术有必定的了解。因而天然而然的有人会想到开源项目。一个不错的选择即是video.js，它的功能全面，够控制基本的播放器样式，支持mp四、webm、ogv视频格式，也可以插入字幕，基本上可以知足经常使用需求，界面也很美观。 video.js也使用了html5的特性，若是浏览器不支持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文件中搜索，看一看都有哪些属 性，默认值是什么样。
比方说我想修改字幕的字体和颜色，只须要将如下代码插入网页头部的末尾就行了，必需要在引用外部样式的后边，不然就不会有效果。

<style type="text/css">
.video-js .vjs-subtitles{
  font-family: "lucida grande", "lucida sans unicode", lucida, "Helvetica Neue", helvetica, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #fc6;
  font-size: 2em;
  line-height: 1em;
}
</style>

 最终的效果是这样子的：