apicloud apicloud

注册
查看: 2792|回复: 17

[其他] m3u8CacheServer模块(m3u8本地缓存)demo示例

版主

UID:83211

主题:
151
帖子:
6879
云币:
44008

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

[其他] m3u8CacheServer模块(m3u8本地缓存)demo示例

2792 17 | 发表于 2018-7-8 09:34:44 |阅读模式 | |
本帖最后由 52yaoer 于 2018-7-25 20:08 编辑

m3u8CacheServer实现了iOS、Android系统下m3u8的下载功能,根据解析的m3u8文件分片ts文件进行下载。然后手机内部将下载的ts文件重新组装进行发布,以供本地播放。


点击进入模块详情

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>Module Develop</title>
  5.                 <meta charset="utf-8">
  6.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  7.                 <style type="text/css">
  8.                         html, body {
  9.                                 height: 100%
  10.                         }
  11.                         body {
  12.                                 background-color: #fff;
  13.                                 margin: 0;
  14.                         }
  15.                         #wrap {
  16.                                 height: 100%;
  17.                                 position: relative;
  18.                         }
  19.                         #header {
  20.                                 padding-top: 20px;
  21.                                 background-color: #5082c2;
  22.                                 height: 44px;
  23.                                 position: relative;
  24.                         }
  25.                         #header h1 {
  26.                                 font-size: 20px;
  27.                                 height: 44px;
  28.                                 line-height: 44px;
  29.                                 margin: 0em;
  30.                                 color: #fff;
  31.                                 margin-left: 100px;
  32.                                 margin-right: 100px;
  33.                                 text-align: center;
  34.                         }
  35.                         #main {
  36.                                 display: -webkit-box;
  37.                                 -webkit-box-orient: vertical;
  38.                                 -webkit-box-pack: center;
  39.                         }
  40.                         a.button {
  41.                                 display: -webkit-box;
  42.                                 -webkit-box-orient: vertical;
  43.                                 -webkit-box-pack: center;
  44.                                 -webkit-box-align: center;
  45.                                 height: 32px;
  46.                                 margin: 8px;
  47.                                 background-color: rgba(240,240,240,1.0);
  48.                                 border-color: rgba(220,220,220,1.0);
  49.                                 border-width: 2px;
  50.                                 border-style: solid;
  51.                         }
  52.                         a.active {
  53.                                 background-color: rgba(240,240,240,0.7);
  54.                         }
  55.                 </style>
  56.         </head>
  57.         <body>
  58.                 <div id="wrap">
  59.                         <div id="main">
  60.                                 <a class="button" tapmode="active" onclick="addEventListener1()" >下载进度监听</a>
  61.                                 <a class="button" tapmode="active" onclick="start1()" >开始下载1</a>
  62.                                 <a class="button" tapmode="active" onclick="pause1()" >暂停下载1</a>
  63.                                 <a class="button" tapmode="active" onclick="isDownloadFinish1()" >是否下载完成1</a>
  64.                                 <a class="button" tapmode="active" onclick="start2()" >开始下载2</a>
  65.                                 <a class="button" tapmode="active" onclick="pause2()" >暂停下载2</a>
  66.                                 <a class="button" tapmode="active" onclick="isDownloadFinish2()" >是否下载完成2</a>
  67.                                 <a class="button" tapmode="active" onclick="getCacheSize()">获取缓存大小</a>
  68.                                 <a class="button" tapmode="active" onclick="clearCache()">清空缓存</a>
  69.                         </div>
  70.                 </div>
  71.         </body>
  72.         <script type="text/javascript" src="../script/api.js"></script>
  73.         <script>
  74.                 var demo;
  75.                 function apiready() {
  76.                         demo = api.require('m3u8CacheServer');
  77.                         if (!demo) {
  78.                                 alert("请添加模块后编译");
  79.                                 return;
  80.                         }
  81.                 }

  82.                 function addEventListener1() {
  83.                         demo.addEventListener(function(ret, err) {
  84.                                 //ret.data.state 0:默认状态 -1:下载排队 1:下载准备中 2:下载中 3:下载完成 4:下载出错 5:下载暂停 6:空间不足
  85.                                 api.toast({
  86.                                         msg : JSON.stringify(ret)
  87.                                 });
  88.                                 console.log(JSON.stringify(ret));
  89.                         });
  90.                 }
  91.         //http://ogn0m4it0.bkt.clouddn.com/58IzAY_GglrObBBbbD98wrHIbLk=/llhpmYRGVWfZL8dyCPXwCwKovI9R
  92.                 function start1() {
  93.                         //                        alert(demo);
  94.                         demo.start({
  95.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/500kb/hls/index.m3u8'
  96.                         }, function(ret, err) {
  97.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  98.                         });
  99.                 }

  100.                 function pause1() {
  101.                         demo.pause({
  102.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/500kb/hls/index.m3u8'
  103.                         }, function(ret, err) {
  104.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  105.                         });
  106.                 }

  107.                 function isDownloadFinish1() {
  108.                         demo.isDownloadFinish({
  109.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/500kb/hls/index.m3u8'
  110.                         }, function(ret, err) {
  111.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  112.                                 if (ret.status) {
  113.                                         playVideo(ret.data.localUrl);
  114.                                 }
  115.                         });
  116.                 }

  117.                 function start2() {
  118.                         demo.start({
  119.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/index.m3u8'
  120.                         }, function(ret, err) {
  121.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  122.                         });
  123.                 }

  124.                 function pause2() {
  125.                         demo.pause({
  126.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/index.m3u8'
  127.                         }, function(ret, err) {
  128.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  129.                         });
  130.                 }

  131.                 function isDownloadFinish2() {
  132.                         demo.isDownloadFinish({
  133.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/index.m3u8'
  134.                         }, function(ret, err) {
  135.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  136.                                 if (ret.status) {
  137.                                         playVideo(ret.data.localUrl);
  138.                                 }
  139.                         });
  140.                 }

  141.                 function getCacheSize() {
  142.                         demo.getCacheSize({
  143.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/index.m3u8'//不传则获取所有m3u8缓存
  144.                         },function(ret, err) {
  145.                                 alert(JSON.stringify(ret));
  146.                         });
  147.                 }

  148.                 function clearCache() {
  149.                         demo.clearCache({
  150.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/index.m3u8'//不传则删除所有m3u8缓存
  151.                         },function(ret, err) {
  152.                                 alert(JSON.stringify(ret));
  153.                         });
  154.                 }

  155.                 function playVideo(_url) {
  156.                         var demo1 = api.require('playModule');
  157.                         demo1.play({
  158.                                 title : "视频测试",
  159.                                 url : _url,
  160.                                 defaultBtn : true,
  161.                                 enableFull : true,
  162.                                 isTopView : true,
  163.                                 isFullBtn : true,
  164.                                 isBackBtn : true,
  165. //                                scalingMode : 1, //1 无缩放 2 适应大小模式 3 充满可视范围,可能会被裁剪 4 缩放到充满视图
  166.                                 fullscreenMode : 'LANDSCAPE', //设置全屏按钮控制全屏显示模式是横屏还是竖屏 竖屏:PORTRAIT ; 横屏:LANDSCAPE
  167.                                 isShowProcessView : true, //是否显示进度条 (显示:true ; 不显示:false)
  168.                                 isShowTimeLable : true, //是否显示播放时间 显示:true ; 不显示:false
  169.                                 isLive : false, //是否直播视频源 (直播:true;点播:false)
  170.                                 isOpenGesture : true, //是否开启手势控制音量,亮度和进度,默认开启手势控制,true为开启false为关闭
  171.                                 isAutoPlay : true, //是否自动播放 默认:true  true为开启false为关闭
  172.                                 isLoop : false,     //是否循环播放  默认:false true为开启false为关闭
  173.                         }, function(ret, err) {
  174.                         });
  175.                 }
  176.         </script>
  177. </html>
