视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > AS2与AS3技术 >

[AS3]播放器跨平台适配移动终端IPad,IPhone,安卓系统介绍

时间:2013-05-24 10:06CuPlayer.com
[AS3]播放器跨平台适配移动终端IPad,IPhone,安卓系统介绍，极酷阳光播放器适配终端的目标在于：让用户在pc端，平板电脑和手机端都可以正常播放视频。

　　适配演示地址：http://www.cuplayer.com/cusunplayer/help/Help415.html

适配演示地址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部分增加：

  1. <SCRIPT LANGUAGE=JavaScript> 
  2. <!-- 
  3. 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]}} 
  4. //--> 
  5. </SCRIPT> 

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

  1. .video { OVERFLOW: hidden; WIDTH: 100%; POSITION: relative} 
  2. .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>部分增加一行背景层：

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

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

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

极酷RTMP流媒体播放演示图片

极酷RTMP流媒体播放演示图片

极酷阳光播放器CuSunPlayerV2.0：[ 演示1 ] 更多演示请点击进入[ 极酷阳光播放器V2专栏 ]

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器