apicloud apicloud

注册
查看: 310|回复: 5

[案例源码] playRtsp模块demo示例

版主

UID:83211

主题:
151
帖子:
6965
云币:
51320

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

[案例源码] playRtsp模块demo示例

310 5 | 发表于 2019-7-8 10:59:09 |阅读模式 | |
playRtsp 封装了播放rtsp://格式直播流功能。使用本模块时可把本模块当做一个 frame 添加在 window 或 frame 上。  

点击进入模块详情

  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.                        
  56.                         .input1 {
  57.                                 display: -webkit-box;
  58.                                 -webkit-box-orient: vertical;
  59.                                 -webkit-box-pack: center;
  60.                                 -webkit-box-align: center;
  61.                                 height: 32px;
  62.                                 margin: 8px;
  63.                                 background-color: rgba(240,240,240,1.0);
  64.                                 border-color: rgba(220,220,220,1.0);
  65.                                 border-width: 2px;
  66.                                 border-style: solid;
  67.                         }
  68.                        
  69.                 </style>
  70.         </head>
  71.         <body>
  72.                 <div id="wrap">
  73.                         <div id="main">
  74.                                 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  75.                                 <input type="text" class="input1" name="deviceid" id="deviceid" size="40" value="rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov"/>
  76.                                 <a class="button" tapmode="active" onclick="init()">初始化</a>
  77.                                 <a class="button" tapmode="active" onclick="outRtsp()">Rtsp直播</a>
  78.                                 <a class="button" tapmode="active" onclick="playUrl()">playUrl</a>
  79.                                 <a class="button" tapmode="active" onclick="pause()">暂停</a>
  80.                                 <a class="button" tapmode="active" onclick="start()">播放</a>
  81.                                 <a class="button" tapmode="active" onclick="stop()">停止</a>
  82.                                 <a class="button" tapmode="active" onclick="isFullScreen()">获取是否全屏状态</a>
  83.                                 <a class="button" tapmode="active" onclick="full()">全屏播放</a>
  84.                                 <a class="button" tapmode="active" onclick="unfull()">退出全屏</a>
  85.                                 <a class="button" tapmode="active" onclick="setVolume100()">最大声音</a>
  86.                                 <a class="button" tapmode="active" onclick="setVolume50()">50声音</a>
  87.                                 <a class="button" tapmode="active" onclick="setVolume0()">最小声音</a>
  88.                         </div>
  89.                 </div>
  90.         </body>
  91.         <script type="text/javascript" src="../../script/api.js"></script>
  92.         <script>
  93.                 var demo ;
  94.                 function init() {
  95.                         demo.init({
  96.                                 doubleClick : true,
  97.                                 isLocked : true
  98.                         }, function(ret, err) {
  99.                                 alert(JSON.stringify(ret));
  100.                         });
  101.                 }
  102.                
  103.                 function setVolume0() {
  104.                         demo.setVolume({
  105.                                 volume : 0
  106.                         }, function(ret, err) {
  107.                                 alert(JSON.stringify(ret));
  108.                         });
  109.                 }
  110.                
  111.                 function setVolume50() {
  112.                         demo.setVolume({
  113.                                 volume : 50
  114.                         }, function(ret, err) {
  115.                                 alert(JSON.stringify(ret));
  116.                         });
  117.                 }
  118.                
  119.                 function setVolume100() {
  120.                         demo.setVolume({
  121.                                 volume : 100
  122.                         }, function(ret, err) {
  123.                                 alert(JSON.stringify(ret));
  124.                         });
  125.                 }
  126.                
  127.                
  128.                 //rtsp://183.58.12.204/PLTV/88888905/224/3221227287/10000100000000060000000001066432_0.smil
  129.                 //http://dxdemo.jiefo.com/WebCourseInfo/video.flv
  130.                 function outRtsp() {
  131.                         var _deviceid = document.getElementById("deviceid").value;
  132.                         demo.play({
  133.                                 pageType:'Frame',
  134.                                 x : 0,
  135.                                 y : 0,
  136.                                 w : api.frameWidth,
  137.                                 h : 250,
  138.                                 fixedOn : api.frameName,
  139.                                 url :_deviceid// "rtsp://218.204.223.237:554/live/1/66251FC11353191F/e7ooqwcfbqjoo80j.sdp"
  140.                         }, function(ret, err) {
  141.                         });
  142.                 }
  143.                
  144.                 function playUrl() {
  145.                         demo.playUrl({
  146.                                 url : "http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8"
  147.                         }, function(ret, err) {
  148.                         });
  149.                 }
  150.                
  151.                 function pause() {
  152.                         demo.pause();
  153.                 }
  154.                
  155.                 function start() {
  156.                         demo.start();
  157.                 }
  158.                
  159.                 function stop() {
  160.                         demo.stop();
  161.                 }
  162.                
  163.                 function full() {
  164.                         demo.full(function(ret, err) {
  165.                                 alert(JSON.stringify(ret));
  166.                         });
  167.                 }
  168.                
  169.                 function unfull() {
  170.                         demo.unfull(function(ret, err) {
  171.                                 alert(JSON.stringify(ret));
  172.                         });
  173.                 }
  174.                
  175.                 function isFullScreen() {
  176.                         demo.isFullScreen(function(ret, err) {
  177.                                 alert(JSON.stringify(ret));
  178.                         });
  179.                 }

  180.                 function apiready() {
  181.                         demo = api.require('playRtsp');
  182.                         if(!demo){
  183.                                 alert("请添加模块后编译");
  184.                                 return;
  185.                         }
  186.                 }
  187.         </script>
  188. </html>
复制代码


52yaoer:优秀模块开发者,在社区已经连续10个月表现优异。
【2019年度最佳版主评选】给版主投票即可奖励50云币,截止至12月31日---我是12号版主,点击去投票

主题:
10
帖子:
765
云币:
420

APICloud粉丝一周年中秋节社会摇女朋友我李白贼6APICloud大会专属勋章不觉明厉强者王者足球狗捣蛋鬼

发表于 2019-7-10 14:58:32 |
感谢分享

主题:
1
帖子:
78
云币:
9
发表于 2019-7-31 18:52:31 |
很好支持下谢谢

主题:
31
帖子:
180
云币:
322

端午节

发表于 2019-9-3 21:05:38 |
同一个直播源,IOS可以直播成功,安卓一直加载中。而且IOS下,播放5-6秒就会停止播放。

主题:
31
帖子:
180
云币:
322

端午节

发表于 2019-9-3 21:06:47 |
同一个直播源,IOS可以播放成功,安卓一直显示加载中。而且IOS播放5-6秒左右画面就卡住不会动了。

版主

UID:83211

主题:
151
帖子:
6965
云币:
51320

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

 楼主| 发表于 2019-9-4 07:27:50 |
你什么设备哦?
52yaoer:优秀模块开发者,在社区已经连续10个月表现优异。
【2019年度最佳版主评选】给版主投票即可奖励50云币,截止至12月31日---我是12号版主,点击去投票
您需要登录后才可以回帖 登录 | 立即注册

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