在线客服QQ: 176797520 极酷FlvPlayer在线客服 酷播网页视频播放器

4.15 极酷阳光播放器适配移动终端IPad,IPhone,安卓的解决方案



以下适配演示的下载:
适配演示下载1:http://www.cuplayer.com/CuSunPlayer/playerFor_PC_IPAD_Android.rar

适配HLS形式下载1:http://www.cuplayer.com/CuSunPlayer/hls.rar
适配pc终端、苹果终端(含IPHONE、IPAD)、安卓终端(含安卓系统手机和安卓系统平板)

跨平台的ios的hls直播示例

适配多平台的直播效果

跨平台的ios的hls点播示例

适配多平台的点播效果

 

 

 

 

终端适配测试效果图说明:左侧为PC端画面,右侧为IPAD终端
终端适配测试效果图说明:左侧为PC端画面右侧为IPAD终端

极酷阳光播放器适配移动终端IPad,IPhone
终端适配测试效果图说明:左侧为PC端画面右侧为IPAD终端

极酷阳光播放器适配移动终端IPad,IPhone
终端适配测试效果图说明:上方为PC端画面下方为Android安卓系统手机终端
极酷阳光播放器适配移动终端IPad,IPhone
终端适配测试效果图说明:上方为PC端画面下方为Android安卓系统手机终端

适配演示:

[适配终端演示1] [适配终端演示2]

适配演示地址1:http://ipad.CuPlayer.com/

适配演示地址2:http://www.CuPlayer.com/CuSunPlayer/

适配演示地址3:http://www.cuplayer.com/demo/player2/ipad.html

(以上地址均可以用PC,IPad,IPone,安卓手机或平板打开测试)
简要说明:
极酷阳光播放器适配终端的目标在于:让用户在pc端,平板电脑和手机端都可以正常播放视频。
目前适配pc终端苹果终端(含IPHONE、IPAD)、安卓终端(含安卓系统手机和安卓系统平板),
酷播官方适配终端的演示地址 http://ipad.cuplayer.com (可以用pc,IPad,IPone,安卓手机或平板打开测试)
适配各种终端,本站提供的解决方案是:采用标准的MP4文件( H264视频编码 + AAC音频编码)

关于MP4格式,补充一点:这是一种H264高清格式,它对视频要求更严格。如果希望获得最佳的效果,须确保MP4视频元数据完整,并处在视频开始处。
MP4元数据介绍: 即记录视频本身原始的宽度和高度,视频总时长,编码格式等信息的一段数据。
①.MP4元数据通常处在视频文件的最开始处,这种情况是最佳状况,因为当该视频一加载,元数据就会被播放器读取到,从而立马播放,然后,一边缓冲一边播放;
②.另一种情况,则是元数据没有处在视频最开始处,而是处在视频最末处,这种情况,则直接影响播放器加载元数据(因为播放器会一直找这段元数据,直到找到并读取,才会开始播放)。 这种显示出来的状况是:播放器一直缓冲,直到把整个视频都缓冲完毕,才开始播放。
1:在网页html代码中的head部分增加:

<SCRIPT LANGUAGE=JavaScript>
<!--
function getLight(pars){if(pars=="open"){close_light(this)}else{close_light(this)}};function thisMovie(movieName){if(navigator.appName.indexOf("Microsoft")!=-1){return window[movieName]}else{return document[movieName]}}
//-->
</SCRIPT>

2:在网页样式表css文件中增加:

.video { OVERFLOW: hidden; WIDTH: 100%; POSITION: relative}
.close_light_bg {DISPLAY: none; BACKGROUND: #000; FILTER: alpha(opacity = 95); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; opacity: .95}

3:在网页html代码中的<body>部分增加一行背景层:

<DIV class="close_light_bg" id="close_light_bg"></DIV>

4:适配终端的播放器代码:

<!--播放器/代码开始-->
<div class="video" id="CuPlayer">
<SCRIPT LANGUAGE=JavaScript>
<!--
var vID = "0";  //FlvID值,可用于与程序交互
var vWidth = 650; //播放器宽度
var vHeight = 400; //播放器高度
var vFile = "CuSunV2set.php"; //播放器配置文件地址
var vPlayer = "player.swf?v=2.5"; //视频文件地址
var flvurl = "test.mp4";  //视频文件地址
//-->
</SCRIPT>
<script class="CuPlayerVideo" data-mce-role="CuPlayerVideo" type="text/javascript" src="Images/AsCom.js"></script>
</div>
<SCRIPT language=javascript src="Images/jquery.js" type=text/javascript></SCRIPT>
<SCRIPT language=javascript src="Images/action.js" type=text/javascript></SCRIPT>
<!--播放器/代码结束-->