{
"path": "pages/recommend/video",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"app-plus": {
"subNVues": [{
"id": "video_mask",
"path": "pages/recommend/subnvue/video-mask",
"style": {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "480upx"
}
}]
}
}
},
<template>
<div class="wrapper">
<div :style="{'margin-top': statusBarHeight + 'px'}" :key="pick_object.id">
<video
class="video"
id="myVideo"
ref="myVideo"
:autoplay="is_autoplay"
:src="pick_object.video"
:title="pick_object.title"
:poster="pick_object.cover"
@play="videoplay"
@timeupdate="timeupdate"
@fullscreenchange="changeScreen"
:show-center-play-btn="show_center_play_btn"
:controls="controls"
>
<!-- enable-danmu
danmu-btn -->
<!-- 全屏触发 -->
<!-- <cover-view class="back-button" @click="go_back" v-if="!fullScreen"><image src="../../../static/fanhui_white.png" class="back-icon"></image></cover-view> -->
<cover-view class="btnbox" @click="go_back" v-if="!fullScreen" @click.stop="" >
<div class="top-left">
<text class="cyh-font"></text>
</div>
</cover-view>
<cover-view class="purchase" v-if="showbuy">
<text class="pur_text">前去购买</text>
</cover-view>
</video>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pick_object:{}, // 视频上下全文
is_autoplay: false, // 是否自动播放
showbuy: false, // 是否显示购买按钮
controls: false, // 是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
show_center_play_btn: false, // 是否显示视频中间的播放按钮
videoContext: '', // 视频上下文
fullScreen: false, // 判断当前是横屏还是竖屏
timeupTime: 0, // 视频播放进度
statusBarHeight: '', // 高
}
},
beforeCreate() {
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "texticons",
'src': "url('//static/video/text-icon.ttf')"
});
// #endif
},
onLoad() {
// 监听事件
uni.$on('Set_pick_object',(pick_object)=>{
this.pick_object = pick_object;
this.autoplay()
})
},
onUnload() {
// 移除监听事件
uni.$off('Set_pick_object');
},
created() {
let _t = this;
setTimeout(() => { //获取状态栏高度,setTimeout后才能调用uni.
uni.getSystemInfo({
success: function(res) {
_t.statusBarHeight = res.statusBarHeight;
}
});
}, 1);
},
onReady: function() {
this.videoContext = uni.createVideoContext(`myVideo`,this)
},
methods:{
// 判断是否自动播放
autoplay(){
// 判断是否免费 判断是否是试听视频 判断是否已经收费
if(this.pick_object.free || this.pick_object.free_end > 0){
this.play()
// this.is_autoplay = true
this.show_center_play_btn = true // 是否显示视频中间的播放按钮
this.controls = true // 是否显示默认播放控件
this.showbuy = false
}else{
this.show_center_play_btn = false // 是否显示视频中间的播放按钮
this.controls = false // 是否显示默认播放控件
this.showbuy = true
}
},
play(){
this.videoContext.play()
},
pause(){
this.videoContext.pause()
},
timeupdate(event){
this.timeupTime = event.detail.currentTime
// this.$emit('timeupChange', event.detail.currentTime);
this.audition()
},
videoplay(event){
this.audition()
},
// 试听 判断是否播放
audition(){
if(this.pick_object.free_end){
if(this.timeupTime >= this.pick_object.free_end){
this.videoContext.seek(this.pick_object.free_end)
this.videoContext.stop()
// this.pause()
}
}
},
changeScreen(e) {
// const subNVue = uni.getSubNVueById('video_mask')
this.fullScreen = !this.fullScreen
if(e.detail.direction == 'horizontal'){
// subNVue.show('slide-in-top', 250)
// subNVue.hide('fade-out', 250)
}else{
// subNVue.hide('fade-out', 250)
// subNVue.show('slide-in-top', 250)
}
},
go_back(){
var unl = getCurrentPages()
if(unl.length > 1){
uni.navigateBack();
}else{
uni.reLaunch({
url: '/pages/recommend/index'
});
}
}
}
}
</script>
<style scoped lang="scss">
/* #ifndef APP-PLUS-NVUE */
@font-face {
font-family: "texticons";
src: url('~@/static/video/text-icon.ttf') format('truetype');
}
/* #endif*/
.cyh-font{
font-size: 18px;
color: #fff;
/* #ifndef APP-PLUS-NVUE */
font-family: "texticons";
/* #endif*/
font-family: texticons;
}
.wrapper {
position: relative;
flex: 1;
background-color: #000;
}
.cell {
padding: 10rpx 0;
flex-direction: row;
flex-wrap: nowrap;
}
.controls-top{
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
position: absolute;
background-image: linear-gradient(to top , rgba(0,0,0,0) , rgba(0,0,0,0.8));
height: 80rpx;
/* transform: translateY(-80rpx); */
top: 0;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 80rpx 0 60rpx;
}
.back-image{
width: 44rpx;
height: 44rpx;
padding: 18rpx 36rpx;
/* #ifndef APP-PLUS-NVUE */
box-sizing: content-box;
/* #endif */
}
.VerticalScreenReturns{
position: absolute;
width: 44rpx;
height: 44rpx;
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif*/
left: 24rpx;
top: 0;
padding: 18rpx 12rpx;
z-index: 2;
}
.back-button {
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
margin-top: 25px;
margin-left: 15px;
z-index: 2;
position: absolute;
}
.back-icon {
width: 20px;
height: 20px;
}
.purchase{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
text-align: center;
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
}
.pur_text{
background-color: #6b6bff;
color: #fff;
padding: 20rpx 30rpx;
border-radius: 8rpx;
font-size: 28rpx;
}
.btnbox{
position: absolute;
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
height: 40px;
width: 100%;
top: 0;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 40px 0 30px;
}
.top-left{
flex-direction: row;
align-items: center;
font-size: 12px;
color: #fff;
}
</style>
4 个回复
1***@qq.com (作者) - 前端小菜鸡,www.superchester.cn
有没有人呀
1***@qq.com (作者) - 前端小菜鸡,www.superchester.cn
沉贴咯
六七四十二
楼主有想出处理办法吗?同遇到这个问题了
试过另一篇帖子的方法:https://ask.dcloud.net.cn/article/37837
但是用ref也无法获取到
l***@163.com
遇到同样的问题