Commit 12c6b620 authored by JinWei's avatar JinWei

Merge branch 'feature-jj_vedio_practice' into 'master'

监听视频上传至CDN事件

See merge request !3
parents 872ecb5e 14b7c953
...@@ -68,6 +68,9 @@ export class UploadVideoComponent implements OnChanges, OnDestroy, OnInit { ...@@ -68,6 +68,9 @@ export class UploadVideoComponent implements OnChanges, OnDestroy, OnInit {
// @Input() // @Input()
// extractCoverFunc = null; // extractCoverFunc = null;
@Output()
videoIsAccessibleInCDN = new EventEmitter();
@Output() @Output()
videoUploaded = new EventEmitter(); videoUploaded = new EventEmitter();
@Output() @Output()
...@@ -141,6 +144,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy, OnInit { ...@@ -141,6 +144,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy, OnInit {
httpHeadCall(url, (flag)=>{ httpHeadCall(url, (flag)=>{
if (flag) { if (flag) {
this.playVedioUrl = url; this.playVedioUrl = url;
this.videoIsAccessibleInCDN.emit(url);
} else { } else {
setTimeout(() => { setTimeout(() => {
this.safeVideoUrl(); this.safeVideoUrl();
...@@ -149,6 +153,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy, OnInit { ...@@ -149,6 +153,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy, OnInit {
}); });
return this.playVedioUrl; return this.playVedioUrl;
} }
videoLoadedMetaData() { videoLoadedMetaData() {
} }
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<div style="margin: 20px; display: flex; align-items: center; "> <div style="margin: 20px; display: flex; align-items: center; ">
<h3 style="min-width: 150px; text-align:left">上传视频:</h3> <h3 style="min-width: 150px; text-align:left">上传视频:</h3>
<app-upload-video style="width: 80%; max-width: 640px;" [videoUrl]="item.video_url.replace('.mp4', '_h.mp4')" [showUploadBtn]="true" (videoUploaded)="onVideoUploaded($event)" <app-upload-video style="width: 80%; max-width: 640px;" [videoUrl]="item.video_url.replace('.mp4', '_h.mp4')" [showUploadBtn]="true" (videoUploaded)="onVideoUploaded($event)"
(onCapture)="handleOnCapture($event)" (parentRef)="onParentRef($event)"></app-upload-video> (onCapture)="handleOnCapture($event)" (parentRef)="onParentRef($event)" (videoIsAccessibleInCDN)="onVideoIsAccessibleInCDN($event)"></app-upload-video>
</div> </div>
<!-- <div style="padding: 5px 0;" align='center'> <!-- <div style="padding: 5px 0;" align='center'>
<h3>视频地址</h3> <h3>视频地址</h3>
...@@ -231,10 +231,10 @@ ...@@ -231,10 +231,10 @@
[nzWidth]="900"> [nzWidth]="900">
<!-- 视频播放器 --> <!-- 视频播放器 -->
<div style="padding: 20px;"> <div style="padding: 20px;">
<div style="margin-bottom: 20px; text-align: center;"> <div style="margin-bottom: 20px; text-align: center;" *ngIf="fragmentVideoUrl">
<video <video
id="fragment-video" id="fragment-video"
[src]="item.video_url.replace('.mp4', '_h.mp4')" [src]="fragmentVideoUrl"
crossorigin="anonymous" crossorigin="anonymous"
controls controls
style="width: 100%; max-width: 800px;" style="width: 100%; max-width: 800px;"
...@@ -245,6 +245,11 @@ ...@@ -245,6 +245,11 @@
</video> </video>
</div> </div>
<div style="margin-bottom: 20px; text-align: center;" *ngIf="!fragmentVideoUrl">
<i nz-icon nzType="loading" nzTheme="outline"></i>
等待视频上传完成...
</div>
<div style="margin-bottom: 20px; text-align: end;" id="video-preview-btn"> <div style="margin-bottom: 20px; text-align: end;" id="video-preview-btn">
<button nz-button nzType="primary" (click)="onVideoPreview()">效果试看</button> <button nz-button nzType="primary" (click)="onVideoPreview()">效果试看</button>
</div> </div>
......
...@@ -440,7 +440,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O ...@@ -440,7 +440,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
console.error('视频错误代码:', video.error.code, '错误信息:', video.error.message); console.error('视频错误代码:', video.error.code, '错误信息:', video.error.message);
// 如果是因为跨域问题,尝试重新设置 // 如果是因为跨域问题,尝试重新设置
if (video.error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) { if (video.error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
this.message.create('warning', '视频加载失败,可能是跨域问题。请确保视频服务器支持 CORS。'); //this.message.create('warning', '视频加载失败,可能是跨域问题。请确保视频服务器支持 CORS。');
} }
} }
} }
...@@ -522,6 +522,12 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O ...@@ -522,6 +522,12 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
} }
} }
onVideoIsAccessibleInCDN(url: string) {
console.log('视频已上传到CDN:', url);
this.fragmentVideoUrl = url;
this.changeDetectorRef.detectChanges();
}
// 格式化时间显示 // 格式化时间显示
formatTime(seconds: number): string { formatTime(seconds: number): string {
if (!seconds || isNaN(seconds)) { if (!seconds || isNaN(seconds)) {
......
...@@ -2,13 +2,12 @@ ...@@ -2,13 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>NgOne</title> <title>剑津视频课堂模版</title>
<base href="/"> <base href="/">
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">--> <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script> <script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
<script type="text/javascript" src="assets/jquery-1.11.0.min.js"></script>
</head> </head>
<body> <body>
......
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