update:学习-详情、视频和更新观看进度提交

src/pages/learn/section.vue

@@ -6,8 +6,12 @@
           class="course-video"
           id="courseVideo"
           :src="courseSrc"
+		  :options="playerOptions"
+		  :playsinline="true"
 		  @play="playCourse"
           @error="videoErrorCallback"
+		  @ready="playerReadied"
+		  @timeupdate = "onPlayerTimeupdate($event)"
           controls
         ></video
       ></view>
@@ -64,6 +68,34 @@ export default {
 	  section_id:0,
 	  isShowVideo: false,
 	  CourseSectionlist: {},//节信息
+	  playerOptions : {
+		playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+		autoplay: false, //如果true,浏览器准备好时开始回放。
+		muted: false, // 默认情况下将会消除任何音频。
+		loop: false, // 导致视频一结束就重新开始。
+		preload: 'auto', 
+		language: 'zh-CN',
+		aspectRatio: '16:9',
+		fluid: true, 
+		// sources: [{
+		//   type: "",
+		//   src: "" //url地址
+		// }],
+		// poster: "../../static/images/test.jpg", //你的封面地址
+		// width: document.documentElement.clientWidth,
+		notSupportedMessage: '此视频暂无法播放，请稍后再试', 
+		controlBar: {
+		  timeDivider: true,
+		  durationDisplay: true,
+		  remainingTimeDisplay: false,
+		  fullscreenToggle: true  //全屏按钮
+		}
+	  },
+	  gklog: '',
+	  videoTotalTime: 0,
+	  howTimeToUpdateLearnedStatus: 5,//设置几秒提交一次状态
+	  status: 1,//是否已学习默认1已学习
+	  howLongIsLearned: this.videoTotalTime/2,//默认设置观看1/2就是已学
     };
   },
   computed: {
@@ -97,10 +129,6 @@ export default {
     },
   },
   onLoad(e) {
-        this.courseSrc = 'https://qn-static.banshouhui.com/self-support/videoen.mp4';
-        this.courseTitle = '大吉大利';
-        this.courseDesc = '今晚吃鸡';
-		this.section_id = e.section_id
 		this.getCourseSection({section_id:e.section_id})
   },
   onReady: function (res) {
@@ -109,6 +137,14 @@ export default {
     // #endif
   },
   methods: {
+	onPlayerTimeupdate (player) {
+		console.log('-----onplay----');
+		console.log(player);
+		let intCurrentTime = parseInt(player.detail.currentTime);
+		this.updateLearnedStatus(intCurrentTime);
+		this.gklog = intCurrentTime;
+		console.log(' onPlayerTimeupdate!', this.gklog)
+	},
     videoErrorCallback: function (e) {
       uni.showModal({
         content: e.target.errMsg,
@@ -130,6 +166,10 @@ export default {
 		}
 		this.changeCourseStatus();
 	},
+	playerReadied (player) {
+		console.log('i go to playerReadied gklog:' + this.gklog)
+		player.currentTime(this.gklog)
+	},
     changeCourseStatus() {
       let that = this;
       if (that.courseId) {
@@ -162,22 +202,49 @@ export default {
 						console.log(this.CourseSectionlist)
 						let wareVal = this.CourseSectionlist.ware;
 						this.isShowVideo = wareVal == "0";
+						if(this.isShowVideo){
+							let coureWareList = res.data.courseware;
+							this.courseSrc = coureWareList[0].src;
+							this.videoTotalTime = parseInt(JSON.parse(coureWareList[0].info).time);
+							console.log('视频时长信息：' + this.videoTotalTime);
+							this.courseTitle = res.data.name;
+							this.courseDesc = res.data.content;
+							this.section_id = res.data.id;
+						}
 					}
 				}
 			})
 			.catch((err) => {
+				console.log('--------settttt---------');
+				console.log(err);
 				uni.showToast({
 					title: err,
 					icon: "none",
 				});
-				this.isLoadMore = false;
-				if (this.params.start > 0) {
-					this.page -= 5;
-				}
 			});
+	},
+	updateLearnedStatus(nowLength) {
+		if(this.gklog != nowLength && nowLength%this.howTimeToUpdateLearnedStatus == 0){
+			if(nowLength < this.howLongIsLearned){
+				this.status = 0;
+			}else{
+				this.status = 1;
+				console.log('--已学习--');
+			}
+			//大于
+			let param = {
+				section_id: this.section_id,
+				video_time: nowLength,
+				status: this.status,
+			};
+			this.$u.api.updateLearnCourses(param).then((res) => {
+				console.log('--'+this.howTimeToUpdateLearnedStatus+'更新一次观看状态--time:' + nowLength);
+			});
+		}
 	}
   },
 };
+
 </script>
 
 <style lang="scss" scoped>
@@ -203,6 +270,19 @@ export default {
   padding: 80rpx 60rpx 40rpx 60rpx;
 }
 
+.title {
+	font-weight: 700;
+	font-family: Medium,Helvetica Neue,Helvetica,Arial,sans-serif;
+	font-size: 77rpx;
+	color: #333;
+	padding: 80rpx 60rpx 40rpx 60rpx;
+}
+
+.content {
+	padding: 40rpx 30rpx;
+	margin-bottom: 20rpx;
+}
+
 .course-desc {
   margin-left: 60rpx;
 }