js + php 读取、播放视频流兼容firefox，chrome，ie，mac的safari，ios的safari，ios的微信浏览器（文件读取文件流篇） ...-白红宇

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

阅读量：5371 次

发布时间：2019-06-15

本文共 3574 字，大约阅读时间需要 11 分钟。

————————————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 = [		'
    
     ',			'
     
      ',			'
     
',		'
    
'	].join('');		var player_box = [		'
    
     Loading player...
    
'	].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，在之后的文章中介绍

转载于:https://www.cnblogs.com/snow-finland/p/4690183.html

你可能感兴趣的文章