课件学习验证/多计时器/＜cover-view＞使用/节流解决撞循环/video组件全屏踩坑(存档)

<template><view><view class="new-tab"><img class="new-tab-img-back" :src="backImgUrl" alt="" @click="comeBack"></view><u-loading-icon v-if='loading' text="加载中" textSize="18"></u-loading-icon><view v-else><!-- 0=文档1=视频 --><view v-if="data.type==1"><view class="content"><view class="landscape-container" :class="{'text-area-max':type}"><view class="text-area"><video id="myVideo" class="video-class" @error="videoErrorCallback" controls:autoplay='true' enable-progress-gesture='false' @play="playVideo" @ended="videoEnd"@pause="videoPause" :src="Url" @waiting='waitVideo' :direction='90' :initial-time='data.learnTime'@timeupdate="watchTimeVideo" show-fullscreen-btn='false'></video><cover-view class="controls"><cover-image v-if="type" class="controls-btn" src="@/static/hy.png" @click="check()"></cover-image><cover-image v-else class="controls-btn" src="@/static/qp.png" @click="check()"></cover-image></cover-view><cover-view class="other-view" v-if="name == '培训'" @click="clickCountDown">{{countdowns}}秒</cover-view></view></view></view><view class="text_content">{{data.name || '-'}} {{data.describe || '-'}}</view><view class="text_content">课件所需学习时长:{{data.schoolTime ||' -'}}分钟</view><view class="text_content">观看人次:{{data.watchCount}}</view></view><!-- 文档 --><view v-else><view class="padding10">课件所需学习时长:{{data.schoolTime ||' -'}}分钟 ({{data.schoolTimeSeconds}}秒)</view><view class="padding10">已学习:{{documentLearnTime ||' -'}}秒</view><view v-for="(item,index) in pictureList"><img :src="item" alt="" class="fileImg"></view></view></view></view>
</template>


<script>import {EducationCourseware,EducationExitCourseware} from '@/common/login.js'import api from '@/main.js'import '@/components/shoyu-xxtea/shoyu-xxtea'import {throttle} from "@/util"export default {data() {return {backImgUrl: require('@/static/back.png'),type: false,danmuValue: '',btn: 0,testTime: null,loading: true,schoolTime: 0,sumTime: 0,id: '',timestamp: 10,data: {type: 0},Url: '',u2: '',fileUrl: '',biz: '', //所属模块(课件中心=center,岗位必学=postLearn,我的培训=training)name: '',ti: 1,timer: 0,hour: 0,minutes: 0,seconds: 0,coursewareId: '',limitTime: '',remindCycle: 8,countdown: 8,urlPath: '',title: '',viewerUrl: '/hybrid/html/web/viewer.html',allUrl: '',downloadFile_onoff: false,reachButtom: 0, //代表是不是触底--用来判断文档pictureList: [],isPause: 0, //是否倒计时结束videoContext: '', //储存视频对象isOver: 0, //是否播放结束过--判断时长累加ti: 0, //实时播放进度nitial_time: '', //视频跳转进度 秒documentLearnTime: '', //文档学习时间countdowns: 0,timerCountDown: '', //倒计时实例numCycleTime:1, //节流时间playOrPause:0,//播放为0  暂停为1}},onLoad(e) {this.id = e.id || ''this.coursewareId = e.coursewareId || ''this.name = e.namethis.value = e.valueconsole.log("看课件title/value", this.name, this.value);if (this.name == '我的学习' || this.value == '课件中心') {this.biz = 'center'} else if (this.name == '培训') {this.biz = 'training'} else {//岗位必学this.biz = 'postLearn'}console.log("this.biz", this.biz);this.getData({})this.initial_time = '0' //视频进度/* 隐藏顶部状态栏 */// #ifndef MP-ALIPAYplus.navigator.setFullscreen(true);this.videoContext = uni.createVideoContext('myVideo')// #endifconst that = thisconst landscapeOb = uni.createMediaQueryObserver(this)landscapeOb.observe({orientation: 'landscape' //屏幕方向为纵向/横向 portrait/landscape}, matches => {console.log(matches);that.type = matchesthis.landscape = matches})},methods: {showBtn(e) {this.btn = !this.btn},check() {const asd = this.type ? 'portrait' : 'landscape'plus.screen.lockOrientation(asd);},sendDanmu: function() {this.videoContext.sendDanmu({text: this.danmuValue,color: this.getRandomColor()});this.danmuValue = '';},getRandomColor: function() {const rgb = []for (let i = 0; i < 3; ++i) {let color = Math.floor(Math.random() * 256).toString(16)color = color.length == 1 ? '0' + color : colorrgb.push(color)}return '#' + rgb.join('')},// 获取日常任务async getData(params) {let id = ''if (this.name == '我的学习') {id = this.coursewareId} else {id = this.id}const data = {id: id,biz: this.biz}console.log(data);const res = await EducationCourseware(data)if (res.code == 200) {console.log("res", res);this.data = res.result;// this.data.learnTime = 3this.schoolTime = (this.data.coursewareFile.schoolTime * 1 / 60).toFixed(2) //课件学习时长 分钟this.limitTime = this.data.videoTime * 1 //视频总秒数this.remindCycle = this.data.remindCycle * 1 * 60 //提醒周期 秒this.countdown = this.data.countdown * 1 //弹窗时间this.countdowns = this.data.countdown * 1 //页面显示的倒计时this.numCycleTime = this.remindCycle + this.countdown //节流时间console.log("这些时间", this.remindCycle, this.countdowns, this.numCycleTime);this.Url = getApp().globalData.urlApiFile + res.result.coursewareFile.filePathconsole.log("视频真正地址",this.Url);//文档if (this.data.type == 0) {this.documentLearnTime = this.data.learnTime || 0 //接口返回上次看到的时间--赋值var filePngPath = res.result.coursewareFile.filePngPath.split(',');var newList = []for (var i = 0; i < filePngPath.length; i++) {newList.push(getApp().globalData.urlApiFile + filePngPath[i])}this.pictureList = newListsetInterval(() => {this.timer += 1this.documentLearnTime += 1}, 1000);console.log('newList', newList)}this.loading = false}},//开始startTimer() {},//暂停videoPause(e) {// console.log("暂停", e);this.playOrPause = 1clearInterval(this.timer);clearInterval(this.timerCountDown)// console.log("时间", this.ti);},//视频播放缓冲waitVideo() {clearInterval(this.timer); //暂停计时// this.$refs.countDown.pause() //倒计时暂停},watchTimeVideo(e) {let that = this;// videoContext.seek(that.data.learnTime);let videoContext = wx.createVideoContext('myVideo');if (this.name == '培训') {if (that.data.learnTime * 1 !== 0) {videoContext.seek(that.data.learnTime);that.data.learnTime = 0return}var isReady = 1; // 是否开启可以视频快进 1 禁止开启//跳转到指定播放位置 initial-time 时间为秒//播放的总时长var duration = e.detail.duration;//实时播放进度 秒数 var currentTime = parseInt(e.detail.currentTime);console.log("视频播放到第" + currentTime + "秒") //查看正在播放时间，以秒为单位if (that.ti == 0) {var jump_time = parseInt(that.initial_time) + parseInt(that.ti);} else {var jump_time = parseInt(that.ti);}console.log("that.data.learnTime", that.data.learnTime);if (isReady == 1) {if (currentTime > jump_time && currentTime - jump_time > 3) {uni.showToast({title: '视频不支持快进' + that.ti,icon: 'none',});videoContext.seek(that.ti);}}}that.ti = currentTime; //实时播放进度},playVideo(e) {console.log("播放1", e, this.ti);this.playOrPause = 0//开始计时this.timer = setInterval(this.startTimer, 1000);// const that = thisif (this.name == '培训') {if (this.limitTime - this.ti > this.remindCycle) {console.log("fhr");this.countdowns = this.data.countdown * 1this.watchTime()}}},//防作弊watchTime() {const that = thisconsole.log('防作弊');if (that.name == '培训') {that.test(that, that.numCycleTime)}},test: throttle((that, numCycleTime) => {setTimeout(function() {console.log("89898989", numCycleTime);that.timerCountDown = setInterval(() => {if (that.countdowns <= 0) {//倒计时到0的时候 暂停视频 倒计时重新赋值that.videoContext = uni.createVideoContext('myVideo');that.videoContext.pause(); //暂停clearInterval(that.timerCountDown)} else {that.countdowns--}}, 1000)}, that.remindCycle * 1000);}, 3000),//倒计时点击事件clickCountDown() {console.log("用户点击按钮");const that = thisclearInterval(that.timerCountDown)that.countdowns = that.data.countdown * 1that.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video//如果已经暂停了,调用播放  未暂停调用周期防作弊if(this.playOrPause == 1){console.log("已经暂停了");that.videoContext.play(); //播放}else{console.log("防止暂停");if (that.limitTime - that.ti > that.remindCycle) {console.log("fhr");that.countdowns = that.data.countdown * 1that.watchTime()}}},//视频播放出错videoErrorCallback(e) {clearInterval(this.timer);clearInterval(that.timerCountDown)console.log("出错", e);},//视频播放完结束videoEnd(e) {// console.log("播放完了,当前时间/总时长", this.ti,this.limitTime);this.sumTime = this.ti + this.sumTimeconsole.log("ti/sumTime",this.ti,this.sumTime);clearInterval(this.sumTime);clearInterval(this.timer);clearInterval(this.timerCountDown)// this.ti = 0this.isOver = 1},//左上角返回comeBack() {clearInterval(this.timer); //计时器停止console.log("左上角要调用接口", this.timer, this.ti);let id = ''let ti = ''if (this.name == '我的学习') {id = this.coursewareId} else {id = this.id}if (this.data.type == 0) {ti = this.timer // 文档} else {// //判断用累加时长还是当前时长// if (this.isOver == 1) {//  ti = this.sumTime// }ti = this.ti //视频}let form = {id: id,biz: this.biz,time: ti,coursewareId: '',isBottom: this.reachButtom}console.log('提交的数据', form);const res = EducationExitCourseware(Object.assign({id: id,biz: this.biz,time: ti,coursewareId: '',isBottom: this.reachButtom}))console.log("左上角调用接口完毕", res);clearInterval(this.timerCountDown)uni.navigateBack(-1)},//返回触发onBackPress(options) {console.log("options", options.from);//避免死循环if (options.from === 'navigateBack') return false;//自己的判断条件，执行自定义的返回操作if (options.from !== 'navigateBack') {clearInterval(this.timer); //计时器停止console.log("返回前要调用接口", this.timer, this.ti);let id = ''let ti = ''if (this.name == '我的学习') {id = this.coursewareId} else {id = this.id}if (this.data.type == 0) {ti = this.timer // 文档} else {//判断用累加时长还是当前时长if (this.isOver == 1) {ti = this.sumTime}ti = this.ti //视频}let form = {id: id,biz: this.biz,time: ti,coursewareId: '',isBottom: this.reachButtom}console.log('提交的数据', form);const res = EducationExitCourseware(Object.assign({id: id,biz: this.biz,time: ti,coursewareId: '',isBottom: this.reachButtom}))clearInterval(this.timerCountDown)console.log("接口调用完毕允许返回", res);uni.navigateBack(-1)}//返回true表示我要自定义onBackPressreturn true},//触底-用于文档验证onReachBottom() {this.reachButtom = 1},},}
</script>

<style>page {background-color: #EFF1F5;}.new-tab {width: 100%;height: 100px;background-color: #556585;}.new-tab-img-back {width: 25px;height: 25px;margin-top: 60px;margin-left: 20px;}.text_content {padding: 30upx;color: #333333;font-size: 30upx;}.shijian {font-size: 16px;text-align: center;color: white;z-index: 999999;}.count-down {width: 80px;height: 30px;color: white !important;background-color: steelblue;text-align: center;line-height: 30px !important;position: absolute;z-index: 999999;right: 0;}.count-down-son {width: 80px;height: 30px;z-index: 9999999;}.padding10 {padding: 10px;}.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.landscape-container {height: 300px;}.text-area {position: relative;width: 100vw;height: 100%;display: flex;justify-content: center;}.text-area-max {position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;background: #000;display: flex;align-items: center;}.video-class {width: 100%;height: 100%;}.other-view {position: absolute;color: white;font-size: 16px;text-align: center;top: 0;right: 0;width: 100px;height: 30px;background-color: #556585;}.controls {position: absolute;bottom: 2%;right: 2%;/* background: #ff; */color: #000;text-align: center;}.controls-btn {width: 15px;height: 15px;padding: 10px;}.bottom-list {border: 1px solid;}
</style>
<style lang="scss" scoped>.u-tabs {background-color: #ffffff;}.fileImg {width: 750upx;height: 1440upx;}.task-list {.content {color: #00000073;}.left {margin-left: 40rpx;}.green {color: #45CEA1;}.red {color: #FF5F56;}}.u-input {width: 400rpx;}
</style>

节流重点代码:

export const  throttle =(fn, wait = 3000) => {let flag = truereturn function () {if (!flag) returnflag = falsefn.apply(this, arguments)setTimeout(() => {flag = true}, wait)}}

效果图:(顶部导航栏自己写的,屏蔽了原生的,不然视频全屏会受影响)

课件学习验证/多计时器/＜cover-view＞使用/节流解决撞循环/video组件全屏踩坑(存档)相关推荐

前端学习（2641）：懂代码之header表头页之控制全屏显示
<div class="btn-fullscreen" @click="handleFullScreen& ...
xcode 学习笔记2:动态添加view
xcode 学习笔记2:动态添加view 2011-07-06 16:48:39| 分类: 计算机学习|字号订阅前面说的都是用的Interface Builder来编辑.xib文件来给窗口添加各 ...
的计时器设置_【教程】PPT课件中常见的计时器效果（2）——沙漏式计时器 | 源文件提供下载...
往期推荐: [教程]几种常见的计时器效果(1)| 源文件提供下载 [资源]统编语文1-6年级上册专项复习练习题 [资源]转发起来!超精美全册课件下载 | 统编版小学语文五年级下册大家好,这里是小课同 ...
OpenCV4.0.1/4.0.0/3.4.2 + Contrib + Qt5.9 + CMake3.12.1编译及踩坑笔记、Qt5+OpenCV配置、代码验证、效果图、福利彩蛋
Table of Contents 前言 Windows 10, OpenCV4.0.1, Qt5.9.3, CMake3.12.1, MinGW5.3.0 Windows 10, OpenCV4.0 ...
分布式深度学习最佳入门（踩坑）指南
点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达作者丨Lyon@知乎(已授权) 来源丨https://zhuanla ...
一个黑色全屏的计时器_佳作分享最佳倒数计时器设计分析【附原型实例】
视觉效果和动画效果已经成为产品设计中不可或缺的一部分,开发人员使用动画效果可以创建引人入胜的内容,营销人员可以使用这些效果来获得更好的产品覆盖率和良好的转化率.倒数计时器就是这样一种元素,当用户登陆页 ...
android 全屏倒计时,全屏计时器app
全屏计时器app是一款相当简洁的手机软件,主要作用就是可以全屏显示时间,而且软件完全没广告免费体验,相当的方便,软件十分炫酷,还有各种铃声可以选择,可以自定义,相当好用.它是专门为学生量身打造的写作业 ...
【深度学习】模型过拟合的原因以及解决办法
[深度学习]模型过拟合的原因以及解决办法 1.背景 2.模型拟合 3.简述原因 4.欠拟合解决办法 5.过拟合解决办法 1.背景所谓模型过拟合现象: 在训练网络模型的时候,会发现模型在训练集上表现很 ...
AIGC - Stable Diffusion 学习踩坑实录总结
学习路径淘宝拼多多找教程就没必要了,我踩过坑,还跟店主纠缠过,付了钱,不过都退了,淘宝平台介入,啥都能解决,现在卖得都是搬运的 B 站里面的大佬视频,我目前正在不断关注 B 站大佬的各种课程,探索更 ...

课件学习验证/多计时器/＜cover-view＞使用/节流解决撞循环/video组件全屏踩坑(存档)

课件学习验证/多计时器/＜cover-view＞使用/节流解决撞循环/video组件全屏踩坑(存档)相关推荐

最新文章

热门文章