小程序-云点播
2860元腾讯云代金券免费领取，付款直接抵现金，立即领取>>>
腾讯云海外服务器1折限时抢购，2核4G云主机661元/1年，立即抢购>>>
腾讯云服务器1折限时抢购，2核4G云主机698元/3年，立即抢购>>>
之前在Web端用 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 有不到之处请大家批评指正！！！
原创声明，本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论
相关文章
精选专题
活动推荐
关注
腾讯云开发者公众号
将获得
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者
扫码关注腾讯云开发者
领取腾讯云代金券