Skip to content

C
CFFP-HB
Commit 42b8170d by zeyang
Options

视频播放统计

parent 7a498a48
Showing with 241 additions and 40 deletions
myPackageA/videoProject/videoDetail.vue
<template> <template>
<view class="content"> <view class="content">
<view class="video"> <view class="video">
<video id="myVideo" :src="courseInfo.filePathOss" :poster="courseInfo.fileFirstImage" object-fit="contain" :title="courseInfo.fileTitle" <video id="myVideo" :src="courseInfo.filePathOss" :poster="courseInfo.fileFirstImage" object-fit="contain"
:initial-time="viewTime" title="11" @play="playVideo" @pause="pause" @timeupdate="timeupdate" :title="courseInfo.fileTitle" style="width: 100vw;height: 500rpx;"
style="width: 100vw;height: 500rpx;"></video> :initial-time="viewTime" @timeupdate="timeupdate" @play="playVideo" @pause="pause" ></video>
</view> </view>
<scroll-view id="scrollView" scroll-y="true" :style="{height:scrollViewHeight+'px'}" <scroll-view id="scrollView" scroll-y="true" :style="{height:scrollViewHeight+'px'}"
@scrolltolower="scrolltolower"> @scrolltolower="scrolltolower">
...@@ -12,13 +12,14 @@ ...@@ -12,13 +12,14 @@
<view> <view>
{{courseInfo.fileTitle}} {{courseInfo.fileTitle}}
</view> </view>
<view class="iconBottom"> <view :class="isShow?'iconTop':'iconBottom'" @click="isShow=!isShow">
<text class="iconfont icon-youjiantou"></text> <text class="iconfont icon-youjiantou"></text>
</view> </view>
</view> </view>
<view class="videoUser"> <view class="videoUser">
<view class="videoUserImage"> <view class="videoUserImage">
<image :src="lecturerInfo.lecturerUrl" style="height: 70rpx;border-radius: 200rpx;" mode="aspectFit"></image> <image :src="lecturerInfo.lecturerUrl" style="height: 70rpx;border-radius: 200rpx;"
mode="aspectFit"></image>
</view> </view>
<view class="videoUserContent"> <view class="videoUserContent">
<view class="videoUserName"> <view class="videoUserName">
...@@ -29,8 +30,8 @@ ...@@ -29,8 +30,8 @@
</view> --> </view> -->
</view> </view>
</view> </view>
<view class="videoDetail"> <view class="videoDetail" v-if="isShow">
<view style="color: #414141;" v-html="courseInfo.fileIntroduce"></view> <view v-html="courseInfo.fileIntroduce"></view>
</view> </view>
</view> </view>
...@@ -44,17 +45,17 @@ ...@@ -44,17 +45,17 @@
</view> </view>
</view> </view>
<view class="relatedVideoList"> <view class="relatedVideoList">
<view class="relatedVideoItem" v-for="item in 10"> <view class="relatedVideoItem" v-for="item in relatedCourseList" @click="play(item)">
<view style="width: 46.5vw;"> <view style="width: 46.5vw;">
<image style="height: 25vw;border-radius: 16rpx;" src="../../static/images/irrNavBg.jpg" <image style="height: 46.5vw;border-radius: 16rpx;" :src="item.displayImage"
mode="aspectFill"></image> mode="aspectFill"></image>
</view> </view>
<view class="relatedVideoTitle"> <view class="relatedVideoTitle">
这是一个标题················ {{item.fileTitle}}
</view> </view>
</view> </view>
</view> </view>
<uni-load-more iconType="circle" :status="moreStatus"></uni-load-more> <!-- <uni-load-more iconType="circle" :status="moreStatus"></uni-load-more> -->
</view> </view>
</scroll-view> </scroll-view>
...@@ -67,28 +68,175 @@ ...@@ -67,28 +68,175 @@
import api from "@/api/api"; import api from "@/api/api";
import { cffpURL } from "@/environments/environment"; import { cffpURL } from "@/environments/environment";
import common from '../../common/common'; import common from '../../common/common';
import { onLoad, onPageScroll } from "@dcloudio/uni-app"; import { onLoad,onReady,onUnload, onPageScroll } from "@dcloudio/uni-app";
let windowHeight = ref(0); let windowHeight = ref(0);
let scrollViewHeight = ref(0); let scrollViewHeight = ref(0);
//是否展示详细信息
const isShow = ref(false);
// more/loading/noMore // more/loading/noMore
let moreStatus = ref('more'); let moreStatus = ref('more');
let userId = ref(''); let userId = ref('');
let videoId = ref(''); let videoId = ref('');
//课程
let courseInfo = ref({ let courseInfo = ref({
filePathOss: '', filePathOss: '',
fileFirstImage: '', fileFirstImage: '',
fileTitle:'', fileTitle: '',
fileIntroduce:'' fileIntroduce: '',
packFileId:''
}); });
//讲师
let lecturerInfo = ref({ let lecturerInfo = ref({
lecturerUrl:'', lecturerUrl: '',
lecturerName:'', lecturerName: '',
lecturerIntroduce:'' lecturerIntroduce: ''
});
//相关视频
let relatedCourseList = ref([]);
//视频组件上下文
const videoContext = ref(null);
//播放起始时间
const viewTime:any = ref(0);
//视频时长
const totalTime:any = ref(0);
//视频是否暂停状态
const isPauseFlag = ref(true);
//新的视频信息
const newCourseInfo = ref({
fileId:'',
packFileId:''
});
//视频播放最新记录
const videoPlaybackInfo = ref({
id:'',
viewTime:'',
totalTime:''
}); });
//保存记录后返回的Id
const playbackId = ref(null);
//定时器
const timer = ref(null);
const packFileId = ref(null);
// 相关列表点击播放
const play=async item=> {
videoContext.value.pause();
if (videoId.value != item.fileId) {
// 当点击的课程和当前播放的课程不一致时，执行此方法
uni.showLoading({
title: '加载中'
});
uni.setStorageSync('cffp_videoId',item.fileId);
newCourseInfo.value = {
fileId: item.fileId,
packFileId: item.packFileId,
}
if (isPauseFlag) {
pause();
}
}
}
const saveVideoPlayback=()=> {
// 视频播放轨迹保存
const param = {
id: playbackId.value ? playbackId.value : null,
systemType: 1,
userId: userId.value,
fileId: videoId.value,
packFileId: courseInfo.value.packFileId,
totalTime: Math.floor(totalTime.value),
viewTime: Math.floor(viewTime.value),
playbackStatus: viewTime.value >= totalTime.value ? '2' : '1'
}
return new Promise((resolve, reject) => {
if (viewTime.value == 0) {
resolve('success');
return;
}
api.saveVideoPlayback(param).then(res => {
if (res['success']) {
playbackId.value = res['data']['id'];
resolve('success');
} else {
reject('fail')
}
}).catch((err) => {
reject('fail')
})
})
}
const findVideoPlayback=()=> {
// 查询视频播放最新记录
const param = {
systemType: 1,
userId: userId.value,
fileId: videoId.value,
packFileId: courseInfo.value.packFileId,
}
api.findVideoPlayback(param).then(res => {
if (res['success']) {
videoPlaybackInfo.value = res['data'];
viewTime.value = videoPlaybackInfo.value.viewTime ?? 0;
totalTime.value = videoPlaybackInfo.value.totalTime ?? 0;
packFileId.value = videoPlaybackInfo.value.id ?? null;
// this.isRenderVideo = true;
// 跳转到指定位置
videoContext.value.seek(viewTime.value);
uni.hideLoading();
} else {
// this.isRenderVideo = true;
totalTime.value = viewTime.value= 0;
// 跳转到指定位置
videoContext.value.seek(viewTime.value);
uni.hideLoading();
}
})
};
// 点击播放
const playVideo=(e)=>{
isPauseFlag.value = false;
if (viewTime.value >= totalTime.value) {
viewTime.value = 0;
videoContext.value.seek(viewTime);
}
// 开始/继续播放
if (timer.value) {
clearInterval(timer)
}
timer.value = setInterval(() => {
saveVideoPlayback()
}, 20 * 1000)
}
// 暂停播放
const pause = async ()=> {
isPauseFlag.value = true;
if (timer.value) {
clearInterval(timer.value)
}
const result = await saveVideoPlayback();
if (result == 'success' && newCourseInfo.value.fileId) {
videoId.value = newCourseInfo.value.fileId;
courseInfo.value.packFileId = newCourseInfo.value.packFileId;
playbackId.value = null;
loadCourseDetail();
}
}
//播放进度改变触发事件
const timeupdate=(e)=> {
totalTime.value = e.detail.duration;
// 播放进度变化
viewTime.value = e.detail.currentTime > totalTime.value ? totalTime.value : e.detail.currentTime;
}
//滑动到底事件 //滑动到底事件
const scrolltolower = res => { const scrolltolower = res => {
...@@ -115,20 +263,13 @@ ...@@ -115,20 +263,13 @@
api.courseDetail({ api.courseDetail({
fileId: videoId.value, fileId: videoId.value,
userId: userId.value, userId: userId.value,
packFileId: courseInfo.value.packFileId
}).then(res => { }).then(res => {
if (res['success']) { if (res['success']) {
courseInfo.value = res['data']['data']; courseInfo.value = res['data']['data'];
lecturerQuery(res['data']['data']['fileLecturerId']); lecturerQuery(res['data']['data']['fileLecturerId']);
// relatedCoursesList(); loadRelatedCoursesList();
// if (uni.getStorageSync('h5_coursesharing')) { findVideoPlayback();
// coursesharing = uni.getStorageSync('h5_coursesharing')
// getshareData()
// }
// if (courseInfo.status == 2) {
// findVideoPlayback();
// } else {
// isRenderVideo = true;
// }
} }
}) })
} }
...@@ -148,14 +289,51 @@ ...@@ -148,14 +289,51 @@
} }
}) })
} }
// 加载相关视频
const loadRelatedCoursesList = () => {
api.relatedCoursesList({
fileId: videoId.value,
userId: userId.value,
orderId: null,
packFileId: courseInfo.value.packFileId,
}).then(res => {
if (res['success']) {
relatedCourseList.value = res['data']['data']['relatedCourseList'];
} else {
uni.showToast({
title: res['message'],
duration: 2000,
icon: 'none'
})
}
})
}
onLoad(option => { onLoad(option => {
//视频Id //视频Id
if(option.videoId){
uni.setStorageSync('cffp_videoId',option.videoId);
videoId.value = option.videoId; videoId.value = option.videoId;
}else{
videoId.value = uni.getStorageSync('cffp_videoId');
}
//用户Id //用户Id
userId.value = uni.getStorageSync('cffp_userId'); userId.value = uni.getStorageSync('cffp_userId');
accessLogSave(); accessLogSave();
loadCourseDetail(); loadCourseDetail();
}) })
onReady(()=>{
videoContext.value = uni.createVideoContext('myVideo');
})
onUnload(()=>{
if (viewTime.value != 0) {
videoContext.value.pause();
saveVideoPlayback();
if (timer.value) {
clearInterval(timer.value)
}
}
})
onMounted(() => { onMounted(() => {
//窗口高度 //窗口高度
windowHeight.value = uni.getSystemInfoSync().windowHeight; windowHeight.value = uni.getSystemInfoSync().windowHeight;
...@@ -169,24 +347,33 @@ ...@@ -169,24 +347,33 @@
<style lang="scss"> <style lang="scss">
.content { .content {
color: #000; color: #000;
.videoDetailBox { .videoDetailBox {
padding:15rpx 25rpx 0rpx 25rpx; padding: 15rpx 25rpx 0rpx 25rpx;
position: relative; position: relative;
.videoTitleBox { .videoTitleBox {
font-weight: 600; font-weight: 600;
font-size: 32rpx; font-size: 34rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.iconBottom{
transform:rotate(90deg) ; .iconBottom {
transform: rotate(90deg);
} }
.iconTop {
transform: rotate(-90deg);
} }
.videoUser{ }
.videoUser {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 20rpx 0 10rpx 0 ; margin: 20rpx 0 10rpx 0;
.videoUserContent{
.videoUserContent {
// .videoUserRank{ // .videoUserRank{
// background: #5359CD; // background: #5359CD;
// border-radius: 10rpx; // border-radius: 10rpx;
...@@ -194,16 +381,25 @@ ...@@ -194,16 +381,25 @@
// padding: 4rpx 20rpx; // padding: 4rpx 20rpx;
// } // }
.videoUserName{ .videoUserName {
padding-bottom: 20rpx; padding-bottom: 20rpx;
font-size: 32rpx;
} }
} }
.videoUserImage{
width:70rpx; .videoUserImage {
width: 70rpx;
margin-right: 15rpx; margin-right: 15rpx;
} }
} }
.videoDetail {
color: #414141;
font-size: 30rpx;
padding-bottom: 20rpx;
overflow: hidden;
}
} }
.relatedVideoBox { .relatedVideoBox {
...@@ -229,8 +425,13 @@ ...@@ -229,8 +425,13 @@
width: 46.5vw; width: 46.5vw;
.relatedVideoTitle { .relatedVideoTitle {
font-size: 30rpx; font-size: 28rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
height: 79rpx;
} }
} }
} }
......
pages/courseDetail/courseDetail.vue
...@@ -558,7 +558,7 @@ ...@@ -558,7 +558,7 @@
this.isRenderVideo = true; this.isRenderVideo = true;
this.totalTime = this.viewTime = 0; this.totalTime = this.viewTime = 0;
// 跳转到指定位置 // 跳转到指定位置
this.videoContext.seek(thie.viewTime); this.videoContext.seek(this.viewTime);
uni.hideLoading(); uni.hideLoading();
} }
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment