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 {
// @Input()
// extractCoverFunc = null;
@Output()
videoIsAccessibleInCDN = new EventEmitter();
@Output()
videoUploaded = new EventEmitter();
@Output()
......@@ -141,6 +144,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy, OnInit {
httpHeadCall(url, (flag)=>{
if (flag) {
this.playVedioUrl = url;
this.videoIsAccessibleInCDN.emit(url);
} else {
setTimeout(() => {
this.safeVideoUrl();
......@@ -149,6 +153,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy, OnInit {
});
return this.playVedioUrl;
}
videoLoadedMetaData() {
}
......
......@@ -27,7 +27,7 @@
<div style="margin: 20px; display: flex; align-items: center; ">
<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)"
(onCapture)="handleOnCapture($event)" (parentRef)="onParentRef($event)"></app-upload-video>
(onCapture)="handleOnCapture($event)" (parentRef)="onParentRef($event)" (videoIsAccessibleInCDN)="onVideoIsAccessibleInCDN($event)"></app-upload-video>
</div>
<!-- <div style="padding: 5px 0;" align='center'>
<h3>视频地址</h3>
......@@ -231,10 +231,10 @@
[nzWidth]="900">
<!-- 视频播放器 -->
<div style="padding: 20px;">
<div style="margin-bottom: 20px; text-align: center;">
<div style="margin-bottom: 20px; text-align: center;" *ngIf="fragmentVideoUrl">
<video
id="fragment-video"
[src]="item.video_url.replace('.mp4', '_h.mp4')"
[src]="fragmentVideoUrl"
crossorigin="anonymous"
controls
style="width: 100%; max-width: 800px;"
......@@ -245,6 +245,11 @@
</video>
</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">
<button nz-button nzType="primary" (click)="onVideoPreview()">效果试看</button>
</div>
......
......@@ -440,7 +440,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
console.error('视频错误代码:', video.error.code, '错误信息:', video.error.message);
// 如果是因为跨域问题,尝试重新设置
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
}
}
onVideoIsAccessibleInCDN(url: string) {
console.log('视频已上传到CDN:', url);
this.fragmentVideoUrl = url;
this.changeDetectorRef.detectChanges();
}
// 格式化时间显示
formatTime(seconds: number): string {
if (!seconds || isNaN(seconds)) {
......
......@@ -2,13 +2,12 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgOne</title>
<title>剑津视频课堂模版</title>
<base href="/">
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="assets/jquery-1.11.0.min.js"></script>
</head>
<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