apicloud apicloud

注册
查看: 3020|回复: 21

[模块教程] daniuPlayer模块(直播播放器)demo示例

版主

UID:83211

主题:
160
帖子:
8637
云币:
1449

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

[模块教程] daniuPlayer模块(直播播放器)demo示例

3020 21 | 发表于 2018-3-11 21:33:02 |阅读模式 | |
视沃(大牛直播)
国内外为数不多不依赖开源框架、不依赖CDN实现秒开、公网毫秒级延迟、跨平台(windows/android/iOS)rtmp推流、rtmp/rtsp直播播放利器,也许是最靠谱的视频直播推流、播放SDK之一,助您轻松实现类似于花椒、映客、斗鱼手机直播推送与播放。
daniuPlayer 模块概述
本模块封装了大牛直播SDK,支持rtsp、rtmp播放(请开发者自行控制播放格式),支持秒开模式,支持快速切换视频播放地址等。


  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.                                
  61.                                 <input type="text" class="input1" name="deviceid" id="deviceid" size="40" value="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8"/>
  62.                                 <!--value="rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov"/>-->
  63.                                 <a class="button" tapmode="active" onclick="addPlayerListener()" >播放器状态监听</a>
  64.                                 <a class="button" tapmode="active" onclick="openPlayer()" >打开播放器</a>
  65.                                 <a class="button" tapmode="active" onclick="hidePlayer()" >隐藏播放器</a>
  66.                                 <a class="button" tapmode="active" onclick="showPlayer()" >显示播放器</a>
  67.                                 <a class="button" tapmode="active" onclick="closePlayer()" >关闭播放器</a>
  68.                                 <a class="button" tapmode="active" onclick="switchUrl()" >切换播放地址</a>
  69.                                 <a class="button" tapmode="active" onclick="switchMute01()" >设置静音</a>
  70.                                 <a class="button" tapmode="active" onclick="switchMute02()" >设置不静音</a>
  71.                                 <a class="button" tapmode="active" onclick="saveImage()" >保存快照</a>
  72.                                 <a class="button" tapmode="active" onclick="startRecorder()" >开始录像</a>
  73.                                 <a class="button" tapmode="active" onclick="stopRecorder()" >停止录像</a>
  74.                                
  75.                         </div>
  76.                 </div>
  77.         </body>
  78.         <script type="text/javascript">
  79.                 var demo = null;
  80.                 apiready = function() {
  81.                         demo = api.require('daniuPlayer');
  82.                         if (!demo) {
  83.                                 alert("请添加模块后编译");
  84.                                 return;
  85.                         }
  86.                 }
  87.                 function openPlayer() {
  88.                         var _deviceid = document.getElementById("deviceid").value;
  89.                         demo.openPlayer({
  90.                                 rect : {
  91.                                         x : 5,
  92.                                         y : 0,
  93.                                         w : api.frameWidth - 5,
  94.                                         h : 200
  95.                                 },
  96.                                 playBuffer : 200, // 默认200ms
  97.                                 isLowLatency : false, //超低延时,默认fasle:不开启 true:开启
  98.                                 isFastStartup : true, // 是否秒开, 默认true:秒开 false:取消秒开
  99.                                 isMute : false, //是否静音 默认false:取消静音 true:静音
  100.                                 isHardwareDecoder : false, //是否硬解 默认false:软解 true:硬解
  101.                                 url : _deviceid, //"rtmp://16268.liveplay.myqcloud.com/live/16268_1ede2fbdcdbd11e792905cb9018cf0d4",
  102.                                 fixedOn : api.frameName,
  103.                                 fixed : true
  104.                         }, function(ret, err) {
  105.                                 api.toast({
  106.                                         msg : " openPlayer " + JSON.stringify(ret) + " " + JSON.stringify(err)
  107.                                 });
  108.                         });
  109.                 }

  110.                 function hidePlayer() {
  111.                         demo.hidePlayer(function(ret, err) {
  112.                                 if (ret.status) {
  113.                                         alert(JSON.stringify(ret));
  114.                                 } else {
  115.                                         alert(JSON.stringify(err));
  116.                                 }
  117.                         });
  118.                 }

  119.                 function showPlayer() {
  120.                         demo.showPlayer(function(ret, err) {
  121.                                 if (ret.status) {
  122.                                         alert(JSON.stringify(ret));
  123.                                 } else {
  124.                                         alert(JSON.stringify(err));
  125.                                 }
  126.                         });
  127.                 }

  128.                 function closePlayer() {
  129.                         demo.closePlayer(function(ret, err) {
  130.                                 if (ret.status) {
  131.                                         alert(JSON.stringify(ret));
  132.                                 } else {
  133.                                         alert(JSON.stringify(err));
  134.                                 }
  135.                         });
  136.                 }

  137.                 function switchUrl() {
  138.                         demo.switchUrl({
  139.                                 url : "http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8"
  140.                         }, function(ret, err) {
  141.                                 api.toast({
  142.                                         msg : " switchUrl " + JSON.stringify(ret) + " " + JSON.stringify(err)
  143.                                 });
  144.                         });
  145.                 }

  146.                 function switchMute01() {
  147.                         demo.switchMute({
  148.                                 isMute : true
  149.                         }, function(ret, err) {
  150.                                 api.toast({
  151.                                         msg : " switchMute " + JSON.stringify(ret) + " " + JSON.stringify(err)
  152.                                 });
  153.                         });
  154.                 }

  155.                 function switchMute02() {
  156.                         demo.switchMute({
  157.                                 isMute : false
  158.                         }, function(ret, err) {
  159.                                 api.toast({
  160.                                         msg : " switchMute " + JSON.stringify(ret) + " " + JSON.stringify(err)
  161.                                 });
  162.                         });
  163.                 }

  164.                 //                1001  开始播放
  165.                 //                1002  连接中
  166.                 //                1003  连接失败
  167.                 //                1004  已连接
  168.                 //                1005  断开连接
  169.                 //                1006  停止播放
  170.                 //                1007  视频解码分辨率信息
  171.                 //                1008  收不到RTMP数据
  172.                 //                1009  快速切换url
  173.                 //                1010  快照成功/失败
  174.                 //                1011  开始buffer
  175.                 //                1012  buffer百分比
  176.                 //                1013  停止buffer
  177.                 //                1014  download速度
  178.                 function addPlayerListener() {
  179.                         demo.addPlayerListener(function(ret, err) {
  180.                                 api.toast({
  181.                                         msg : " addPlayerListener " + JSON.stringify(ret) + " " + JSON.stringify(err)
  182.                                 });
  183.                         });
  184.                 }

  185.                 function saveImage() {
  186.                         demo.saveImage(function(ret, err) {
  187.                                 api.toast({
  188.                                         msg : " addPlayerListener " + JSON.stringify(ret) + " " + JSON.stringify(err)
  189.                                 });
  190.                         });
  191.                 }

  192.                 function startRecorder() {
  193.                         demo.startRecorder(function(ret, err) {
  194.                                 if (ret.status) {
  195.                                         alert(JSON.stringify(ret));
  196.                                 } else {
  197.                                         alert(JSON.stringify(err));
  198.                                 }
  199.                         });
  200.                 }

  201.                 function stopRecorder() {
  202.                         demo.stopRecorder(function(ret, err) {
  203.                                 if (ret.status) {
  204.                                         alert(JSON.stringify(ret));
  205.                                 } else {
  206.                                         alert(JSON.stringify(err));
  207.                                 }
  208.                         });
  209.                 }
  210.         </script>
  211. </html>
复制代码


主题:
17
帖子:
81
云币:
198
发表于 2019-7-11 15:24:14 |
本帖最后由 万家好月圆 于 2019-7-11 15:44 编辑

github上的过期了

版主

UID:83211

主题:
160
帖子:
8637
云币:
1449

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

 楼主| 发表于 2019-7-11 17:52:30 |

换到码云了。。git上下载太慢了,更新不了。。

https://gitee.com/tyousan_admin/daniuPlayerLicense

主题:
17
帖子:
81
云币:
198
发表于 2019-7-12 19:44:52 |
52yaoer 发表于 2019-7-11 17:52
换到码云了。。git上下载太慢了,更新不了。。

https://gitee.com/tyousan_admin/daniuPlayerLicense ...

后面是去码云下的,延迟确实低,就是功能有点欠缺,基本的播放暂停、全屏这些功能都没有,有点难受

版主

UID:83211

主题:
160
帖子:
8637
云币:
1449

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

 楼主| 发表于 2019-7-12 21:08:03 |
目前就只有这些功能,,

主题:
2
帖子:
7
云币:
9
发表于 2019-8-16 16:53:24 |
这个播放器还在更新吗,没有全屏方法啊,也没有设置fixedOn方法,现在急需一个低延迟,能秒开的播放器

主题:
2
帖子:
7
云币:
9
发表于 2019-8-16 16:57:09 |
现在有比playModule更专业的直播播放器可以用吗,麻烦推荐一下

版主

UID:83211

主题:
160
帖子:
8637
云币:
1449

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

 楼主| 发表于 2019-8-16 22:34:39 |
yangjianjun168 发表于 2019-8-16 16:57
现在有比playModule更专业的直播播放器可以用吗,麻烦推荐一下

我有一个腾讯的超级播放器,,需要的话可以联系,那个模块没上架。

主题:
0
帖子:
4
云币:
4
发表于 2019-8-25 16:19:42 |
想导入 daniuPlayer 测试一下 就闪退了 有什么联系网方式吗 我这边急需

版主

UID:83211

主题:
160
帖子:
8637
云币:
1449

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

 楼主| 发表于 2019-8-26 07:46:37 |
红色接班人 发表于 2019-8-25 16:19
想导入 daniuPlayer 测试一下 就闪退了 有什么联系网方式吗 我这边急需

需要配置授权模块,配合使用才行。
123下一页
您需要登录后才可以回帖 登录 | 立即注册

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