Skip to content

Y
ydLife
Commit 24cd76af by Sweet Zhang
Options

rrweb换为静态资源，视频播放增加最大时间，定时器关闭问题

parent b26ca851
Showing with 59 additions and 26 deletions
angular.json
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
"deployUrl": "", "deployUrl": "",
"baseHref": "/ydLife/", "baseHref": "/ydLife/",
"namedChunks": false, "namedChunks": false,
"aot": true, "aot": false,
"extractLicenses": true, "extractLicenses": true,
"vendorChunk": false, "vendorChunk": false,
"buildOptimizer": false, "buildOptimizer": false,
......
src/app/common/video/video.component.html
...@@ -4,5 +4,5 @@ controls="true" ...@@ -4,5 +4,5 @@ controls="true"
width="100%" preload="auto" (contextmenu)="menuPrevent()" x5-playsinline="true" playsinline="true" webkit-playsinline="true" disablePictureInPicture> width="100%" preload="auto" (contextmenu)="menuPrevent()" x5-playsinline="true" playsinline="true" webkit-playsinline="true" disablePictureInPicture>
您的浏览器不支持 video 标签。 您的浏览器不支持 video 标签。
</video> </video>
<!-- <button type="button" class="downloadBtn" (click)="download(videoSrc)" *ngIf="permissions.isDownload&&deviceType!='1'&&!pdfPath">下载资源</button> -->
<iframe *ngIf="pdfPath" [src]="pdfPath | safeResourceUrl" frameborder="0" width="100%" height="100%"></iframe> <iframe *ngIf="pdfPath" [src]="pdfPath | safeResourceUrl" frameborder="0" width="100%" height="100%"></iframe>
\ No newline at end of file
src/app/common/video/video.component.scss
.downloadBtn{
background: #1b5b99;
color: #fff;
padding: 5px 10px;
border: none;
outline: none;
border-radius: 4px;
float: right;
margin-right: 15px;
}
\ No newline at end of file
src/app/common/video/video.component.ts
import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild, } from '@angular/core'; import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild, } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { MyService } from 'src/app/my/my.service'; import { MyService } from 'src/app/my/my.service';
import { LifeCommonService } from '../life-common.service';
@Component({ @Component({
selector: 'ydlife-video', selector: 'ydlife-video',
...@@ -18,32 +19,33 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy { ...@@ -18,32 +19,33 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy {
videoPlaybacks: Array<any>; videoPlaybacks: Array<any>;
originTime: number = 0; originTime: number = 0;
fileId:string; fileId:string;
constructor(private activatedRoute: ActivatedRoute, private myService: MyService) { } deviceType:string;
maxViewTime:number = 0;
constructor(private activatedRoute: ActivatedRoute, private myService: MyService,private lifeCommonService:LifeCommonService) { }
ngOnInit() { ngOnInit() {
this.deviceType = this.lifeCommonService.checkDeviceType();
this.videoSrc = sessionStorage.getItem('videoPath'); this.videoSrc = sessionStorage.getItem('videoPath');
this.permissions = JSON.parse(sessionStorage.getItem('permissions')); this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
this.pdfPath = this.activatedRoute.snapshot.queryParams['path']; this.pdfPath = this.activatedRoute.snapshot.queryParams['path'];
this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo')); this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo'));
this.fileId = this.activatedRoute.snapshot.params['fileId'] this.fileId = this.activatedRoute.snapshot.params['fileId']
this.timer = setInterval(() => { this.queryVideoPlayback(1);
this.saveVideoPlayback();
}, 1000 * 20)
this.timer2 = setInterval(()=>{
if (this.video.nativeElement.currentTime - this.originTime > 1) {
this.video.nativeElement.currentTime = this.originTime;
// this.video.nativeElement.pause();
}
this.originTime = this.video.nativeElement.currentTime;
},500)
this.queryVideoPlayback()
} }
ngAfterViewInit(): void { ngAfterViewInit(): void {
if(!this.pdfPath){
this.video.nativeElement.addEventListener('pause', ()=> { //暂停开始执行的函数 this.video.nativeElement.addEventListener('pause', ()=> { //暂停开始执行的函数
console.log('暂停播放') clearInterval(this.timer);
clearInterval(this.timer2);
this.saveVideoPlayback(); this.saveVideoPlayback();
}); });
this.video.nativeElement.addEventListener('play', ()=> { //开始执行的函数
this.timer = setInterval(() => {
this.saveVideoPlayback();
}, 1000 * 20)
this.queryVideoPlayback(2)
});
if (this.permissions.isDownload == '2') { if (this.permissions.isDownload == '2') {
this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist') + ' nodownload') this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist') + ' nodownload')
} else { } else {
...@@ -55,11 +57,14 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy { ...@@ -55,11 +57,14 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy {
this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist')) this.video.nativeElement.setAttribute('controlslist', this.video.nativeElement.getAttribute('controlslist'))
} }
} }
}
ngOnDestroy(): void { ngOnDestroy(): void {
if(!this.pdfPath){
clearInterval(this.timer); clearInterval(this.timer);
clearInterval(this.timer2); clearInterval(this.timer2);
this.saveVideoPlayback(); this.saveVideoPlayback();
} }
}
menuPrevent() { menuPrevent() {
return false; return false;
} }
...@@ -79,9 +84,9 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy { ...@@ -79,9 +84,9 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy {
}) })
} }
queryVideoPlayback() { queryVideoPlayback(type) {
const param = { const param = {
id: '', id: null,
customerId: this.lifeCustomerInfo.customerId, customerId: this.lifeCustomerInfo.customerId,
practitionerId: this.lifeCustomerInfo.practitionerId, practitionerId: this.lifeCustomerInfo.practitionerId,
fileId: this.fileId, fileId: this.fileId,
...@@ -89,8 +94,18 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy { ...@@ -89,8 +94,18 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy {
this.myService.queryVideoPlayback(param).subscribe(res => { this.myService.queryVideoPlayback(param).subscribe(res => {
if (res['success']) { if (res['success']) {
this.videoPlaybacks = res['data']['videoPlaybacks']; this.videoPlaybacks = res['data']['videoPlaybacks'];
this.maxViewTime = this.videoPlaybacks[0]['maxViewTime'];
if(type===1){
// 设置开始播放时间为上次离开时间 // 设置开始播放时间为上次离开时间
this.video.nativeElement.currentTime = this.videoPlaybacks.length > 0 ? this.videoPlaybacks[0]['viewTime'] : 0; this.video.nativeElement.currentTime = this.videoPlaybacks.length > 0 ? this.videoPlaybacks[0]['viewTime'] : 0;
}else{
this.timer2 = setInterval(()=>{
if (this.video.nativeElement.currentTime - this.originTime > 1 && this.video.nativeElement.currentTime > this.maxViewTime) {
this.video.nativeElement.currentTime = this.originTime;
}
this.originTime = this.video.nativeElement.currentTime;
},500)
}
} else { } else {
this.video.nativeElement.currentTime = 0; this.video.nativeElement.currentTime = 0;
} }
...@@ -98,4 +113,8 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy { ...@@ -98,4 +113,8 @@ export class VideoComponent implements OnInit, AfterViewInit, OnDestroy {
}) })
} }
download(path){
window.open(path)
}
} }
src/app/my/file-upload/file-upload.component.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<i class="iconfont icon-xiazai" style="margin-right: 0;"></i> <i class="iconfont icon-xiazai" style="margin-right: 0;"></i>
</div> </div>
</a> </a>
<a href="javascript:;" (click)="viewPdf(fileUploadItem.filePath)" *ngIf="!judgmentFile(fileUploadItem.filePath) && judgmentFile(fileUploadItem.filePath,'pdf')"> <a href="javascript:;" (click)="viewPdf(fileUploadItem)" *ngIf="!judgmentFile(fileUploadItem.filePath) && judgmentFile(fileUploadItem.filePath,'pdf')">
<div style="overflow-x: hidden; white-space: nowrap;text-overflow: ellipsis;"> <div style="overflow-x: hidden; white-space: nowrap;text-overflow: ellipsis;">
<i class="iconfont icon-pdf"></i> <i class="iconfont icon-pdf"></i>
<span title="{{fileUploadItem.itemName}}">{{fileUploadItem.itemName}}</span> <span title="{{fileUploadItem.itemName}}">{{fileUploadItem.itemName}}</span>
......
src/app/my/file-upload/file-upload.component.ts
...@@ -17,8 +17,9 @@ export class FileUploadComponent implements OnInit { ...@@ -17,8 +17,9 @@ export class FileUploadComponent implements OnInit {
constructor(private myService: MyService, private activatedRoute: ActivatedRoute,private router:Router) { constructor(private myService: MyService, private activatedRoute: ActivatedRoute,private router:Router) {
} }
viewPdf(p){ viewPdf(fileUploadItem){
this.router.navigate(['/pdfView'],{queryParams:{path:`assets/pdfjs/web/viewer.html?file=${p}`}}) this.router.navigate(['/pdfView'],{queryParams:{path:`assets/pdfjs/web/viewer.html?file=${fileUploadItem.filePath}&isneeddownload=${fileUploadItem.isDownload=='1'?'true':'false'}`}})
sessionStorage.setItem('permissions',JSON.stringify({isDownload: fileUploadItem.isDownload,isControlPlayback:fileUploadItem.isControlPlayback}))
} }
setVideoPath(fileUploadItem){ setVideoPath(fileUploadItem){
sessionStorage.setItem('videoPath',fileUploadItem.filePath); sessionStorage.setItem('videoPath',fileUploadItem.filePath);
......
src/assets/pdfjs/web/viewer.js
...@@ -1618,18 +1618,20 @@ var PDFViewerApplication = { ...@@ -1618,18 +1618,20 @@ var PDFViewerApplication = {
let isNeedDownload; let isNeedDownload;
const queryString = document.location.search.substring(1); const queryString = document.location.search.substring(1);
const params = (0, _ui_utils.parseQueryString)(queryString); const params = (0, _ui_utils.parseQueryString)(queryString);
console.log(params)
isNeedDownload = params['isneeddownload'] ? params['isneeddownload'] : false; isNeedDownload = params['isneeddownload'] ? params['isneeddownload'] : false;
if(isNeedDownload){ if(isNeedDownload=='true'){
let classAtr = document.getElementById('download').getAttribute('class'); let classAtr = document.getElementById('download').getAttribute('class');
let classAtr1 = document.getElementById('secondaryDownload').getAttribute('class');
let newClass = classAtr.replace('hiddenBtn',''); let newClass = classAtr.replace('hiddenBtn','');
let newClass1 = classAtr1.replace('hiddenBtn','');
document.getElementById('download').setAttribute('class',newClass); document.getElementById('download').setAttribute('class',newClass);
document.getElementById('secondaryDownload').setAttribute('class',newClass1);
}else{ }else{
document.getElementById('download').className += ' hiddenBtn'; document.getElementById('download').className += ' hiddenBtn';
document.getElementById('secondaryDownload').className += ' hiddenBtn';
} }
// 控制下载结束----- // 控制下载结束-----
if (metadataTitle) { if (metadataTitle) {
if (metadataTitle !== "Untitled" && !/[\uFFF0-\uFFFF]/g.test(metadataTitle)) { if (metadataTitle !== "Untitled" && !/[\uFFF0-\uFFFF]/g.test(metadataTitle)) {
pdfTitle = metadataTitle; pdfTitle = metadataTitle;
...@@ -12549,7 +12551,6 @@ var PDFPageView = /*#__PURE__*/function () { ...@@ -12549,7 +12551,6 @@ var PDFPageView = /*#__PURE__*/function () {
let isNeedCover; let isNeedCover;
const queryString = document.location.search.substring(1) const queryString = document.location.search.substring(1)
const params = (0, _ui_utils.parseQueryString)(queryString); const params = (0, _ui_utils.parseQueryString)(queryString);
console.log(params);
isNeedCover = params['isneedcover'] ?? 'true'; isNeedCover = params['isneedcover'] ?? 'true';
if(isNeedCover=='true'){ if(isNeedCover=='true'){
var cover = document.createElement('div'); var cover = document.createElement('div');
......
src/assets/rrweb/rrweb.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/index.html
...@@ -72,8 +72,8 @@ ...@@ -72,8 +72,8 @@
<script src="./assets/js/jquery.min.js"></script> <script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/qrcode.js"></script> <script src="./assets/js/qrcode.js"></script>
<!--<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>--> <!--<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script> <script src="./assets/rrweb/rrweb-record.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script> <script src="./assets/rrweb/rrweb.min.js"></script>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="./assets/LCalendar/LCalendar.js"></script> <script src="./assets/LCalendar/LCalendar.js"></script>
<script src="./assets/laydate/laydate.js"></script> <script src="./assets/laydate/laydate.js"></script>
......
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