复制代码



如果有遇见不能缓存的m3u8地址,提供提供测试地址给我,,我来进行适配缓存规则。 qq : 176142998 备注:m3u8缓存

主题:
12
帖子:
77
云币:
103
发表于 2018-7-11 09:07:59 |
厉害,正好需要

版主

UID:83211

主题:
151
帖子:
6879
云币:
44008

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2018-7-11 10:31:48 |

驾校小白

UID:659161

主题:
2
帖子:
20
云币:
27
发表于 2018-7-25 01:20:29 |
额 ios 的下载缓存位置居然在沙箱的外层?android的正常 解决下吧

正常应该是在 Documents/uzfs/appid/M3u8Downloader

现在在  Documents/M3u8Downloader

用fs 路径访问不到的

驾校小白

UID:659161

主题:
2
帖子:
20
云币:
27
发表于 2018-7-25 01:30:48 |
本帖最后由 daolilaxi 于 2018-7-25 01:32 编辑

还有使用那个 localUrl 就更有问题了

android 马上下载 然后使用localUrl 播放没问题 关闭当前WIN 再回来使用 127.0.0.1:8686 这个localUrl 就不行了

使用 fs://M3u8Downloader/videoID/local.m3u8 就没事

ios 下载后 使用 localUrl 和 fs路径 都是不能播放的 fs路径问题在楼上4#

