【视频播放】Jplayer视频播放器的使用

来源：互联网发布：opentsdb java开发编辑：程序博客网时间：2024/04/29 06:13

如果你正在寻找一个网页上播放视频的插件，或者你原先网页上用的视频插件被墙了（比如jwplayer），那么就来看看下面的介绍吧

当楼主得知原先用的视频插件jwplayer所访问到的一个cdn地址失效了，并且通过网上的方法并不能修复jwplayer，使它能正常播放视频，楼主的内心是崩溃的。

但是当把Jplayer调试完成后，终于找到了一款好的替代的插件。

1、首先Jplayer的官网在这里：

http://www.jplayer.org/

2、其次，对于楼主而言，看一个视频插件能不能用，有以下几步：

（1）用不同的浏览器打开官网，通常官网首页都一个展示用的例子，如果展示的例子在常用浏览器里无法播放，那么就不继续研究这个播放器的使用方法了

（2）将官网demo下载到本地，把例子中的视频文件替换成本地自己的文件（比如某个MP4文件），在各种浏览器里面打开demo，如果本地的静态视频在常用浏览器里无法播放，那么也就到此结束

（3）将步骤（2）中的文件替换成通过动态读取方式，比如php读取本地某个文件的流，在各种浏览器里面打开demo，如果本地的静态视频在常用浏览器里无法播放，那么也就到此结束

（4）将步骤（3）中的php读取本地某个文件的流，替换成php以curl方式读取文件流，然后测试在各浏览器中的效果

P.S. 如果只是播放静态文件，那么可以在步骤（2）就得出结论了

3、Jplayer根据2中的步骤，（2）中，除了ie7、8无法支持外，（3）和（4）的具体实现如下：

如果使用以下demo，需下载资源包一起使用

http://download.csdn.net/detail/snow_finland/8692243

前端部分：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Demo</title><link href="dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="lib/jquery.min.js"></script><script type="text/javascript" src="dist/jplayer/jquery.jplayer.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#jquery_jplayer_1").jPlayer({ready: function () {$(this).jPlayer("setMedia", {m4v: "test1.php"});},play: function() { // To avoid multiple jPlayers playing together.$(this).jPlayer("pauseOthers");},swfPath: "dist/jplayer",supplied: "m4v",globalVolume: true,useStateClassSkin: true,autoBlur: false,smoothPlayBar: true,keyEnabled: true});});</script></head><body><div id="jp_container_1" class="jp-video jp-video-270p" role="application" aria-label="media player"><div class="jp-type-single"><div id="jquery_jplayer_1" class="jp-jplayer"></div><div class="jp-gui"><div class="jp-video-play"><button class="jp-video-play-icon" role="button" tabindex="0">play</button></div><div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-current-time" role="timer" aria-label="time"> </div><div class="jp-duration" role="timer" aria-label="duration"> </div><div class="jp-controls-holder"><div class="jp-controls"><button class="jp-play" role="button" tabindex="0">play</button><button class="jp-stop" role="button" tabindex="0">stop</button></div><div class="jp-volume-controls"><button class="jp-mute" role="button" tabindex="0">mute</button><button class="jp-volume-max" role="button" tabindex="0">max volume</button><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div></div><div class="jp-toggles"><button class="jp-repeat" role="button" tabindex="0">repeat</button><button class="jp-full-screen" role="button" tabindex="0">full screen</button></div></div></div></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div></body></html>

步骤（3）中php读取本地静态文件示例：（需要在前端文件同级建有video文件夹，并且里面放一个1.mp4文件）

