视频权限控制

angular.json

@@ -47,7 +47,7 @@
               "deployUrl": "",
               "baseHref": "/ydLife/",
               "namedChunks": false,
-              "aot": false,
+              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": false,

src/app/common/video/video.component.html

-<video *ngIf="!pdfPath" [src]="videoSrc" controls="controls" width="100%"  preload="auto" x5-playsinline="" playsinline="" webkit-playsinline="" >
+<video *ngIf="!pdfPath" #video 
+[src]="videoSrc"
+controls="true"
+ width="100%"  preload="auto" (contextmenu)="menuPrevent()" x5-playsinline="true" playsinline="true" webkit-playsinline="true" disablePictureInPicture>
   您的浏览器不支持 video 标签。
   </video>
 

src/app/common/video/video.component.ts

-import { Component, OnInit, } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild, } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { MyService } from 'src/app/my/my.service';
 
 @Component({
   selector: 'ydlife-video',
   templateUrl: './video.component.html',
   styleUrls: ['./video.component.scss']
 })
-export class VideoComponent implements OnInit {
-  videoSrc:string;
-  pdfPath:any;
-  constructor(private activatedRoute:ActivatedRoute) { }
-  
+export class VideoComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild('video') video: ElementRef;
+  videoSrc: string;
+  pdfPath: any;
+  permissions: any;
+  lifeCustomerInfo: any;
+  timer: any;
+  timer2:any;
+  videoPlaybacks: Array<any>;
+  originTime: number = 0;
+  constructor(private activatedRoute: ActivatedRoute, private myService: MyService) { }
+
   ngOnInit() {
     this.videoSrc = sessionStorage.getItem('videoPath');
-    this.pdfPath = this.activatedRoute.snapshot.queryParams['path']
+    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
+    this.pdfPath = this.activatedRoute.snapshot.queryParams['path'];
+    this.lifeCustomerInfo = JSON.parse(localStorage.getItem('lifeCustomerInfo'));
+    this.timer = setInterval(() => {
+      this.saveVideoPlayback()
+    }, 1000 * 20)
+    this.queryVideoPlayback()
   }
 
+  ngAfterViewInit(): void {
+    this.video.nativeElement.addEventListener('pause', ()=> { //暂停开始执行的函数
+      console.log('暂停播放')
+      this.saveVideoPlayback();
+    });
+        // 禁止拖动进度条
+    this.timer2 = setInterval(()=> {
+      const currentTime = this.video.nativeElement.currentTime;
+      const originTime = Number(sessionStorage.getItem('curTime')) ;
+      if (currentTime - originTime > 1) {
+        this.video.nativeElement.currentTime = sessionStorage.getItem('curTime')
+        this.video.nativeElement.pause();
+        sessionStorage.setItem('curTime',currentTime)
+      } 
+    }, 500)
+    // >>>>>>>>>>>>>禁止拖动进度条结束<<<<<<<<<<<<<<
+    const attr = this.video.nativeElement.getAttribute('controlslist')
+    if (this.permissions.isDownload == '2') {
+      this.video.nativeElement.setAttribute('controlslist', attr + ' nodownload')
+    } else {
+      this.video.nativeElement.setAttribute('controlslist', attr)
+    }
+    if (this.permissions.isControlPlayback == '2') {
+      this.video.nativeElement.setAttribute('controlslist', attr + ' noplaybackrate')
+    } else {
+      this.video.nativeElement.setAttribute('controlslist', attr)
+    }
+  }
+  ngOnDestroy(): void {
+    clearInterval(this.timer)
+    clearInterval(this.timer2)
+    this.saveVideoPlayback();
+  }
+  menuPrevent() {
+    return false;
+  }
+  saveVideoPlayback() {
+    // playbackStatus		视频播放状态(1:未播放完;2:已播放完)	【必填】
+    const param = {
+      id: '',
+      customerId: this.lifeCustomerInfo.customerId,
+      practitionerId: this.lifeCustomerInfo.practitionerId,
+      fileId: '',
+      totalTime: this.video.nativeElement.duration,
+      viewTime: this.video.nativeElement.currentTime,
+      playbackStatus: this.video.nativeElement.currentTime >= this.video.nativeElement.duration ? 2 : 1,
+    }
+    sessionStorage.setItem('curTime',this.video.nativeElement.currentTime);
+    this.myService.saveVideoPlayback(param).subscribe(res => {
+      console.log(res);
+    })
+  }
+
+  queryVideoPlayback() {
+    const param = {
+      id: '',
+      customerId: this.lifeCustomerInfo.customerId,
+      practitionerId: this.lifeCustomerInfo.practitionerId,
+      fileId: '',
+    }
+    this.myService.queryVideoPlayback(param).subscribe(res => {
+      if (res['success']) {
+        this.videoPlaybacks = res['data']['videoPlaybacks'];
+        // 设置开始播放时间为上次离开时间
+        this.video.nativeElement.currentTime = this.videoPlaybacks.length > 0 ? this.videoPlaybacks[0]['viewTime'] : 0;
+      } else {
+        this.video.nativeElement.currentTime = 0;
+      }
+      console.log(res);
+    })
+  }
 
 }

