视频通过video播放

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

+<video [src]="videoSrc" controls="controls">
+  您的浏览器不支持 video 标签。
+  </video>
\ No newline at end of file

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

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VideoComponent } from './video.component';
+
+describe('VideoComponent', () => {
+  let component: VideoComponent;
+  let fixture: ComponentFixture<VideoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VideoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VideoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ydlife-video',
+  templateUrl: './video.component.html',
+  styleUrls: ['./video.component.scss']
+})
+export class VideoComponent implements OnInit {
+  videoSrc:string;
+  constructor() { }
+  
+  ngOnInit() {
+    this.videoSrc = sessionStorage.getItem('videoPath');
+  }
+
+}

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

@@ -10,16 +10,23 @@
   <div class="contentList" [ngStyle]="{'margin-top':type == 'fileUpload'?'10px':'auto'}">
     <ul>
       <li *ngFor="let fileUploadItem of fileUploadItemList">
-        <a href="{{fileUploadItem.filePath}}" download="{{fileUploadItem.itemName}}" target="_blank">
+        <a href="{{fileUploadItem.filePath}}" download="{{fileUploadItem.itemName}}" target="_blank" *ngIf="!judgmentFile(fileUploadItem.filePath)">
+          <div>
+            <i class="iconfont icon-pdf"></i>
+            <span title="{{fileUploadItem.itemName}}">{{fileUploadItem.itemName}}</span>
+          </div>
+          <div style="flex-basis: 30px;text-align: right;">
+            <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)">
           <div>
-            <i class="iconfont icon-pdf" *ngIf="!judgmentFile(fileUploadItem.filePath)"></i>
             <img src="assets/images/videoIcon.png" alt="视频" *ngIf="judgmentFile(fileUploadItem.filePath)" style=" width: 26px;
             margin-right: 6px;">
             <span title="{{fileUploadItem.itemName}}">{{fileUploadItem.itemName}}</span>
           </div>
           <div style="flex-basis: 30px;text-align: right;">
-            <i class="iconfont icon-xiazai" style="margin-right: 0;" *ngIf="!judgmentFile(fileUploadItem.filePath)"></i>
-            <img src="assets/images/playIcon.png" alt="播放" *ngIf="judgmentFile(fileUploadItem.filePath)"
+            <img src="assets/images/playIcon.png" alt="播放"
               style=" width: 26px;">
           </div>
         </a>

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

