增加官方播放器
This commit is contained in:
jiaogan
parent
ef1f4b5bc6
commit
783cc313f0
4
components/player/player.json
Normal file
4
components/player/player.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {}
|
||||||
|
}
|
||||||
105
components/player/player.ts
Normal file
105
components/player/player.ts
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
|
||||||
|
const {
|
||||||
|
getPlayletManager
|
||||||
|
} = tt;
|
||||||
|
Component({
|
||||||
|
pm: undefined,
|
||||||
|
data: {
|
||||||
|
adBanner: null,
|
||||||
|
videoAlbumId: null,
|
||||||
|
videoEpisodeId: null,
|
||||||
|
},
|
||||||
|
ready() {
|
||||||
|
const pm = getPlayletManager();
|
||||||
|
this.pm = pm;
|
||||||
|
|
||||||
|
pm.onPlay((e) => {
|
||||||
|
console.log("触发开始播放onPlay回调，时间是:", new Date());
|
||||||
|
});
|
||||||
|
pm.onPause((e) => {
|
||||||
|
console.error('触发暂停播放onPause回调', e)
|
||||||
|
})
|
||||||
|
pm.onEnded((e) => {
|
||||||
|
console.error('触发播放到末尾onEnded回调', e)
|
||||||
|
})
|
||||||
|
pm.onError((e) => {
|
||||||
|
console.error('触发onError回调', e)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 播放进度变化时
|
||||||
|
pm.onTimeUpdate((e) => {
|
||||||
|
// 播放进度变化时触发，返回当前播放时间点及视频总时长，单位：秒(s)。event.detail = { currentTime, duration }。
|
||||||
|
})
|
||||||
|
|
||||||
|
pm.onChangeEpisode((e) => {
|
||||||
|
//更新剧集信息
|
||||||
|
this.setData({
|
||||||
|
videoAlbumId: e.albumId,
|
||||||
|
videoEpisodeId: e.episodeId,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
pm.onShareSuccess((res) => {
|
||||||
|
console.log('shareSuccess-uuuu', res);
|
||||||
|
})
|
||||||
|
pm.onShareFail((res) => {
|
||||||
|
console.log('shareFail-uuuu', err);
|
||||||
|
})
|
||||||
|
|
||||||
|
pm.onClickUnlock((e) => {
|
||||||
|
this.adOpen()
|
||||||
|
})
|
||||||
|
|
||||||
|
this.adLoad()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//向父组件传值
|
||||||
|
emitInfoToParent(val:string,data?:any) {
|
||||||
|
const instance = this.selectOwnerComponent();
|
||||||
|
instance.emitInfoFromChildren(val,data);
|
||||||
|
},
|
||||||
|
|
||||||
|
adLoad() {
|
||||||
|
let isAdBanner: any = this.data.adBanner;
|
||||||
|
// const context: any = tt.createVideoContext(`${videoInfo.id}`);
|
||||||
|
// this.watchInfo.isvip = 0;
|
||||||
|
if (!isAdBanner) {
|
||||||
|
const adBanner: any = tt.createRewardedVideoAd({
|
||||||
|
adUnitId: "wh0y4vcxsbk7ixwktg",
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听错误
|
||||||
|
adBanner.onError((err: any) => {
|
||||||
|
tt.hideLoading({});
|
||||||
|
switch (err.errCode) {
|
||||||
|
case 1004:
|
||||||
|
// 无合适的广告
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
// 更多请参考错误码文档
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听视频播放完成
|
||||||
|
adBanner.onClose((res: any) => {
|
||||||
|
console.log(res, "resres")
|
||||||
|
if (res.isEnded) {
|
||||||
|
this.emitInfoToParent('advunlock',{album_id: this.data.videoAlbumId,episode_id:this.data.videoEpisodeId})
|
||||||
|
} else {
|
||||||
|
tt.showToast({
|
||||||
|
title: '看完广告方可解锁',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 预加载资源
|
||||||
|
adBanner.load();
|
||||||
|
this.setData({
|
||||||
|
adBanner: adBanner,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
55
components/player/player.ttml
Normal file
55
components/player/player.ttml
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<view class="video-header">
|
||||||
|
|
||||||
|
<view hidden="{{!playerShow}}">
|
||||||
|
<text style="background-color: deeppink;">这是顶部</text>
|
||||||
|
<!-- <text style="color: aliceblue;">111111111111111111111111122\n22222222222222222222222222233333</text> -->
|
||||||
|
|
||||||
|
|
||||||
|
<view style="width:100%;height:100%;display: flex;justify-content: space-between;">
|
||||||
|
<view style="width: 30%;">
|
||||||
|
<button bindtap="showDetailChange" style="font-size: 10px;margin-top: 20rpx;height: 80rpx;display: flex; justify-content: center; align-items: center; ">
|
||||||
|
<label tt:if="{{showDetail}}"> 当前显示详细日志 </label>
|
||||||
|
<label tt:else> 当前显示简易日志 </label>
|
||||||
|
</button>
|
||||||
|
<button bindtap="showOnTimeUpdateChange" style="font-size:8px;margin-top: 20rpx;height: 80rpx;display: flex; justify-content: center; align-items: center; ">
|
||||||
|
<label tt:if="{{showOnTimeUpdate}}"> 当前OnTimeUpdate日志开 </label>
|
||||||
|
<label tt:else> 当前OnTimeUpdate日志关 </label>
|
||||||
|
</button>
|
||||||
|
<button bindtap="getPlayletInfo" style="font-size: 10px;margin-top: 20rpx;height: 80rpx;display: flex; justify-content: center; align-items: center; ">调用getPlayletInfo</button>
|
||||||
|
|
||||||
|
<button bindtap="setPlayStatusPlay" style="font-size: 10px;margin-top: 20rpx;height: 80rpx;display: flex; justify-content: center; align-items: center; ">调用播放</button>
|
||||||
|
|
||||||
|
<button bindtap="setPlayStatusPause" style="font-size: 10px;margin-top: 20rpx;height: 80rpx;display: flex; justify-content: center; align-items: center; ">调用暂停</button>
|
||||||
|
|
||||||
|
<button bindtap="clearLog" style="font-size: 10px;margin-top: 20rpx;height: 80rpx;display: flex; justify-content: center; align-items: center; ">清除日志</button>
|
||||||
|
|
||||||
|
<!-- <button bindtap="changeSettings" style="font-size: small;">切换用户播放设置changeSettings</button> -->
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view style="width: 70%;">
|
||||||
|
|
||||||
|
<scroll-view scroll-y="{{true}}" scroll-with-animation="{{true}}" style="height: 500rpx;">
|
||||||
|
<text space="nbsp" style="margin-top: 20rpx;word-break:break-all;font-size: smaller;"
|
||||||
|
tt:if="{{showDetail && showOnTimeUpdate}}"> {{logDetail}} </text>
|
||||||
|
<text space="nbsp" style="margin-top: 20rpx;word-break:break-all;font-size: smaller;"
|
||||||
|
tt:elif="{{!showDetail && showOnTimeUpdate}}"> {{log}} </text>
|
||||||
|
<text space="nbsp" style="margin-top: 20rpx;word-break:break-all;font-size: smaller;"
|
||||||
|
tt:elif="{{showDetail && !showOnTimeUpdate}}"> {{logDetailWithoutOnTimeUpdate}} </text>
|
||||||
|
<text space="nbsp" style="margin-top: 20rpx;word-break:break-all;font-size: smaller;"
|
||||||
|
tt:else> {{logWithoutOnTimeUpdate}} </text>
|
||||||
|
<!-- <text space="nbsp" style="margin-top: 20rpx;word-break:break-all;font-size: smaller;">
|
||||||
|
{{log}}
|
||||||
|
|
||||||
|
</text> -->
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<button bindtap="emitInfoToParent" style="font-size:8px;margin-top: 20rpx;height: 80rpx;display: flex; justify-content: center; align-items: center; ">
|
||||||
|
第{{emitTimesPlayer}}次调用父组件方法
|
||||||
|
</button>
|
||||||
|
<text style="margin-bottom: 0;background-color: deeppink;">这是底部</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
6
components/player/player.ttss
Normal file
6
components/player/player.ttss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.video-header {
|
||||||
|
z-index: 9;
|
||||||
|
background-color: yellow;
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
14
pages/videoByte/videoByte.json
Normal file
14
pages/videoByte/videoByte.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"extends": "ext://industry/playlet-plugin",
|
||||||
|
"usingComponents": {
|
||||||
|
"player": "/components/player/player"
|
||||||
|
},
|
||||||
|
"isPageExtension": true,
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationBarTextStyle": "white",
|
||||||
|
"backgroundColor": "#fff",
|
||||||
|
"navigationStyle": "default",
|
||||||
|
"transparentTitle": "none",
|
||||||
|
"disableScroll": true,
|
||||||
|
"disableSwipeBack": true
|
||||||
|
}
|
||||||
154
pages/videoByte/videoByte.ts
Normal file
154
pages/videoByte/videoByte.ts
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
import {httpRequest} from "../../utils/httpReques";
|
||||||
|
|
||||||
|
const {
|
||||||
|
PlayletExtension,
|
||||||
|
getPlayletManager
|
||||||
|
} = tt;
|
||||||
|
|
||||||
|
// 可以使用tt.canIUse('PlayletExtension')判断是否可用，不可用可调用tt.navigateTo等跳转离开
|
||||||
|
|
||||||
|
PlayletExtension({
|
||||||
|
pm: undefined,
|
||||||
|
options: undefined,
|
||||||
|
data: {
|
||||||
|
watchInfo: null,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
emitInfoFromChildren(val,data) {
|
||||||
|
console.log('收到消息', val)
|
||||||
|
console.log('收到消息', data)
|
||||||
|
if(val=="advunlock"){
|
||||||
|
this.init('advunlock',data)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
const caniuse = !!tt.canIUse('PlayletExtension');
|
||||||
|
// console.log('行业SDK版本号', tt.getIndustrySdkInfo().version);
|
||||||
|
// console.log('TMAR版本号', tt.getSystemInfoSync().SDKUpdateVersion);
|
||||||
|
// console.error('caniuse', caniuse);
|
||||||
|
const pm = getPlayletManager();
|
||||||
|
this.pm = pm;
|
||||||
|
this.options = options;
|
||||||
|
this.setData({
|
||||||
|
tt_album_id: options.tt_album_id,
|
||||||
|
tt_episode_id: options.tt_episode_id,
|
||||||
|
seq: options.seq,
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
async onReady() {
|
||||||
|
console.log('页面完成Ready', JSON.stringify(options))
|
||||||
|
const pm = getPlayletManager();
|
||||||
|
const options = this.options;
|
||||||
|
|
||||||
|
// 初始化自定义组件
|
||||||
|
// this.pm.setConfig({
|
||||||
|
// activityInfo: [
|
||||||
|
// {
|
||||||
|
// icon: "https://dyxykjweb.hunanjj.cn/sta_images/icon/welfare_gift_icon.png",
|
||||||
|
// title: "福利",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// objectFit: 'contain'
|
||||||
|
// });
|
||||||
|
|
||||||
|
//是否展示解锁页
|
||||||
|
this.pm.setConfig({
|
||||||
|
showLockPage: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//播放器分享按钮
|
||||||
|
this.pm.onTapShare((e) => {
|
||||||
|
console.log(`/pages/videoByte/videoByte?is_continue=0&tt_album_id=${ this.data?.watchInfo?.album_id}&tt_episode_id=${ this.data?.watchInfo?.episode_id}&tid=${ this.options?.tid || ""}&launchsite=${ this.options?.launchsite || ""}`)
|
||||||
|
return { // 分享数据
|
||||||
|
title: "古言剧场",
|
||||||
|
desc: "精彩剧情，尽在古言剧场",
|
||||||
|
path: `/pages/videoByte/videoByte?is_continue=0&tt_album_id=${ this.data?.watchInfo?.album_id}&tt_episode_id=${ this.data?.watchInfo?.episode_id}&tid=${ this.options?.tid || ""}&launchsite=${ this.options?.launchsite || ""}`,
|
||||||
|
imageUrl: this.data?.watchInfo?.cover,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
//初始化页面分享内容
|
||||||
|
this.pm.getPlayletInfo().then(res => {
|
||||||
|
console.log('getPlayletInfo', res)
|
||||||
|
this.setData({
|
||||||
|
tt_album_id: res.albumId,
|
||||||
|
tt_episode_id: res.episodeId,
|
||||||
|
seq: res.seq
|
||||||
|
})
|
||||||
|
this.pm.setConfig({
|
||||||
|
shareParam: { // 分享数据
|
||||||
|
title: "古言剧场",
|
||||||
|
desc: "精彩剧情，尽在古言剧场",
|
||||||
|
path: `/pages/videoByte/videoByte?is_continue=0&tt_album_id=${ this.data?.watchInfo?.album_id}&tt_episode_id=${ this.data?.watchInfo?.episode_id}&tid=${ this.options?.tid || ""}&launchsite=${ this.options?.launchsite || ""}`,
|
||||||
|
imageUrl: this.data?.watchInfo?.cover,
|
||||||
|
}
|
||||||
|
// title: this.watchInfo.title,
|
||||||
|
// imageUrl: this.watchInfo.cover,
|
||||||
|
// desc: `精彩剧情，尽在${this.pageGlobalData.appName}`,
|
||||||
|
// path: `/pages/videobyte/index?tt_album_id=${this.$store.state.currentVideoInfo.album_id}&tt_episode_id=${this.$store.state.currentVideoInfo.episode_id}&is_continue=0&tid=${this.$store.state.linkParams.tid || ""}&launchsite=${this.$store.state.linkParams.launchsite || ""}`,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
|
||||||
|
},
|
||||||
|
async init(status?:string,data?:any) {
|
||||||
|
console.log("data",data)
|
||||||
|
let params = {
|
||||||
|
...this.options,
|
||||||
|
album_id: !!data ? data.album_id : this.options.tt_album_id,
|
||||||
|
episode_id: !!data ? data.episode_id : this.options.tt_episode_id,
|
||||||
|
sid: null,
|
||||||
|
id: null,
|
||||||
|
tt_album_id: null,
|
||||||
|
tt_episode_id: null,
|
||||||
|
adunlocking: status == 'advunlock' ? 1 : null
|
||||||
|
}
|
||||||
|
//初始化目录
|
||||||
|
const res = await httpRequest('/douyinNewRead', 'post', params);
|
||||||
|
//设置剧集上锁状态
|
||||||
|
const _freeList = res.data.freelist != null ? res.data.freelist : []
|
||||||
|
const _lockList = res.data.locklist != null ? res.data.locklist : []
|
||||||
|
console.log('res',res);
|
||||||
|
this.pm.setCatalog({
|
||||||
|
freeList: _freeList,
|
||||||
|
lockList: _lockList
|
||||||
|
})
|
||||||
|
const _watchinfo = {
|
||||||
|
...res.data.library,
|
||||||
|
...res.data.video,
|
||||||
|
...res.data.read_data
|
||||||
|
}
|
||||||
|
this.setData({
|
||||||
|
watchInfo: _watchinfo
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
lifetimes: {
|
||||||
|
|
||||||
|
ready() {
|
||||||
|
console.log('ready')
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
console.log('created')
|
||||||
|
},
|
||||||
|
|
||||||
|
attached() {
|
||||||
|
console.log('attached')
|
||||||
|
},
|
||||||
|
|
||||||
|
detached() {
|
||||||
|
console.log('detached')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
pageLifetimes: {
|
||||||
|
hide() {
|
||||||
|
console.log('触发hide')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
});
|
||||||
0
pages/videoByte/videoByte.ttml
Normal file
0
pages/videoByte/videoByte.ttml
Normal file
0
pages/videoByte/videoByte.ttss
Normal file
0
pages/videoByte/videoByte.ttss
Normal file
Loading…
x
Reference in New Issue
Block a user