小程序-云点播

之前在Web端用 h5connect.js 方式点播视频，现在需要移动到微信小程序中，求大佬解决帮助，急急急.... 谢谢啦！

因为视频服务器存在别人那里，他们就只给我们提供了 h5connect.js 来获取视频

按照小程序的开发方式，（播放域名和推送地址随机生成一个id）我们如何根据ID来获取对应的视频地址？

<!--pages/push-config/push-config.wxml-->

<view class="mainUI">

<view class='title' style='padding-top:{{(headerHeight + statusBarHeight)/2 - 12}}px'>

<text>RTMP推流</text>

</view>

<view class='item' style='padding-top:2vh'>

<text class='item-title'>推流获取</text>

<button class="item-button1" bindtap="onScanQR">扫码读取</button>

<button class="item-button1" bindtap="onNewUrlClick">自动生成</button>

</view>

<view class='item'>

<text class='item-title'>推流地址</text>

<input class='item-input' placeholder="rtmp://" focus="{{focusPush}}" bindtap='onPushInputTap' bindinput="onPushInputChange" value="{{pushUrl}}"></input>

<image class='item-image' bindtap="onCopyPushUrl" src='/pages/Resources/copy.png'></image>

</view>

<view class='item'>

<text class='item-title'>播放地址</text>

<input class='item-input' placeholder="http://" focus="{{focusPlay}}" bindtap='onPlayInputTap' bindinput="onPlayInputChange" value="{{playUrl}}"></input>

<image class='item-image' bindtap="onCopyPlayUrl" src='/pages/Resources/copy.png'></image>

</view>

<view class='item'>

<text class='item-title'>画面质量</text>

<radio-group class="radio-group" bindchange="modeRadioChange">

<label class="radio" wx:for="{{modeItems}}" wx:key="" class="{{mode == item.value ? 'bc_blue white': 'blue'}}">

<radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.title}}

</label>

</radio-group>

</view>

<view class='item'>

<text class='item-title'>画面方向</text>

<radio-group class="radio-group" bindchange="orientationRadioChange">

<label class="radio" wx:for="{{orientationItems}}" wx:key="" class="{{orientation == item.value ? 'bc_blue white': 'blue'}}">

<radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.title}}

</label>

</radio-group>

</view>

<view class='item'>

<text class='item-title'>仅推声音</text>

<switch class='item-switch' checked="{{!enableCamera}}" bindchange="switchChange" />

</view>

</view>

<view class='start-box'>

<button class='start' bindtap="startPush" src='/pages/Resources/logo.png'>开始</button>

</view>

<view class='logo-box'>

<image class='logo' src='/pages/Resources/logo.png'></image>

</view>

<cover-image class='close' style="top:{{(headerHeight + statusBarHeight) - 26}}rpx" src="/pages/Resources/back.png" bindtap="onBack"></cover-image>

// pages/push-config/push-config.js

const app = getApp()

Page({

/**

   * 页面的初始数据

   */

  data: {

    modeItems: [

{ value: 'SD', title: 'SD'},

{ value: 'HD', title: 'HD'},

{ value: 'FHD', title: 'FHD'},

    ],

    mode :'SD',

    orientationItems: [

{ value: 'vertical', title: '竖屏推流' },

{ value: 'horizontal', title: '横屏推流' },

    ],

    orientation: 'vertical',

    enableCamera : true,

    focusPush: false,

    focusPlay: false,

    tapTime: '', // 防止两次点击操作间隔太快

    headerHeight: app.globalData.headerHeight,

    statusBarHeight: app.globalData.statusBarHeight,

},

onPushInputTap: function () {

this.setData({

      focusPush: true

})

},

onPushInputChange: function (e) {

this.setData({

      pushUrl: e.detail.value,

})

},

onPlayInputTap: function () {

this.setData({

      focusPlay: true

})

},

onPlayInputChange: function (e) {

this.setData({

      playUrl: e.detail.value,

})

},

modeRadioChange: function (e) {

this.setData({

      mode: e.detail.value

});

},

orientationRadioChange: function (e) {

this.setData({

      orientation: e.detail.value

});

},

switchChange: function (e) {

this.setData({

      enableCamera: !e.detail.value

});

},

onScanQR: function () {

var self = this;

wx.scanCode({

      onlyFromCamera: true,

success: (res) => {

console.log(res);

self.setData({

          pushUrl: res.result,

          playUrl: "",

})

}

})

},

onNewUrlClick: function () {

var self = this;

wx.request({

      url: 'https://lvb.qcloud.com/weapp/utils/get_test_pushurl',

success: (res) => {

var pushUrl = res.data['url_push'];

var rtmpUrl = res.data['url_play_rtmp'];

var flvUrl = res.data['url_play_flv'];

var hlsUrl = res.data['url_play_hls'];

var accUrl = res.data['url_play_acc'];

console.log(pushUrl);

self.setData({

          pushUrl: pushUrl,

          playUrl: flvUrl,

})

wx.showToast({

          title: '获取地址成功',

})

},

fail: (res) => {

console.log(res);

wx.showToast({

          title: '网络或服务器异常',

})

}

})

},

onCopyPushUrl: function () {

wx.setClipboardData({

      data: this.data.pushUrl,

})

},

onCopyPlayUrl: function () {

wx.setClipboardData({

      data: this.data.playUrl,

})

},

startPush : function () {

var self = this;

// 防止两次点击操作间隔太快

var nowTime = new Date();

if (nowTime - this.data.tapTime < 1000) {

return;

}

if (!self.data.pushUrl || self.data.pushUrl.indexOf("rtmp://") != 0) {

wx.showModal({

        title: '提示',

        content: '推流地址不合法，请点击自动生成按钮先获取腾讯云推流地址',

        showCancel: false

});

return;

}

var url = '/pages/live-pusher-demo/push?pushUrl=' + encodeURIComponent(self.data.pushUrl) + '&mode=' + self.data.mode + '&orientation=' + self.data.orientation + '&enableCamera=' + self.data.enableCamera;

console.log(url);

wx.navigateTo({

      url: url

});

self.setData({ 'tapTime': nowTime });

},

/**

   * 生命周期函数--监听页面加载

   */

onLoad: function (options) {

},

/**

   * 生命周期函数--监听页面初次渲染完成

   */

onReady: function () {

},

/**

   * 生命周期函数--监听页面显示

   */

onShow: function () {

},

/**

   * 生命周期函数--监听页面隐藏

   */

onHide: function () {

},

/**

   * 生命周期函数--监听页面卸载

   */

onUnload: function () {

},

/**

   * 页面相关事件处理函数--监听用户下拉动作

   */

onPullDownRefresh: function () {

},

/**

   * 页面上拉触底事件的处理函数

   */

onReachBottom: function () {

},

/**

   * 用户点击右上角分享

   */

onShareAppMessage: function () {

},

onBack: function () {

wx.navigateBack({

      delta: 1

});

}

})

以上是我写的一个案例demo 有不到之处请大家批评指正！！！