<?php$video = 'video/1.mp4';if (is_file($video)){header("Content-type: video/mp4");if (isset($_SERVER['HTTP_RANGE'])){rangeDownload($video);} else {header("Content-length: " . filesize($video));readfile($video);}}function rangeDownload($file){$fp = @fopen($file, 'rb');$size   = filesize($file); // File size$length = $size;           // Content length$start  = 0;               // Start byte$end    = $size - 1;       // End byteheader('Accept-Ranges: bytes');if (isset($_SERVER['HTTP_RANGE'])){$c_start = $start;$c_end   = $end;list(, $range) = explode('=', $_SERVER['HTTP_RANGE'], 2);if (strpos($range, ',') !== false){header('HTTP/1.1 416 Requested Range Not Satisfiable');header("Content-Range: bytes $start-$end/$size");exit;}if ($range{0} == '-'){$c_start = $size - substr($range, 1);} else {$range  = explode('-', $range);$c_start = $range[0];$c_end   = (isset($range[1]) && is_numeric($range[1])) ? $range[1] : $size;}$c_end = ($c_end > $end) ? $end : $c_end;if ($c_start > $c_end || $c_start > $size - 1 || $c_end >= $size){header('HTTP/1.1 416 Requested Range Not Satisfiable');header("Content-Range: bytes $start-$end/$size");exit;}$start  = $c_start;$end    = $c_end;$length = $end - $start + 1;fseek($fp, $start);header('HTTP/1.1 206 Partial Content');}header("Content-Range: bytes $start-$end/$size");header("Content-Length: $length");$buffer = 1024 * 8;while(!feof($fp) && ($p = ftell($fp)) <= $end){if ($p + $buffer > $end){$buffer = $end - $p + 1;}set_time_limit(0);echo fread($fp, $buffer);flush(); // Free up memory. Otherwise large files will trigger PHP's memory limit.}fclose($fp);}?>

首先判断头信息中是否有$_SERVER['HTTP_RANGE']，

如果有则按照分段读取的方式，根据头信息中请求的范围返回文件的数据，（需要在返回的头信息中增加范围，长度，文件流类型以及206协议）

否则就将整个文件流返回（需要在返回的头信息中增加文件流类型）

步骤（4）中php以curl方式读取外部接口的文件流示例：

<?php$cookie = 'Authorization: 12345678901234567890123456789012';$api_url = 'http://test.xxx.com';$file_id = '22223222232222322223';$url = $api_url."/file_info/".$file_id;$curl = curl_init();curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_HEADER, 0);  curl_setopt($curl, CURLOPT_TIMEOUT, 30);curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);curl_setopt($curl, CURLOPT_HTTPHEADER, Array($cookie));$result = curl_exec($curl);$code = curl_getinfo($curl,CURLINFO_HTTP_CODE);$result = json_decode($result,true);curl_close($curl);if($code == 200){$file_size = $result['size'];header("Content-type: video/mp4");if (isset($_SERVER['HTTP_RANGE'])){rangeDownload($file_id,$cookie,$api_url,$file_size);}else{allDownload($file_id,$cookie,$api_url,$file_size);}}function allDownload($file_id,$cookie,$api_url,$file_size){$url = $api_url."/file_content/".$file_id;$curl = curl_init();curl_setopt($curl, CURLOPT_URL, $url);      curl_setopt($curl, CURLOPT_HEADER, 0); curl_setopt($curl, CURLOPT_TIMEOUT, 600);curl_setopt($curl, CURLOPT_RETURNTRANSFER, false);curl_setopt($curl, CURLOPT_HTTPHEADER, Array($cookie));/* part1 不做缓存 *//*            header('Expires: 0');            header('Cache-Control: must-revalidate, post-check=0, pre-check=0');            header('Pragma: public');            header("Content-Description: File Transfer");            header("Content-Transfer-Encoding: binary");            Header('Content-Disposition: attacurlment; filename="'.$file_name.'"');            Header("Content-Length: ".$file_size);            *//* part2 做缓存 */                        $seconds_to_cache = 60*60*24*365;            $ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";             header("last-modified:" . gmdate("d M Y H:i:s") . " GMT");            header("Expires: $ts");             header("Pragma: cache");             header("Cache-Control: max-age=$seconds_to_cache");            header("Content-Description: File Transfer");            header("Content-Transfer-Encoding: binary");            Header('Content-Disposition: attacurlment; filename="'.$file_name.'"');            Header("Content-Length: ".$file_size);/* 以上的两个part选一个用即可 */        ob_end_flush();flush();$result = curl_exec($curl);curl_close($curl);}function rangeDownload($file_id,$cookie,$api_url,$file_size){header("Accept-Ranges: bytes");$http_range = $_SERVER['HTTP_RANGE'];$at = explode('=',$http_range);$at = explode('-',$at[1]);$start = $at[0];if($at[1]==null){$end = $file_size - 1;}else{$end = $at[1];}$length = $end - $start + 1;header('HTTP/1.1 206 Partial Content');header("Content-Range: bytes $start-$end/$file_size");header("Content-Length: $length");$range = "Range:bytes=".$start.'-'.$end;$post_header = Array ($cookie,$range);$url2 = $api_url."/file_content/".$file_id;$ch = curl_init();curl_setopt($ch, CURLOPT_URL,$url2);curl_setopt($ch, CURLOPT_RETURNTRANSFER, false);curl_setopt($ch, CURLOPT_HEADER, false);curl_setopt($ch, CURLOPT_HTTPHEADER, $post_header);curl_setopt($ch, CURLOPT_TIMEOUT, 600); curl_exec($ch);curl_close($ch);}?>

首先根据文件的id获取文件的size（之后返回文件流信息的时候需要在头信息中增加文件大小这一参数）

其次和步骤（3）中一样，判断头信息中是否有$_SERVER['HTTP_RANGE']，

如果有则按照分段读取的方式，根据头信息中请求的范围返回文件的数据，

（需要在返回的头信息中增加范围，长度，文件流类型以及206协议；

如果外部接口支持分段读取，可以按照demo中直接分段请求，

否则需要用全部读取的方式，然后通过php的切分字符串方式，获取需要范围的文件流，使用这种方法会浪费流量，增加请求返回的时间）

否则就将整个文件流返回（需要在返回的头信息中增加文件流类型，demo中的头信息为不缓存的方式）

0 0