基于python的最简单jQuery File Upload示例

video.js视频播放插件初试

妙音 posted @ 2015年3月25日 10:57 in jquery , 11956 阅读
最近在弄视频服务器,首先找播放插件。当看到video.js,非常清爽,并且它支持flv、mp4、webm、ogv播放格式,比较喜欢,所以选它.

简单示例

  • video.js官网
http://www.videojs.com/
  • 下载
wget http://www.videojs.com/downloads/video-js-4.12.5.zip
  • 解压
unzip video-js-4.12.5.zip
  • 简易web服务器
进入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
  • 修改demo.html文件
<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
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模块,也可以拖动播放. 
 

登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter