观看视频保存记录

components/video-player/video-player.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="videoPlayer">
-        <video :id="videoId" ref="myVideo" class="video" height="100%" :autoplay="autoplay" :loop="true" :src="videoUrl" :show-center-play-btn="false" :enable-play-gesture="true" :controls="controls" :vslide-gesture="true" :show-play-btn="false" :show-fullscreen-btn="false" @controlstoggle="controlstoggle($event)" @timeupdate="updateProgress" @play="play" @pause="pause" @fullscreenchange="onFullscreenChange" @click="togglePlay"></video>
+        <video :id="videoId" ref="myVideo" class="video" height="100%" :autoplay="autoplay" :initial-time="initialTime" :loop="true" :src="videoUrl" :show-center-play-btn="false" :enable-play-gesture="true" :controls="controls" :vslide-gesture="true" :show-play-btn="false" :show-fullscreen-btn="false" @controlstoggle="controlstoggle($event)" @timeupdate="updateProgress" @play="play" @pause="pause" @fullscreenchange="onFullscreenChange" @click="togglePlay"></video>
         <view v-if="isPlay" class="play" @click="togglePlay"><image :src="imgsrc"></image></view>
     </view>
 </template>
@@ -14,12 +14,15 @@ export default {
         autoplay: {
             type: Boolean,
             default: true
+        },
+        initialTime:{
+            type: [ String,Number ],
+            default: ''
         }
     },
     data(){
         return{
             progress: 0, // 进度条进度
-            isPlaying:null,
             isPlay:null,
             controls: true,
             isFullscreen: null,
@@ -30,13 +33,6 @@ export default {
         console.log(res,8989);
     },
     watch:{
-        isPlaying(newVal,oldVal){
-            if(newVal){
-                this.isPlay = true
-            }else{
-                this.isPlay = false
-            }
-        }
     },
     methods: {
         // 播放 &暂停
@@ -44,34 +40,38 @@ export default {
             
             var video = this.$refs.myVideo;
             if (video.playing) {
-                this.isPlaying = true
+                // this.isPlay = true
                 video.pause();
             } else {
-                this.isPlaying = false
+                // this.isPlay = false
                 video.play();
             }
 
         },
+
+
+        // 控制播放按钮
         controlstoggle(event){
             console.log(event,'event');
             this.controls = !this.controls
         },
-        updateProgress() {  
-            // const video = this.$refs.video;  
-            // const duration = video.duration;  
-            // const currentTime = video.currentTime;  
-            // this.progress = (currentTime / duration) * 100;  
+
+
+        updateProgress(event) {  
+            // 通过自定义事件传递当前时间
+            this.$emit('timeUpdate', event.target.currentTime);
         },  
         // 当开始/继续播放时触发play事件
         play() {  
-            // this.isPlaying = false;
+            
+            this.isPlay = false
             // uni.createVideoContext('myVideo',this).play()
             // console.log(uni.createVideoContext('videoId').pageVm,'pla2y');
             // this.$refs.progressBar.style.display = 'block';  2
         },  
         // 当暂停播放时触发 pause 事件
         pause() {  
-            // this.isPlaying = true;
+            this.isPlay = true
             // uni.createVideoContext('myVideo',this).pause()
             // console.log(uni.createVideoContext('videoId').pageVm,'pease');
             // const video = this.$refs.video;  

pages/index/index.vue

@@ -19,9 +19,9 @@
 					}" itemStyle="padding-right: 15px; height: 34px;"></u-tabs>
 				</view>
 				<view class="rank_list">
-					<view class="list-item" v-for="(item,index) in list" :key="index" @click="toPlay(item.id)">
+					<view class="list-item" v-for="(item,index) in list" :key="index" @click="toPlay(item)">
 						<view class="cover">
-							<image class="cover_img" src=""></image>
+							<image class="cover_img" :src="item.thumbnail"></image>
 							<view :class="`grade${index}`" class="grade">{{index+1}}</view>
 							<!-- <view class="hot">
 								<pv-icon name="icon-huomiao" color='#fff' :customStyle="{ fontSize: '24rpx'}"></pv-icon>
@@ -30,7 +30,7 @@
 						</view>
 						<view class="names">
 							<text>{{item.name}}</text>
-							<text class="ellipsis-2">{{item.description || '...'}}</text>
+							<text class="ellipsis-2">{{item.description}}</text>
 						</view>
 					</view>
 				</view>
@@ -114,9 +114,9 @@
 		},
 		methods: {
 			// 跳转视频页面
-			toPlay(id){
+			toPlay(item){
 				uni.navigateTo({
-					url:'/pages/play/index?id='+ id,
+					url:'/pages/play/index?id='+ item.id+'&data='+JSON.stringify(item),
 				})
 			},
 			// 获取视频分类列表

pages/play/index.vue

@@ -1,11 +1,12 @@
 <template>
 	<view class="play">
-		<video-player :videoUrl="watchVo.url"></video-player>
+		<video-player v-if="videoUrl" :videoUrl="videoUrl" :initialTime="durationSeconds" @timeUpdate="handleTimeUpdate"></video-player>
+		<image v-else :src="videoData.thumbnail" class="cover_img"></image>
 		<view class="anthologys_detail">
 			<view class="anthology" @click="show = true">
 				<view class="ant">
 					<image :src="play_img" class="play"></image>
-					<text class="ant-text">{{watchVo.programName}}(1/{{watchVo.programNum}})</text>
+					<text class="ant-text">{{videoData.name}}(1/{{list.length}})</text>
 				</view>
 				<view class="ant">
 					<text>选集</text>
@@ -23,15 +24,16 @@
 			<view class="opera">
 				<view class="opera-top">
 					<view class="title">
-						<image class="cover" :src="watchVo.thumbnail"></image>
+						<image class="cover" :src="videoData.thumbnail"></image>
 						<view class="name">
-							<text>{{watchVo.programName}}</text>
-							<text>共{{watchVo.programNum}}集·已完结</text>
+							<text>{{videoData.name}}</text>
+							<text>共{{list.length}}集</text>
 						</view>
 					</view>
-					<view @click="close"><pv-icon name="icon-xiala"
-							:customStyle="{ fontSize: '40rpx',fontWeight: 'bold'}"></pv-icon></view>
-
+					<view @click="close">
+						<pv-icon name="icon-xiala"
+							:customStyle="{ fontSize: '40rpx',fontWeight: 'bold'}"></pv-icon>
+					</view>
 				</view>
 				<view class="serice">
 					<!-- <u-tabs :list="tabs" lineWidth="0" lineColor="#f56c6c" :activeStyle="{
@@ -44,7 +46,7 @@
 					</u-tabs> -->
 					<view class="numbers">
 						<view class="num">
-							<view class="num_item" :class="{num_item_select: item.sort == sort}" v-for="(item,index) in list" :key="index" @click="toPlay(item)">
+							<view class="num_item" :class="{ num_item_select: item.sort == sort }" v-for="(item,index) in list" :key="index" @click="toPlay(item)">
 								<text class="num_text">{{item.sort}}</text>
 								<view v-if="item.sort === sort" class="num_play">
 									<view></view>
@@ -68,10 +70,10 @@
 					<text class="tips">当前视频没有播放权限</text>
 				</view>
 				<view class="pays flex jcsa aic">
-					<view class="pay_item single" :class="{ pay_item_select: !type }" @click="changeType(type)">
+					<view class="pay_item single" :class="{ pay_item_select: !type }" @click="changeType(0)">
 						<text>单集购买</text>
 					</view>
-					<view class="pay_item all" :class="{ pay_item_select: type }" @click="changeType(type)">
+					<view class="pay_item all" :class="{ pay_item_select: type }" @click="changeType(1)">
 						<text>整集购买</text>
 					</view>
 				</view>
@@ -84,17 +86,18 @@
 <script>
 	import defaultConfig from '@/config/default.js'
 	import { getServerShipVideoUrl,getServerShipVideoList } from '@/apis/index'
-	import { buyShipVideo } from '@/apis/video'
+	import { buyShipVideo,syncWatchHistory } from '@/apis/video'
 	export default {
 		data() {
 			return {
-				// id:'',
+				id:'',
 				type: 0,
 				watchVo:{},
+				videoData:{},
 				sort:0,
 				show: false,
 				isPayShow: false,
-				videoUrl: '/static/video/luo-sun.mp4', //路径
+				videoUrl: '', //路径
 				play_img: defaultConfig.ossImgUrl + '/playVideo/video/ic_search.png',
 				coverImg: 'https://obs-fanxing.obs.cn-east-3.myhuaweicloud.com/retail/main/img_bgtop.png',
 				tabs: [{
@@ -104,47 +107,87 @@
 				}],
 				list: [],
 				shipVideoId:'',
+				durationSeconds:'',
 			}
 		},
 		onLoad(params){
-			let id = params.id
-			console.log(params,id,'id');
-			// this.getVideoUrl(id)
-			this.getVideoList(id)
+			this.id = params.id
+			this.videoData = JSON.parse(params.data)
+			this.getVideoList(this.id)
+		},
+		onUnload(){
+			this.setWatch()
 		},
 		methods: {
+			toPlay(item){
+				if(item.sort === this.sort) return
+				this.getUrl(item)
+			},
 			// 获取视频url
-			async toPlay(item){
-				if(item.sort === this.watchVo.sort) return
+			async getUrl(item){
 				if(!item.isPay){
-					this.shipVideoId = item.id
 					this.isPayShow = true
 					return
 				}
 				const res = await getServerShipVideoUrl(item.id)
-
-				console.log(res);
+				this.shipVideoId = item.id
+				this.sort = item.sort
+				this.videoUrl = res
+				this.show = false
 			},	
 			// 查看视频列表
 			async getVideoList(id){
 				const res = await getServerShipVideoList(id)
 				this.watchVo = res.serverVideoWatchVo
-				this.sort = res.serverVideoWatchVo.sort
+				// this.videoUrl = res.serverVideoWatchVo.url
+				// this.sort = res.serverVideoWatchVo.sort
 				this.list = res.videoVos
+				let item
+				if(this.watchVo){
+					item = this.watchVo
+					this.shipVideoId = item.shipVideoId
+					this.sort = item.sort
+					this.videoUrl = item.url
+					this.durationSeconds = item.durationSeconds
+
+				}else{
+					item = this.list[0]
+					this.getUrl(item)
+				}
+				
+				
 			},	
 			
+			// 购买视频
 			async confirm(){
 				let params = {
 					shipVideoId: this.shipVideoId,
 					type: this.type
 				}
 				const res = await buyShipVideo(params)
+				
 				console.log(res);
 
 			},
 			
+			// 观看同步
+			async setWatch(){
+				let params = {
+					shipVideoId: this.shipVideoId,
+					shipProgramId: this.id,
+					durationSeconds: this.durationSeconds
+				}
+				const res = await syncWatchHistory(params)
+			},
+			// 获取当前播放时间
+			handleTimeUpdate(time){
+				this.durationSeconds = time
+			},
+			// 切换整集/单集
 			changeType(type){
-				type?this.type = 0:this.type = 1
+				
+				if(type == this.type) return
+				type?this.type = 1:this.type = 0
 			},
 			open() {
 			},
@@ -153,7 +196,7 @@
 			},
 			closePlay() {
 				this.isPayShow = false
-				this.show = true
+				// this.show = true
 			},
 			openPlay(){
 				this.show = false
@@ -166,7 +209,10 @@
 	.play {
 		width: 100%;
 		height: 100%;
-
+		.cover_img{
+			width: 100%;
+			height: 100%;
+		}
 		.anthologys_detail {
 			box-sizing: border-box;
 			width: 100%;
@@ -267,6 +313,9 @@
 						flex-wrap: wrap;
 						.num_item_select{
 							background: #E9F9F9 !important;
+							.num_text {
+								color: #62C5C6;
+							}
 						}
 						.num_item {
 							position: relative;
@@ -279,9 +328,7 @@
 							background: #FAFAFA;
 							color: #000;
 							box-sizing: border-box;
-							.num_text {
-								color: #62C5C6;
-							}
+							
 
 							.num_play {
 								position: absolute;

pages/search/index.vue

@@ -5,7 +5,12 @@
                 searchIconColor="#000" v-model="keyword" @search="search"></u-search>
         </view>
         <view class="videoLists">
-            <view class="list_item" v-for="(item,index) in list" :key="index"></view>
+            <view class="list_item" v-for="(item,index) in list" :key="index">
+                <image :src="item.thumbnail" mode="aspectFill" loading="lazy"></image>
+                <view class="innews">
+                    <text>{{item.title}}</text>
+                </view>
+            </view>
         </view>
     </view>
 </template>