点击视频暂停暂停学习时间

1html 

<div class="listBox">
						<div v-if="type == 1" style="padding: 0 30px">
							<div
								class="viewItem"
								v-for="(file, i) in form.detailVideo"
								:key="i"
								@click="startStudy(file)"
							>
								<i
									:class="
										file.fileType == 1
											? 'el-icon-document'
											: 'el-icon-video-play'
									"
								></i>
								<div class="fileTitle uniline">
									{{ i + 1 }}.
									{{ file.titleName }}
								</div>
								<div>
									<div
										class="pie"
										:style="{
											'--rotate': `rotate(${
												file.watchMinutes / (file.duration * 60 * 1000) > 0.5
													? 1 - file.watchMinutes / (file.duration * 60 * 1000)
													: 0.5 -
													  file.watchMinutes / (file.duration * 60 * 1000)
											}turn)`,
											'--color':
												file.watchMinutes / (file.duration * 60 * 1000) > 0.5
													? '#409eff'
													: '#fff',
										}"
									></div>
									<div
										style="color: #999999; font-size: 12px; line-height: 24px"
									>
										{{
											!file.watchMinutes
												? "未学习"
												: file.watchMinutes >= file.duration * 60 * 1000
												? "已学习"
												: "学习中"
										}}
									</div>
								</div>
							</div>
						</div>
						<div v-else-if="type == 2"></div>
					</div>

 2观看视频的代码

<!-- 文件观看 -->
		<el-dialog
			custom-class="customDialog"
			:close-on-click-modal="false"
			:append-to-body="true"
			:visible.sync="studyVis"
			@before-close="cancelStudy"
			:show-close="false"
			fullscreen
		>
			<div slot="title" class="studyTit" style="display: flex" v-if="studyVis">
				<i
					class="el-icon-arrow-left"
					style="
						font-size: 18px;
						line-height: 24px;
						cursor: pointer;
						font-weight: 600;
					"
					@click="cancelStudy"
				></i>
				<div class="uniline">
					{{ studyForm.fileName }}
				</div>
				<!-- v-if="seeTime" -->
				<div>
					（完成条件：至少学习{{ studyForm.duration }}分钟，当前已学{{
						seeTime
					}}）
				</div>
			</div>
			<div v-if="studyVis">
				<div v-if="studyForm.fileType == 1">
					<iframe
						v-if="['pdf'].indexOf(studyForm.type) > -1"
						type="application/x-google-chrome-pdf"
						style="height: calc(100vh - 96px)"
						width="100%"
						align="center"
						scroll="no"
						:src="studyForm.fileUrl"
					></iframe>
					<office-preview
						v-else
						:uri="studyForm.fileUrl"
						style="height: calc(100vh - 96px); overflow: hidden"
					></office-preview>
				</div>

				<div v-else-if="studyForm.fileType == 2">
					<video
						id="video"
						width="100%"
						style="height: calc(100vh - 96px)"
						:src="studyForm.fileUrl.replace('http:', 'https:')"
						autoplay
						controls
						controlslist="nodownload noremoteplayback"
						oncontextmenu="return false"
						disablePictureInPicture
					>
						您的浏览器不支持 video 标签。
					</video>
				</div>
			</div>
		</el-dialog>

3方法

startStudy(file) {
			if (file.fileType == 1) {
				let arr = file.fileName.split(".");
				file.type = arr[arr.length - 1];
				if (["pdf"].indexOf(file.type) > -1) {
					let baseUrl =
						"https://resources.bingyimd.com/crm/statics/pdfjs/web/viewer.html?file=";
					file.fileUrl = baseUrl + file.fileUrl.replace("http:", "https:");
				}
			}
			this.studyForm = file;
			this.studyVis = true;
			this.nowSee = 0;
			watermark.init({
				watermark_txt:
					"火蝠内训资料  严禁泄露  " + this.$session.get(true).user.name, // 水印的内容 测试水印，520
				watermark_color: "#f80d4a", // 水印字体颜色
				watermark_alpha: 0.2, // 水印透明度，要求设置在大于等于0.005
				watermark_width: 120,
				watermark_x_space: 120, // 水印x轴间隔
				watermark_y_space: 100, // 水印y轴间隔
			});
			if (file.fileType == 1) {
				let that = this;
				this.$nextTick(() => {
					if (
						$("iframe") &&
						["doc", "docx", "ppt", "pptx"].indexOf(file.type) > -1
					) {
						$("iframe").eq(0).css({
							"margin-top": "-80px",
							height: "calc(100% + 80px)",
						});
						this.$forceUpdate();
					}

					this.countStudyTime();
				});
			} else {
				let that = this;
				this.$nextTick(() => {
					let myVid = document.getElementById("video");
					if (myVid) {
						// myVid.addEventListener("waiting", () => {//加载中
						// });
						myVid.addEventListener("play", () => {
							//播放
							// this.startTime = Date.now();
							// debugger
							this.isRunning = true;
							this.GetTransferTime();

							// if ((this.isRunning = true)) {
							this.insertVideoStudy();
							// }
							this.countStudyTime();
						});
						myVid.addEventListener("pause", () => {
							//暂停
							if (this.studyVis == true) {
								this.isRunning = false;
								clearInterval(this.intervalTime);
								clearInterval(this.intervalId);
								clearInterval(this.timer);
								// this.insertVideoStudy("stop");
							}
							// else {
							// 	this.countStudyTime();
							// }
						});
					}
				});
			}
			// clearInterval(this.timer);
			// this.countStudyTime();
			this.timeFlag = true;
			this.GetTransferTime();
			this.checkIfLearningIsComplete();
			this.numberOfTimesToBrowseCoursewareFiles();
		},