·您当前的位置:主页 > 技术教程 > 播放器教程 >

纯HLS(m3u8)跨平台技术(HLSPlayer,m3u8Player跨平台多终端)

时间:2014-12-17 17:24酷播
纯HLS(m3u8)跨平台技术(HLSPlayer,m3u8Player跨平台多终端),HLSPlayer,m3u8Player,HLS播放器

纯HLS(m3u8)跨平台技术(HLSPlayer,m3u8Player跨平台多终端)

1. 这是一款支持m3u8地址在PC电脑端和移动端(安卓Android,苹果IOS等)播放视频的播放器。
2. 注意:本实例仅支持hls(m3u8)地址,不支持flv,mp4,mov,f4v,3gp格式,这点请特别注意!
3. 本实例做了跨平台的适配, 支持PC终端,Android安卓终端,iOS苹果终端,WP终端的正常播放。
* 提示1:本实例请在IIS/Apache等网站环境下测试;
* 提示2:本实例仅支持hls(m3u8)/不支持flv,mp4,f4v;
* 提示3:本实例要求用户自身有实现HLS技术,即输出了HLS(m3u8)地址,比如用wowza流媒体软件输出;

测试实例和下载: http://www.52player.com/VideoPlayer/2014/121751.html

PC效果:

纯HLS(m3u8)跨平台技术(HLSPlayer,m3u8Player跨平台多终端)

安卓效果:

纯HLS(m3u8)跨平台技术(HLSPlayer,m3u8Player跨平台多终端)

纯HLS(m3u8)跨平台技术(HLSPlayer,m3u8Player跨平台多终端)

  1. <!--HLSPlayer代码开始--> 
  2. <div class="video" id="HLSPlayer" > 
  3. <SCRIPT LANGUAGE=JavaScript> 
  4. <!-- 
  5. /* 
  6. * HLSPlayer参数应用======================= 
  7. * @param {Object} vID        ID 
  8. * @param {Object} vWidth     播放器宽度设置 
  9. * @param {Object} vHeight    播放器宽度设置 
  10. * @param {Object} vPlayer    播放器文件 
  11. * @param {Object} vHLSset    HLS配置 
  12. * @param {Object} vPic       视频缩略图 
  13. * @param {Object} vCssurl    移动端CSS应用文件 
  14. * HLSPlayer参数应用======================= 
  15. * 提示1:本实例请在IIS/Apache等网站环境下测试 
  16. * 提示2:本实例仅支持hls(m3u8)/不支持flv,mp4,f4v 
  17. */ 
  18. var vID        = ""
  19. var vWidth     = "100%";                //播放器宽度设置 
  20. var vHeight    = 400;                   //播放器宽度设置 
  21. var vPlayer    = "HLSplayer.swf?v=1.5"; //播放器文件 
  22. var vHLSset    = "HLS.swf";             //HLS配置 
  23. var vPic       = "images/start.jpg";    //视频缩略图 
  24. var vCssurl    = "images/mini.css";     //移动端CSS应用文件 
  25.  
  26. //HLS(m3u8)地址,适配PC,安卓,iOS,WP 
  27. var vHLSurl    = "http://demo.cuplayer.com:8011/hls2-vod/test.mp4.m3u8"
  28. //--> 
  29. </SCRIPT> 
  30. <script type="text/javascript" src="js/hls.min.js?rand=3396fsa778"></script> 
  31. </div> 
  32. <!--HLSPlayer代码结束--> 

测试和下载: http://www.52player.com/VideoPlayer/2014/121751.html

热门文章推荐

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器