358 lines
13 KiB
Plaintext
358 lines
13 KiB
Plaintext
<template>
|
||
<view class="container">
|
||
<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'">
|
||
<!--
|
||
1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
|
||
2.为了 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行）
|
||
3.由于方法比较多，可以采取下面的方式查看代码：
|
||
（1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
|
||
（2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
|
||
-->
|
||
<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*1" :show-scrollbar="false"
|
||
ref="listBox" :pagingEnabled="true" :scrollable="true">
|
||
<!-- 循环数据 -->
|
||
<cell v-for="(item,i) in dataList" :key="i">
|
||
<!-- 用div把视频模组套起来 -->
|
||
<div :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
|
||
<!-- <view v-if="Math.abs(k-i)<=1"> -->
|
||
<view v-if="Math.abs(k-i)<=1">
|
||
<view class="root">
|
||
<video :ref="'item'+i" :id="item.id" :loop="true" :autoplay="i == k"
|
||
:src="item.pull_url" :muted="item.isplay" :enable-progress-gesture="false"
|
||
:page-gesture="false" :controls="false" :show-loading="true" :is-live='true'
|
||
@error='vedioerr' :show-fullscreen-btn="false" :show-center-play-btn="false"
|
||
:style="boxStyle" :object-fit="object_fit" @timeupdate="timeupdate($event,i)">
|
||
|
||
</video>
|
||
<!-- {{item}} {{i}} -->
|
||
|
||
</view>
|
||
<sd-float-page :room='room' :msgList='msgList'
|
||
:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;position: absolute;' "></sd-float-page>
|
||
</view>
|
||
|
||
</div>
|
||
</cell>
|
||
</list>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import list from '@/uni_modules/uview-ui/libs/config/props/list';
|
||
import sdFloatPage from '@/components/sd-live-page/livepage.nvue';
|
||
import {
|
||
VUE_APP_WS_URL
|
||
} from '@/config/app';
|
||
|
||
import json from '../../static/js/json';
|
||
export default {
|
||
components: {
|
||
sdFloatPage
|
||
},
|
||
data() {
|
||
return {
|
||
imgHost: '',
|
||
//下面打🌟号的是必须要的基础字段
|
||
//下面打💗号的是拥有滑动条的必须字段
|
||
dataList: [], //用于数据循环的列表🌟💗
|
||
wHeight: 0, //获取的屏幕高度🌟💗
|
||
boxStyle: { //视频，图片封面样式🌟💗
|
||
'height': 0,
|
||
'width': 0,
|
||
},
|
||
k: 0, //默认为0🌟💗
|
||
max: 2,
|
||
playIngIds: [], //正在播放的视频id列队，列队用于处理滑动过快导致的跳频问题🌟💗
|
||
ready: false, //可忽略
|
||
isDragging: false, //false代表停止滑动🌟💗
|
||
refreshing: true, //用于下拉刷新🌟💗
|
||
windowWidth: 0, //获取屏幕宽度🌟💗
|
||
windowHeight: 0,
|
||
dex: [0, 0], //用于判断是上滑还是下滑，第一个存旧值，第二个存新值【目前在1.0.7已经废弃】
|
||
currents: 0, //用于左右滑动，0代表视频界面，1代表右滑界面🌟💗
|
||
platform: '', //用于获取操作系统：ios、android🌟💗
|
||
playIng: false, //用于视频初始化时是否播放，默认不播放🌟💗
|
||
videoTime: '', //视频总时长，这个主要用来截取时间数值💗
|
||
videoTimes: '', //视频时长，用这个来获取时间值，例如：00:30这个时间值💗
|
||
changeTime: '', //显示滑动进度条时变化的时间💗
|
||
isShowimage: false, //是否显示封面【1.0.4已废弃，但是意思需要记住】
|
||
currenttimes: 0, //当前时间💗
|
||
isShowProgressBarTime: false, //是否拖动进度条，如果拖动（true）则显示进度条时间，否则不显示（false）【1.0.4已废弃，但是意思需要记住】
|
||
ProgressBarOpacity: 0.7, //进度条不拖动时的默认值，就是透明的💗
|
||
dotWidth: 0, //播放的小圆点，默认没有💗
|
||
deleteHeight: 0, //测试高度🌟💗
|
||
percent: 0, //百分小数💗
|
||
currentPosition: 0, //滑块当前位置💗//2.0已弃用，现已用于后端参数
|
||
currentPositions: 0, //滑块当前位置的副本💗//2.0已弃用，现已用于后端参数
|
||
newTime: 0, //跟手滑动后的最新时间💗
|
||
timeNumber: 0, //🌟💗
|
||
ProgressBarBottom: 20, //进度条离底部的距离💗
|
||
object_fit: 'cover', //视频样式默认包含🌟💗
|
||
mode: 'aspectFit', //图片封面样式🌟💗
|
||
timeout: "", //🌟用来阻止 setTimeout()方法
|
||
voice: "", //🌟用来阻止 setTimeout()方法
|
||
oldVideo: "",
|
||
isAutoplay: false, //是否开启自动播放(默认不开启)
|
||
autoplayText: "开启自动播放",
|
||
msgList: [],
|
||
room: {},
|
||
socketTask: null,
|
||
userName: '',
|
||
|
||
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
async k(new_k, old_k) { //监听 k 值的变化，可以控制视频的播放与暂停
|
||
const max = new_k + 2;
|
||
if (this.max < max) {
|
||
this.max = max;
|
||
}
|
||
// if (this.oldCurrent != this.currentNav) {
|
||
// this.oldCurrent = this.currentNav
|
||
// return false
|
||
// }
|
||
this.dataList[old_k].playIng = false //如果视频暂停，就加载封面
|
||
this.dataList[old_k].isplay = true
|
||
this.dataList[old_k].state = 'pause'
|
||
// console.log('预留第' + (old_k) + '个视频：' + this.dataList[old_k].community_id)
|
||
// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
|
||
uni.createVideoContext(this.dataList[old_k].community_id, this)
|
||
.pause() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
|
||
// console.log('已经暂停 --> 第' + (old_k) + '个视频～') //提示
|
||
this.dataList[new_k].state = 'play'
|
||
this.dataList[new_k].isplay = false
|
||
this.dataList[new_k].playIng = true
|
||
uni.createVideoContext(this.dataList[new_k].community_id, this).play()
|
||
}
|
||
},
|
||
onShow() {
|
||
uni.hideLoading();
|
||
// console.log('回到前台' + this.dataList.length);
|
||
if (this.dataList.length !== 0) {
|
||
this.dataList[this.k].state = 'play';
|
||
setTimeout(() => {
|
||
uni.createVideoContext(this.dataList[this.k].id, this).play()
|
||
}, 250)
|
||
}
|
||
},
|
||
onHide() {
|
||
this.dataList[this.k].state = 'pause'; //界面隐藏也要停止播放视频
|
||
setTimeout(() => {
|
||
uni.createVideoContext(this.dataList[this.k].community_id, this).pause(); //暂停以后继续播放
|
||
}, 250)
|
||
// console.log('到后台');
|
||
},
|
||
onLoad(options) {
|
||
this.platform = uni.getSystemInfoSync().platform
|
||
this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
|
||
this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
|
||
this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
|
||
this.boxStyle.height = this.wHeight; //改变视频高度
|
||
console.log(this.boxStyle.height)
|
||
this.room = JSON.parse(decodeURIComponent(options.data));
|
||
|
||
this.get()
|
||
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
Ready() {},
|
||
methods: {
|
||
|
||
|
||
|
||
autoPlay() {
|
||
this.isAutoplay = !this.isAutoplay;
|
||
if (!this.isAutoplay) {
|
||
this.autoplayText = "开启自动播放"
|
||
uni.showToast({
|
||
title: "关闭自动播放",
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
} else {
|
||
this.autoplayText = "关闭自动播放"
|
||
uni.showToast({
|
||
title: "开启自动播放",
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
},
|
||
getData() {
|
||
// 这里就是数据加载完以后再向后端发送数据的地方,
|
||
|
||
|
||
},
|
||
vedioerr(e) {
|
||
let timer = null
|
||
if (e.tye = 'error') {
|
||
timer = setInterval((res) => {
|
||
uni.createVideoContext('myVideo', this).play()
|
||
console.log('重新连接', '1111111111')
|
||
}, 600000)
|
||
} else {
|
||
timer = null
|
||
}
|
||
|
||
},
|
||
|
||
touchstart(event) {
|
||
this.dataList[this.k].isShowimage = true //刚触摸的时候就要显示预览视频图片了
|
||
this.dataList[this.k].isShowProgressBarTime = true //显示时间线
|
||
this.ProgressBarOpacity = 1 //让滑块显示起来更明显一点
|
||
this.dotWidth = 10 //让点显示起来更明显一点
|
||
},
|
||
touchend() { //当手松开后，跳到最新时间
|
||
uni.createVideoContext(this.dataList[this.k].community_id, this).seek(this.newTime)
|
||
if (this.dataList[this.k].state == 'pause') {
|
||
this.dataList[this.k].state = 'play'
|
||
uni.createVideoContext(this.dataList[this.k].community_id, this).play()
|
||
}
|
||
this.dataList[this.k].isShowProgressBarTime = false //触摸结束后，隐藏时间线
|
||
this.dataList[this.k].isShowimage = false //触摸结束后，隐藏时间预览
|
||
this.ProgressBarOpacity = 0.5 //隐藏起来进度条，不那么明显了
|
||
this.dotWidth = 0 //隐藏起来进度条，不那么明显了
|
||
},
|
||
touchmove(event) { //当手移动滑块时，计算位置、百分小数、新的时间
|
||
var msg = []
|
||
if (this.videoTime !== '') {
|
||
msg = this.videoTime.split(':')
|
||
}
|
||
var timeNumber = Number(msg[0]) * 60 + Number(msg[1])
|
||
this.currentPositions = event.changedTouches[0].screenX
|
||
this.percent = this.currentPositions / this.windowWidth
|
||
this.newTime = this.percent * timeNumber
|
||
this.currenttimes = parseInt(this.newTime)
|
||
let theTime = this.newTime
|
||
let middle = 0; // 分
|
||
if (theTime > 60) {
|
||
middle = parseInt(theTime / 60);
|
||
theTime = parseInt(theTime % 60);
|
||
}
|
||
this.changeTime =
|
||
`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
|
||
},
|
||
timeupdate(event, index) { //计算滑块当前位置，计算当前百分小数
|
||
if (index == this.k) {
|
||
var currenttime = event.detail.currentTime
|
||
this.timeNumber = Math.round(event.detail.duration)
|
||
this.getTime()
|
||
this.percent = currenttime / this.timeNumber
|
||
this.currentPosition = this.windowWidth * this.percent
|
||
let theTime = currenttime
|
||
let middle = 0; // 分
|
||
if (theTime > 60) {
|
||
middle = parseInt(theTime / 60);
|
||
theTime = parseInt(theTime % 60);
|
||
}
|
||
this.changeTime =
|
||
`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
|
||
//自动切换视频
|
||
if (this.isAutoplay) { //true,代表自动播放
|
||
if (Math.round(currenttime) == this.timeNumber - 1) {
|
||
const dom = uni.requireNativePlugin('dom')
|
||
let doms = 'item' + (this.k + 1)
|
||
setTimeout(() => {
|
||
let el = this.$refs[doms][0]
|
||
dom.scrollToElement(el, {
|
||
offset: 0,
|
||
animated: true
|
||
})
|
||
}, 500)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
getTime() { //得到时间函数
|
||
this.videoTime = this.formatSeconds(this.timeNumber);
|
||
var msg = []
|
||
if (this.videoTime !== '') {
|
||
msg = this.videoTime.split(':')
|
||
}
|
||
this.videoTimes = `${msg[0]>9?msg[0]:'0'+msg[0]}:${msg[1]>9?msg[1]:'0'+msg[1]}`;
|
||
},
|
||
formatSeconds(value) { //获取时间函数
|
||
let theTime = parseInt(value); // 秒
|
||
let middle = 0; // 分
|
||
if (theTime > 60) {
|
||
middle = parseInt(theTime / 60);
|
||
theTime = parseInt(theTime % 60);
|
||
}
|
||
return `${middle>9?middle:middle}:${theTime>9?theTime:theTime}`;
|
||
},
|
||
moreVideo(index) {
|
||
|
||
},
|
||
toVideo(index) {
|
||
|
||
},
|
||
scrolls(event) {
|
||
|
||
this.showManage = false;
|
||
this.isDragging = event.isDragging;
|
||
if (!event.isDragging) { //isDragging：判断用户是不是在滑动，滑动：true，停止滑动：false。我们要用户停止滑动时才给 k 赋值，这样就可以避免很多麻烦
|
||
var i = Math.round(Math.abs(event.contentOffset.y) / (this.wHeight - this.deleteHeight +
|
||
1)) //先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
|
||
if (i !== this.k) { //这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
|
||
if (uni.getSystemInfoSync().platform == 'ios') {
|
||
this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
|
||
this.dataList[this.k].state = 'play'
|
||
// console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
|
||
} else {
|
||
clearTimeout(this.timers);
|
||
this.timers = setTimeout(() => {
|
||
this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
|
||
this.dataList[this.k].state = 'play'
|
||
// console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
|
||
}, 80)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
get() {
|
||
let that = this
|
||
var msg = [this.room];
|
||
console.log(this.room)
|
||
for (let i = 0; i < msg.length; i++) {
|
||
msg[i]['isMore'] = false
|
||
msg[i]['playIng'] = false
|
||
msg[i]['state'] = false
|
||
msg[i]['isplay'] = false
|
||
msg[i]['loading'] = false
|
||
msg[i]['id'] = msg[i]['live_stream_id']
|
||
}
|
||
this.dataList = msg;
|
||
|
||
if (this.dataList.length !== 0) {
|
||
|
||
this.dataList[this.k].state = 'play';
|
||
uni.createVideoContext(this.dataList[this.k].id, this).play()
|
||
this.page = that.page + 1
|
||
}
|
||
|
||
console.log(this.dataList, this.dataList[this.k].id, 222222)
|
||
},
|
||
onpullingdown() {
|
||
this.refreshing = true
|
||
},
|
||
onrefresh() {
|
||
setTimeout(() => {
|
||
this.refreshing = false
|
||
}, 1000)
|
||
},
|
||
|
||
},
|
||
onReachBottom() {
|
||
uni.$emit('onReachBottom');
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
|
||
</style> |