js + php 读取、播放视频流 兼容firefox，chrome，ie，mac的safari，ios的safari，ios的微信浏览器（文件读取文件流篇）
前提条件：
1、选用jwplayer6作为前端播放器（jwplayer6的基本代码和资料可以到其官网学习查询，本文中仅为部分代码）
2、前端动态加载jwplayer视频盒子
3、前端加载的视频非视频的物理地址，而是通过php读取的视频流
4、php读取的视频流的源文件是一个物理地址的文件
加载视频盒子的部分js代码
function load_video_player(width,height,filename,type,size){
var player_w = width;
var player_h = height;
var isiphone;
$.ajax({
type: 'POST',
url: 'devicecontroller.php',
data: 'islink='+islink,
dataType:"JSON",
async: false,
success:function(data){
if(data.code == 1){
isiphone = data.data;
}else{
isiphone = 0;
}
}
});
var file_path = '/XXX/url?filename='+filename+'&type='+type+'&size='+size+'&isiphone='+isiphone;
var player_wrap = [
'<div id="J_video_container" class="video_container hide">',
'<div class="video_box">',
'</div>',
'</div>'
].join('');
var player_box = [
'<div id="Jwplayer_box">Loading player...</div>'
].join('');
if($('#J_video_container').length==0){
$('#J_video_main').append(player_wrap);
}
$('#J_video_container').css('height',player_h+'px');
if($('#Jwplayer_box').length==0){
$('#J_video_container .video_box').append(player_box);
}
$('.video_box').css({'width':player_w+'px','height':player_h+'px'});
$('#J_video_container').show();
jwplayer("Jwplayer_box").setup({
'width': player_w,
'height': player_h,
'controlbar': 'bottom',
"autostart":"true",
'provider': 'video',
'type': 'mp4',
'file': file_path
});
}function load_video_player(width,height,filename,type,size){
var player_w = width;
var player_h = height;
var isiphone;
$.ajax({
type: 'POST',
url: 'devicecontroller.php',
data: 'islink='+islink,
dataType:"JSON",
async: false,
success:function(data){
if(data.code == 1){
isiphone = data.data;
}else{
isiphone = 0;
}
}
});
var file_path = '/XXX/url?filename='+filename+'&type='+type+'&size='+size+'&isiphone='+isiphone;
var player_wrap = [
'<div id="J_video_container" class="video_container hide">',
'<div class="video_box">',
'</div>',
'</div>'
].join('');
var player_box = [
'<div id="Jwplayer_box">Loading player...</div>'
].join('');
if($('#J_video_container').length==0){
$('#J_video_main').append(player_wrap);
}
$('#J_video_container').css('height',player_h+'px');
if($('#Jwplayer_box').length==0){
$('#J_video_container .video_box').append(player_box);
}
$('.video_box').css({'width':player_w+'px','height':player_h+'px'});
$('#J_video_container').show();
jwplayer("Jwplayer_box").setup({
'width': player_w,
'height': player_h,
'controlbar': 'bottom',
"autostart":"true",
'provider': 'video',
'type': 'mp4',
'file': file_path
});
}其中请求检查设备和浏览器类型的devicecontroller.php代码
//json_encode中文乱码问题修正
function arrayRecursive(&$array){
foreach ($array as $key => $value) {
if (is_array($value)) {
arrayRecursive($array[$key]);//如果是数组就进行递归操作
} else {
if(is_string($value)){
$temp1= addslashes($value);
$array[$key]= urlencode($temp1);//如果是字符串就urlencode
}else{
$array[$key] = $value;
}
}
}
}
function JSON($result) {
$array=$result;
arrayRecursive($array);//先将类型为字符串的数据进行 urlencode
$json = json_encode($array);//再将数组转成JSON
return urldecode($json);//最后将JSON字符串进行urldecode
}
require_once("Mobile_Detect.php");
$detect = new Mobile_Detect();
if($detect->isiPhone() || $detect->isiPad()){
if($detect->isSafari() || $detect->isGenericBrowser()){//iphone和ipad上的safari或者微信浏览器
$iphone = 1;
}else{
$iphone = 0;
}
}else{
$iphone = 0;
}
$data['code']=1;
$data['data']=$iphone;
echo JSON($data);加载视频流的php
$file_name = $_GET['filename'];
$file_type = $_GET['type'];
$file_size = $_GET['size'];
$isiphone = $_GET['isiphone'];
header("Content-type: ".$file_type);
if(isset($_SERVER['HTTP_RANGE'])){
$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;
if($isiphone==1){
$fp = @fopen($file, 'rb');
header("Accept-Ranges: 0-$length");
set_time_limit(0);
fseek($fp,$start);
header("Content-Range: bytes $start-$end/$file_size");
header("Content-Length: $length");
while(!feof($fp)){
echo fread($fp, $length);
flush();
}
exit;
}else{
normal_download();
}
}else{
normal_download();
}
function normal_download(){
Header("Content-type: ".$file_type);
Header('Content-Disposition: attachment; filename="'.$filename.'"');
Header("Content-Length: ".$file_size);
readfile($filename);
}
补充说明：
在js中请求判断一次设备，并通过js传递给php读取视频流，而不是在php端读取视频流时每次判断设备：
因为ios safari在第一次（会设定$_SERVER['HTTP_RANGE']）请求的时候，能判断出是ios的safari设备
在第二次以及之后的请求时，无法判断出是ios的safari设备
评论