@@ -16,6 +16,9 @@ export class FileUploadComponent implements OnInit {
   fileUploadType:any;
   constructor(private myService: MyService, private activatedRoute: ActivatedRoute) {
   }
+  setVideoPath(p){
+    sessionStorage.setItem('videoPath',p);
+  }
 
   ngOnInit() {
     this.type = this.activatedRoute.snapshot.data[0]['type'];

src/app/my/my-routing.module.ts

@@ -74,6 +74,7 @@ import { JointSaleDetailComponent } from './joint-sale-detail/joint-sale-detail.
 import { IntegrationComponent } from './integration/integration.component';
 import { IntegrationDetailComponent } from './integration-detail/integration-detail.component';
 import { IntegrationRuleComponent } from './integration-rule/integration-rule.component';
+import { VideoComponent } from '../common/video/video.component';
 
 
 const myRoutes: Routes = [
@@ -162,10 +163,11 @@ const myRoutes: Routes = [
   { path: 'renewal_reminder_detail/:orderPayId',component:RenewalReminderDetailComponent,canActivate:[AuthGuard],data:{type:1,title: '续期订单提醒'}},
   { path: 'reminder_detail/:orderPayId',component:RenewalReminderDetailComponent,data:{type:2,title: '续期订单详情信息'}},
   { path: 'joint_sales',component:JointSalesComponent,canActivate:[AuthGuard],data:{title: '联合销售列表'}},
-  { path: 'joint_sales_detail/:unionSalesId',component:JointSaleDetailComponent,canActivate:[AuthGuard],data:{ttitle: '联合销售签署'}},
-  { path: 'integration',component:IntegrationComponent,canActivate:[AuthGuard],data:{ttitle: '我的积分'}},
-  { path: 'integration_detail',component:IntegrationDetailComponent,canActivate:[AuthGuard],data:{ttitle: '积分明细'}},
-  { path: 'integration_rule',component:IntegrationRuleComponent,canActivate:[AuthGuard],data:{ttitle: '积分规则'}},
+  { path: 'joint_sales_detail/:unionSalesId',component:JointSaleDetailComponent,canActivate:[AuthGuard],data:{title: '联合销售签署'}},
+  { path: 'integration',component:IntegrationComponent,canActivate:[AuthGuard],data:{title: '我的积分'}},
+  { path: 'integration_detail',component:IntegrationDetailComponent,canActivate:[AuthGuard],data:{title: '积分明细'}},
+  { path: 'integration_rule',component:IntegrationRuleComponent,canActivate:[AuthGuard],data:{tttle: '积分规则'}},
+  { path: 'video',component:VideoComponent,canActivate:[AuthGuard],data:{ttitle: '视频播放'}},
 
 ];
 

src/app/my/my.module.ts

@@ -88,9 +88,10 @@ import { JointSaleDetailComponent } from './joint-sale-detail/joint-sale-detail.
 import { IntegrationComponent } from './integration/integration.component';
 import { IntegrationDetailComponent } from './integration-detail/integration-detail.component';
 import { IntegrationRuleComponent } from './integration-rule/integration-rule.component';
+import { VideoComponent } from '../common/video/video.component';
 
 @NgModule({
-  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent, ProductComponent, ProductDataComponent, CommissionComponent, FileListComponent,MyCustomerComponent, CustomerRelationComponent, MyCustomerPolicyComponent, UnderwritingKnowledgeComponent, MyQuestionComponent, AskComponent, MenuItemComponent, MemberListComponent, ENoticeComponent, ENoticeSignComponent, RenewalReminderComponent, RenewalReminderDetailComponent, JointSalesComponent, JointSaleDetailComponent, IntegrationComponent, IntegrationDetailComponent, IntegrationRuleComponent],
+  declarations: [MyCenterHomeComponent, MkMaterialComponent, MkMaterialDetailComponent, FileUploadComponent, ImportantAnnouncementComponent, SalesDetailComponent, AnnouncementDetailComponent, MyBusinessComponent, MyBusinessDetailComponent, PickerComponent, MyToastComponent, SalesRankComponent, TeamRankComponent, RecruitingComponent, RecruitingDetailComponent, ThanksComponent, MySettingComponent, MySettingDetailComponent, MyNewsComponent, MyTargetComponent, TeamPanelComponent, SwitchNumberPipe, TeamSalesScoreComponent, ScoreDetailsComponent, BusinessCardComponent, OrderDetailComponent, SalaryComponent, TodoListComponent, AddTaskComponent, MedicalServiceComponent, InvitationComponent, RegisterComponent, EmployeeInfoComponent, EmployeeBasicInfoComponent, WorkExperienceComponent, PersonalPhotosComponent, EmployeeIdCardComponent, EmployeeEducationComponent, PersonalStatementComponent, SignatureComponent, EmployeeSubmitComponent, BankCardComponent, MemberDetailComponent, ApprovalListComponent, ApprovalCommentsComponent, ApprovalResultListComponent, MyApplicationComponent, SuggestionComponent, EmployeeSalaryComponent, HistoricalRankComponent, TeamAreaPanelComponent, ArticleComponent, ArticleDetailComponent, ArticleReadComponent,SalaryDetailComponent,SalaryFirstYearComponent,DetailModalComponent, ProductComponent, ProductDataComponent, CommissionComponent, FileListComponent,MyCustomerComponent, CustomerRelationComponent, MyCustomerPolicyComponent, UnderwritingKnowledgeComponent, MyQuestionComponent, AskComponent, MenuItemComponent, MemberListComponent, ENoticeComponent, ENoticeSignComponent, RenewalReminderComponent, RenewalReminderDetailComponent, JointSalesComponent, JointSaleDetailComponent, IntegrationComponent, IntegrationDetailComponent, IntegrationRuleComponent, VideoComponent],
   imports: [
     CommonModule,
     LifeCommonModule,