touping模块实现局域网内基于DLNA的视频投屏功能，并支持搜索设备，投屏播放，调节播放进度，调节音量，退出投屏等功能。
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>AUI快速完成布局</title> <link rel="stylesheet" type="text/css" href="../css/aui.css" /></head><body> <div class="aui-tips"> <div class="aui-tips-title aui-ellipsis-1" id="tips">请点击底部“搜索设备”按钮，进行可投屏设备搜索</div> </div> <div class="aui-content aui-margin-b-15"> <ul class="aui-list aui-list-in" id="deviceList"> </ul> </div> <div style="position:fixed;bottom:3rem;padding:1rem;"> <div class="aui-range" style="display:block;width:300px;"> 音量 <input type="range" class="aui-range" value="0" max="100" min="1" step="1" id="rangeVolume" style="width:100%"/> </div> <div class="aui-range" style="display:block;width:300px;"> 进度 <input type="range" class="aui-range" value="0" max="100" min="1" step="1" id="rangeSeek" style="width:100%"/> </div> </div> <footer class="aui-bar aui-bar-tab" id="footer"> <div class="aui-bar-tab-item " tapmode> <div class="aui-bar-tab-label">搜索设备</div> </div> <div class="aui-bar-tab-item" tapmode> <div class="aui-bar-tab-label">视频投屏</div> </div> <div class="aui-bar-tab-item" tapmode> <div class="aui-bar-tab-label">切换视频</div> </div> <div class="aui-bar-tab-item" tapmode> <div class="aui-bar-tab-label">退出投屏</div> </div> <div class="aui-bar-tab-item" tapmode style="display:none"> </div> </footer></body><script type="text/javascript" src="../script/api.js"></script><script type="text/javascript" src="../script/aui-tab.js"></script><script type="text/javascript" src="../script/aui-range.js"></script><script type="text/javascript"> var touping; var deviceIndex; apiready = function() { api.parseTapmode(); touping = api.require('touping'); } var tab = new auiTab({ element: document.getElementById("footer"), index: 5, repeatClick: true }, function(ret) { console.log(ret.index); if (ret) { if (ret.index == 1) { browse(); } else if (ret.index == 2) { play(); } else if (ret.index == 3) { playUrl(); } else if (ret.index == 4) { stop(); } } }); function browse() { $api.byId('deviceList').innerHTML = ''; touping.browse(function(ret, err) { if (ret.status) { showDeviceList(ret.deviceList); document.getElementById("tips").textContent = "搜索到" + ret.deviceList.length + "个设备，请选择要投屏的设备"; } else { document.getElementById("tips").textContent = "未搜索到设备，请检查当前局域网内是否有可投屏设备"; } }); } function showDeviceList(deviceList) { for (var i = 0; i < deviceList.length; i++) { var item = '<li class="aui-list-item" style="border-bottom:0" onclick="choiceDevice("' + deviceList[i].name + '",' + i + ')">'; item += '<div class="aui-list-item-inner">'; item += deviceList[i].name; item += '</div>'; item += '</li>'; $api.byId('deviceList').insertAdjacentHTML('beforeEnd', item); } } function choiceDevice(name, index) { deviceIndex = index; document.getElementById("tips").textContent = "您选择了 " + name + " 进行投屏"; } function play() { touping.play({ index: deviceIndex, url: "http://wvideo.spriteapp.cn/video/2016/0328/56f8ec01d9bfe_wpd.mp4" }, function(ret, err) { alert(JSON.stringify(ret)); }); } function playUrl() { touping.playUrl({ url: "http://file.qiushiriji.com/file/video/2019-08-13/172/1565702535263.mp4" }, function(ret, err) { alert(JSON.stringify(ret)); }); } function stop() { touping.stop(function(ret, err) { alert(JSON.stringify(ret)); }); } function volume(value) { touping.volume({ value: value }, function(ret, err) { console.log(JSON.stringify(ret)); }); } function seek(value) { touping.seek({ value: value }, function(ret, err) { console.log(JSON.stringify(ret)); }); } var range1 = new auiRange({ element: document.getElementById("rangeVolume") //滑块容器 }, function(ret) { volume(ret.value); }) var range2 = new auiRange({ element: document.getElementById("rangeSeek") //滑块容器 }, function(ret) { seek(ret.value); })</script></html>复制代码