版主

UID:83211

主题:
151
帖子:
6879
云币:
44008

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2018-7-25 07:18:50 |
daolilaxi 发表于 2018-7-25 01:30
还有使用那个 localUrl 就更有问题了

android 马上下载 然后使用localUrl 播放没问题 关闭当前WIN 再回来 ...
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>Module Develop</title>
  5.                 <meta charset="utf-8">
  6.                 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  7.                 <style type="text/css">
  8.                         html, body {
  9.                                 height: 100%
  10.                         }
  11.                         body {
  12.                                 background-color: #fff;
  13.                                 margin: 0;
  14.                         }
  15.                         #wrap {
  16.                                 height: 100%;
  17.                                 position: relative;
  18.                         }
  19.                         #header {
  20.                                 padding-top: 20px;
  21.                                 background-color: #5082c2;
  22.                                 height: 44px;
  23.                                 position: relative;
  24.                         }
  25.                         #header h1 {
  26.                                 font-size: 20px;
  27.                                 height: 44px;
  28.                                 line-height: 44px;
  29.                                 margin: 0em;
  30.                                 color: #fff;
  31.                                 margin-left: 100px;
  32.                                 margin-right: 100px;
  33.                                 text-align: center;
  34.                         }
  35.                         #main {
  36.                                 display: -webkit-box;
  37.                                 -webkit-box-orient: vertical;
  38.                                 -webkit-box-pack: center;
  39.                         }
  40.                         a.button {
  41.                                 display: -webkit-box;
  42.                                 -webkit-box-orient: vertical;
  43.                                 -webkit-box-pack: center;
  44.                                 -webkit-box-align: center;
  45.                                 height: 32px;
  46.                                 margin: 8px;
  47.                                 background-color: rgba(240,240,240,1.0);
  48.                                 border-color: rgba(220,220,220,1.0);
  49.                                 border-width: 2px;
  50.                                 border-style: solid;
  51.                         }
  52.                         a.active {
  53.                                 background-color: rgba(240,240,240,0.7);
  54.                         }
  55.                 </style>
  56.         </head>
  57.         <body>
  58.                 <div id="wrap">
  59.                         <div id="main">
  60.                                 <a class="button" tapmode="active" onclick="addEventListener1()" >下载进度监听</a>
  61.                                 <a class="button" tapmode="active" onclick="start1()" >开始下载1</a>
  62.                                 <a class="button" tapmode="active" onclick="pause1()" >暂停下载1</a>
  63.                                 <a class="button" tapmode="active" onclick="isDownloadFinish1()" >是否下载完成1</a>
  64.                                 <a class="button" tapmode="active" onclick="start2()" >开始下载2</a>
  65.                                 <a class="button" tapmode="active" onclick="pause2()" >暂停下载2</a>
  66.                                 <a class="button" tapmode="active" onclick="isDownloadFinish2()" >是否下载完成2</a>
  67.                                 <a class="button" tapmode="active" onclick="getCacheSize()">获取缓存大小</a>
  68.                                 <a class="button" tapmode="active" onclick="clearCache()">清空缓存</a>
  69.                         </div>
  70.                 </div>
  71.         </body>
  72.         <script type="text/javascript" src="../script/api.js"></script>
  73.         <script>
  74.                 var demo;
  75.                 function apiready() {
  76.                         demo = api.require('m3u8CacheServer');
  77.                         if (!demo) {
  78.                                 alert("请添加模块后编译");
  79.                                 return;
  80.                         }
  81.                 }

  82.                 function addEventListener1() {
  83.                         demo.addEventListener(function(ret, err) {
  84.                                 //ret.data.state 0:默认状态 -1:下载排队 1:下载准备中 2:下载中 3:下载完成 4:下载出错 5:下载暂停 6:空间不足
  85.                                 api.toast({
  86.                                         msg : JSON.stringify(ret)
  87.                                 });
  88.                                 console.log(JSON.stringify(ret));
  89.                         });
  90.                 }
  91.         //http://ogn0m4it0.bkt.clouddn.com/58IzAY_GglrObBBbbD98wrHIbLk=/llhpmYRGVWfZL8dyCPXwCwKovI9R
  92.                 function start1() {
  93.                         //                        alert(demo);
  94.                         demo.start({
  95.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/500kb/hls/index.m3u8'
  96.                         }, function(ret, err) {
  97.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  98.                         });
  99.                 }

  100.                 function pause1() {
  101.                         demo.pause({
  102.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/500kb/hls/index.m3u8'
  103.                         }, function(ret, err) {
  104.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  105.                         });
  106.                 }

  107.                 function isDownloadFinish1() {
  108.                         demo.isDownloadFinish({
  109.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/500kb/hls/index.m3u8'
  110.                         }, function(ret, err) {
  111.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  112.                                 if (ret.status) {
  113.                                         playVideo(ret.localUrl);
  114.                                 }
  115.                         });
  116.                 }

  117.                 function start2() {
  118.                         demo.start({
  119.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/index.m3u8'
  120.                         }, function(ret, err) {
  121.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  122.                         });
  123.                 }

  124.                 function pause2() {
  125.                         demo.pause({
  126.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/index.m3u8'
  127.                         }, function(ret, err) {
  128.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  129.                         });
  130.                 }

  131.                 function isDownloadFinish2() {
  132.                         demo.isDownloadFinish({
  133.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/index.m3u8'
  134.                         }, function(ret, err) {
  135.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  136.                                 if (ret.status) {
  137.                                         playVideo(ret.localUrl);
  138.                                 }
  139.                         });
  140.                 }

  141.                 function getCacheSize() {
  142.                         demo.getCacheSize({
  143.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/index.m3u8'//不传则获取所有m3u8缓存
  144.                         },function(ret, err) {
  145.                                 alert(JSON.stringify(ret));
  146.                         });
  147.                 }

  148.                 function clearCache() {
  149.                         demo.clearCache({
  150.                                 url : 'http://kino3.xalhar.net:2100/20180625/HZGkTWWo/index.m3u8'//不传则删除所有m3u8缓存
  151.                         },function(ret, err) {
  152.                                 alert(JSON.stringify(ret));
  153.                         });
  154.                 }

  155.                 function playVideo(_url) {
  156.                         var demo1 = api.require('playModule');
  157.                         demo1.play({
  158.                                 title : "视频测试",
  159.                                 url : _url,
  160.                                 defaultBtn : true,
  161.                                 enableFull : true,
  162.                                 isTopView : true,
  163.                                 isFullBtn : true,
  164.                                 isBackBtn : true,
  165. //                                scalingMode : 1, //1 无缩放 2 适应大小模式 3 充满可视范围,可能会被裁剪 4 缩放到充满视图
  166.                                 fullscreenMode : 'LANDSCAPE', //设置全屏按钮控制全屏显示模式是横屏还是竖屏 竖屏:PORTRAIT ; 横屏:LANDSCAPE
  167.                                 isShowProcessView : true, //是否显示进度条 (显示:true ; 不显示:false)
  168.                                 isShowTimeLable : true, //是否显示播放时间 显示:true ; 不显示:false
  169.                                 isLive : false, //是否直播视频源 (直播:true;点播:false)
  170.                                 isOpenGesture : true, //是否开启手势控制音量,亮度和进度,默认开启手势控制,true为开启false为关闭
  171.                                 isAutoPlay : true, //是否自动播放 默认:true  true为开启false为关闭
  172.                                 isLoop : false,     //是否循环播放  默认:false true为开启false为关闭
  173.                         }, function(ret, err) {
  174.                         });
  175.                 }
  176.         </script>
  177. </html>
复制代码


用这个测试demo测试呢?

驾校小白

UID:659161

主题:
2
帖子:
20
云币:
27
发表于 2018-7-25 07:30:38 |
52yaoer 发表于 2018-7-25 07:18
用这个测试demo测试呢?

我最开始就是用这个demo 测的啊
android上跑了一下没问题我就开始在我应用里码逻辑了
弄好然后真机测就出现我说的那几个问题了
然后我又回demo 结果确实是有问题

驾校小白

UID:659161

主题:
2
帖子:
20
云币:
27
发表于 2018-7-25 07:34:01 |
播放器模块 也是用的你的 playModule

版主

UID:83211

主题:
151
帖子:
6879
云币:
44008

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2018-7-25 10:59:45 |
你是跨页面了??

版主

UID:83211

主题:
151
帖子:
6879
云币:
44008

APICloud粉丝端午节模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2018-7-25 11:05:05 |
加我qq,,交流下,,176142998
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表