APICloud开发者进阶之路|[ 模块教程 ] touping模块demo示例

头像
YonBuilder
    阅读 5 分钟

    touping模块实现局域网内基于DLNA的视频投屏功能，并支持搜索设备，投屏播放，调节播放进度，调节音量，退出投屏等功能。
    `1. <!DOCTYPE HTML>

    1. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    6.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    7.     <title>AUI快速完成布局</title>
    8.     <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    9. </head>
    11. <body>
    12.     <div class="aui-tips">
    13.         <div class="aui-tips-title aui-ellipsis-1" id="tips">请点击底部“搜索设备”按钮，进行可投屏设备搜索</div>
    14.     </div>
    15.     <div class="aui-content aui-margin-b-15">
    16.         <ul class="aui-list aui-list-in" id="deviceList">
    18.         </ul>
    19.     </div>
    21.     <div >
    22.         <div class="aui-range" >
    23.             音量 <input type="range" class="aui-range" value="0" max="100" min="1" step="1" id="rangeVolume" />
    24.         </div>
    25.         <div class="aui-range" >
    26.             进度 <input type="range" class="aui-range" value="0" max="100" min="1" step="1" id="rangeSeek" />
    27.         </div>
    28.     </div>
    29.     <footer class="aui-bar aui-bar-tab" id="footer">
    30.         <div class="aui-bar-tab-item " tapmode>
    31.             <div class="aui-bar-tab-label">搜索设备</div>
    32.         </div>
    33.         <div class="aui-bar-tab-item" tapmode>
    34.             <div class="aui-bar-tab-label">视频投屏</div>
    35.         </div>
    36.         <div class="aui-bar-tab-item" tapmode>
    37.             <div class="aui-bar-tab-label">切换视频</div>
    38.         </div>
    39.         <div class="aui-bar-tab-item" tapmode>
    40.             <div class="aui-bar-tab-label">退出投屏</div>
    41.         </div>
    42.         <div class="aui-bar-tab-item" tapmode >
    43.         </div>
    44.     </footer>
    45. </body>
    46. <script type="text/javascript" src="../script/api.js"></script>
    47. <script type="text/javascript" src="../script/aui-tab.js"></script>
    48. <script type="text/javascript" src="../script/aui-range.js"></script>
    49. <script type="text/javascript">
    50.     var touping;
    51.     var deviceIndex;
    52.     apiready = function() {
    53.         api.parseTapmode();
    54.         touping = api.require('touping');
    55.     }
    56.     var tab = new auiTab({
    57.         element: document.getElementById("footer"),
    58.         index: 5,
    59.         repeatClick: true
    60.     }, function(ret) {
    61.         console.log(ret.index);
    62.         if (ret) {
    63.             if (ret.index == 1) {
    64.                 browse();
    65.             } else if (ret.index == 2) {
    66.                 play();
    67.             } else if (ret.index == 3) {
    68.                 playUrl();
    69.             } else if (ret.index == 4) {
    70.                 stop();
    71.             }
    72.         }
    73.     });
    75.     function browse() {
    76.         $api.byId('deviceList').innerHTML = '';
    77.         touping.browse(function(ret, err) {
    78.             if (ret.status) {
    79.                 showDeviceList(ret.deviceList);
    80.                 document.getElementById("tips").textContent = "搜索到" + ret.deviceList.length + "个设备，请选择要投屏的设备";
    81.             } else {
    82.                 document.getElementById("tips").textContent = "未搜索到设备，请检查当前局域网内是否有可投屏设备";
    83.             }
    84.         });
    85.     }
    87.     function showDeviceList(deviceList) {
    88.         for (var i = 0; i < deviceList.length; i++) {
    89.             var item = '<li class="aui-list-item" onclick="choiceDevice("' + deviceList[i].name + '",' + i + ')">';
    90.             item += '<div class="aui-list-item-inner">';
    91.             item += deviceList[i].name;
    92.             item += '</div>';
    93.             item += '</li>';
    94.             $api.byId('deviceList').insertAdjacentHTML('beforeEnd', item);
    95.         }
    96.     }
    98.     function choiceDevice(name, index) {
    99.         deviceIndex = index;
    100.         document.getElementById("tips").textContent = "您选择了 " + name + " 进行投屏";
    101.     }
    103.     function play() {
    104.         touping.play({
    105.             index: deviceIndex,
    106.             url: "http://wvideo.spriteapp.cn/video/2016/0328/56f8ec01d9bfe_wpd.mp4"
    107.         }, function(ret, err) {
    108.               alert(JSON.stringify(ret));
    109.         });
    110.     }
    112.     function playUrl() {
    113.         touping.playUrl({
    114.             url: "http://file.qiushiriji.com/file/video/2019-08-13/172/1565702535263.mp4"
    115.         }, function(ret, err) {
    116.             alert(JSON.stringify(ret));
    117.         });
    119.     }
    121.     function stop() {
    122.         touping.stop(function(ret, err) {
    123.             alert(JSON.stringify(ret));
    124.         });
    125.     }
    127.     function volume(value) {
    128.         touping.volume({
    129.             value: value
    130.         }, function(ret, err) {
    131.             console.log(JSON.stringify(ret));
    132.         });
    133.     }
    135.     function seek(value) {
    136.         touping.seek({
    137.             value: value
    138.         }, function(ret, err) {
    139.             console.log(JSON.stringify(ret));
    140.         });
    142.     }
    144.     var range1 = new auiRange({
    145.         element: document.getElementById("rangeVolume") //滑块容器
    146.     }, function(ret) {
    147.         volume(ret.value);
    148.     })
    150.     var range2 = new auiRange({
    151.         element: document.getElementById("rangeSeek") //滑块容器
    152.     }, function(ret) {
    153.         seek(ret.value);
    154.     })
    155. </script>
    157. </html>

    _复制代码_`

    javascriptjavaandroidiosobjective-c
    YonBuilder
    17 声望9 粉丝

    用友YonBuilder移动低代码开发平台，快速构建高性能多端应用

    « 上一篇
    APICloud开发者进阶之路|[ 模块教程 ] UIAlbumBrowser模块效果展示
    下一篇 »
    APICloud开发者进阶之路|[ 新手教程 ] 原生js 会话列表滑动删除置顶效果

    引用和评论

    推荐阅读
    头像
    用友BIP开发者生态亮相华为全联接大会

    YonBuilder阅读 559

    头像
    100个React最佳实践小技巧

    夕水赞 27阅读 6.9k评论 4

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.5k评论 9

    头像
    前端开发工具

    寒青赞 19阅读 5.3k

    头像
    在Java程序中监听mysql的binlog

    huan1993赞 13阅读 5.8k

    头像
    开发插件集合

    寒青赞 14阅读 3.6k

    头像
    微信抢红包插件

    cyh213赞 37阅读 122.8k评论 184

    0 条评论
    得票最新