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

一个博客难免需要引用视频来说明内容,但想要自己来实现一个视频播放器是不是一时半会就能完成的,更重要的是这需要对视频播放技术有一定的了解。于是自然而然的有人会想到开源项目。一个不错的选择便是video.js,它的功能全面,够控制基本的播放器样式,支持mp4、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>

 最终的效果是这样子的:

posted on 2015-02-27 23:16 meelo 阅读(...) 评论(...) 编辑 收藏

统计