js + php 读取、播放视频流 兼容firefox,chrome,ie,mac的safari,ios的safari,ios的微信浏览器(文件读取文件流篇)

来源:互联网 发布:mac同时登陆多个qq 编辑:程序博客网 时间:2024/05/21 19:21

————————————2015-5-13————最新更新———————————————


由于jwplayer6已经完全无法正常工作,以下介绍的方法也已经失效,请更换视频播放插件,可以参考楼主的文章:


http://blog.csdn.net/snow_finland/article/details/45670683


————————————————————————————————————————



前提条件:

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});}


其中请求检查设备和浏览器类型的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);}


补充说明:

1、在js中请求判断一次设备,并通过js传递给php读取视频流,而不是在php端读取视频流时每次判断设备:
因为ios safari在第一次(会设定$_SERVER['HTTP_RANGE'])请求的时候,能判断出是ios的safari设备

在第二次以及之后的请求时,无法判断出是ios的safari设备


2、判断是否是ios的safari,在之后的文章中介绍

0 0
原创粉丝点击