最近在弄视频服务器,首先找播放插件。当看到video.js,非常清爽,并且它支持flv、mp4、webm、ogv播放格式,比较喜欢,所以选它.
简单示例
wget http://www.videojs.com/downloads/video-js-4.12.5.zip
unzip video-js-4.12.5.zip
进入video-js目录,使用python,运行一个简易服务器
➜ video-js python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
在浏览器访问http://localhost:8000/demo.html 即可看到demo
demo.html文件介绍
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<!-- Chang URLs to wherever Video.js files will be hosted -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
<!--支持播放flv -->
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<!-- poster封面 preload预加载 -->
<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>
</body>
</html>
从上可看出,支持四种播放格式flv、mp4、webm、ogv
测试自己的视频
找个mp4视频,然后转换为flv、ogv、webm、swf格式.
➜ video-js ls -sh video
总用量 303M
25M demo.flv 96M demo.ogv 40M demo.webm
120M demo.mp4 25M demo.swf
<source src="/video/demo.flv" type='video/x-flv' />
<!--
<source src="/video/demo.ogv" type='video/ogg' />
<source src="/video/demo.mp4" type='video/mp4' />
<source src="/video/demo.webm" type='video/webm' />
-->
改成自己的视频后,发现播放非常慢. 由于视频在本地,这种情况不正常. 最后发现由于视频文件放在web服务器中,web服务器处理静态数据很慢.
nginx静态资源服务器
有没有更快的访问方式?想到nginx处理静态数据非常快.
nginx的安装就不说了
location / {
root /home/wyq/workspace/video-js/;
#root html;
index index.html index.htm;
}
启动nginx之后,通过它访问demo.html,发现此时播放视频非常流畅.
假如视频把网页速度占了,怎么限制视频速度?在可以在nginx中添加如下参数.
location / {
root /home/wyq/workspace/video-js/;
limit_rate_after 5m; #下载5M以后开始限速
limit_rate 512k; #每个链接速度限制为512K
#root html;
index index.html index.htm;
}
另外找资料发现,网上说播放视频需要http_flv_module模块才支持拖动播放flv视频. 按照上面方法,没有安装flv模块,也可以拖动播放。想了下原因,可能我用的是nginx1.6,比较新,不需要安装flv模块,也可以拖动播放.