src/app/my/application-process/register/register.component.ts

@@ -178,6 +178,7 @@ export class RegisterComponent implements OnInit {
   queryInformedSheetById(){
     this.myService.queryInformedSheetById({'id':this.eNoticeId}).subscribe(res=>{
       console.log(res);
+      debugger;
       if(res['success']){
         const informed = res['data']['informed'];
         this.userInfo = {

src/app/my/file-upload/file-upload.component.html

@@ -28,7 +28,7 @@
             <i class="iconfont icon-xiazai" style="margin-right: 0;"></i>
           </div>
         </a>
-        <a href="javascript:;" [routerLink]="'/video'" *ngIf="judgmentFile(fileUploadItem.filePath)" (click)="setVideoPath(fileUploadItem.filePath)">
+        <a href="javascript:;" [routerLink]="['/video']" *ngIf="judgmentFile(fileUploadItem.filePath)" (click)="setVideoPath(fileUploadItem)">
           <div style="overflow-x: hidden; white-space: nowrap;text-overflow: ellipsis;">
             <img src="assets/images/videoIcon.png" alt="视频" *ngIf="judgmentFile(fileUploadItem.filePath)" style=" width: 26px;
             margin-right: 6px;">

src/app/my/file-upload/file-upload.component.ts

@@ -20,8 +20,9 @@ export class FileUploadComponent implements OnInit {
   viewPdf(p){
     this.router.navigate(['/pdfView'],{queryParams:{path:`assets/pdfjs/web/viewer.html?file=${p}`}})
   }
-  setVideoPath(p){
-    sessionStorage.setItem('videoPath',p);
+  setVideoPath(fileUploadItem){
+    sessionStorage.setItem('videoPath',fileUploadItem.filePath);
+    sessionStorage.setItem('permissions',JSON.stringify({isDownload: fileUploadItem.isDownload,isControlPlayback:fileUploadItem.isControlPlayback}))
   }
 
   ngOnInit() {
@@ -81,7 +82,8 @@ export class FileUploadComponent implements OnInit {
 
   //  文件下载
   fileUpload(itemType, itemId, fileCategory, code, mdDropOptionId) {
-    this.myService.filePath(itemType, itemId, fileCategory, code, mdDropOptionId).subscribe(res => {
+    const customerId = JSON.parse(localStorage.getItem('lifeCustomerInfo')).customerId;
+    this.myService.filePath(itemType, itemId, fileCategory, code, mdDropOptionId,customerId).subscribe(res => {
       if (res['success']) {
         this.fileUploadItemList = res['data']['fileUploadItemList'];
       }

src/app/my/my.service.ts

@@ -20,10 +20,10 @@ export class MyService {
   }
 
   //  文件下载
-  filePath(itemType, itemId, fileCategory, code, mdDropOptionCode) {
+  filePath(itemType, itemId, fileCategory, code, mdDropOptionCode,customerId=null) {
     const url = this.API + '/filePathQuery';
     return this.http
-      .post(url, JSON.stringify({ itemType: itemType, itemId: itemId, fileCategory: fileCategory, code: code, mdDropOptionCode: mdDropOptionCode }));
+      .post(url, JSON.stringify({ itemType: itemType, itemId: itemId, fileCategory: fileCategory, code: code, mdDropOptionCode: mdDropOptionCode,customerId:customerId }));
   }
 
   //  重要公告
@@ -881,4 +881,17 @@ export class MyService {
     const url = this.ydapi + "/practitioner/applyEmail";
     return this.http.post(url,JSON.stringify(params))
   }
+
+  // 保存视频播放轨迹接口 https://mdev.zuihuibi.cn/api/saveVideoPlayback
+  // 请求信息(定时20s调用一次、或者暂停、离开浏览器、退出等可监控点调用)
+  saveVideoPlayback(params){
+    const url = this.API + "/videoPlay/saveVideoPlayback";
+    return this.http.post(url,JSON.stringify(params))
+  }
+  // 
+  // 调用该接口【获取视频的播放轨迹列表】与【获取上次播放时间点】
+  queryVideoPlayback(params){
+    const url = this.API + "/videoPlay/queryVideoPlayback";
+    return this.http.post(url,JSON.stringify(params))
+  }
 }

src/app/my/underwriting-knowledge/underwriting-knowledge.component.ts

@@ -48,7 +48,7 @@ export class UnderwritingKnowledgeComponent implements OnInit {
     })
   }
 
-  searchList(tagId){
+  searchList(tagId=null){
     const param = {
       insurerId:this.insurerId,
       productId:this.productId,