如果你正在寻找一个网页上播放视频的插件，或者你原先网页上用的视频插件被墙了（比如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，需下载资源包一起使用
demo
前端部分：
<!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 byte
header('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中的头信息为不缓存的方式）
评论