增加官方播放器
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