Commit 713b8585 authored by 李维's avatar 李维

测试视频播放

parent 5fb9f5de
This diff is collapsed.
......@@ -25,6 +25,7 @@ const CROSSWORD_PUZZLE = "9";
const SORT_WORDS = "10";
const CONNECTION_CHOICE = "11";
const TEXTINPUT_GROUP = "12";
const VIDEO_PLAY = "13";
// 评分体系
const RS_15_5L_FAF = "0";
......@@ -56,6 +57,9 @@ export default class SceneComponent extends MyCocosSceneComponent {
@property({type: cc.Node, displayName: "音频播放动画"})
aniSpeaker: cc.Node = null;
@property({type: cc.Node, displayName: "视频提示播放动画"})
aniVideoTips: cc.Node = null;
@property({type: cc.Node, displayName: "语音评测"})
pronunciationAssessmentModal: cc.Node = null;
......@@ -97,6 +101,7 @@ export default class SceneComponent extends MyCocosSceneComponent {
this.initScorePanel();
this.initActionButton();
this.initScoreShow();
this.initVideoPlayerLayer(); // 视频播放层
this.enableScroll(); // 启用页面滚动
this.startTimestamp = new Date().getTime();
}
......@@ -365,6 +370,21 @@ export default class SceneComponent extends MyCocosSceneComponent {
})
}
// 初始化视频播放层
initVideoPlayerLayer() {
const videoPlayer = cc.find("Canvas/VideoPlayerContainer");
const closeBtn = cc.find("close", videoPlayer);
const videoplayer = cc.find("videoPlayer", videoPlayer);
videoplayer.width = videoPlayer.width;
videoplayer.height = videoPlayer.height;
videoPlayer.active = false;
closeBtn.on("click", ()=>{
this.hideVideoLayer();
})
}
scoreShowContainer = null;
initScoreShow() {
const canvas = cc.find("Canvas");
......@@ -534,6 +554,10 @@ export default class SceneComponent extends MyCocosSceneComponent {
case AUDIO_PLAY:
this.setOneAudioBtn(configItem, this.data.hotZoneItemArr[configItem.linkHotZoneIndex]);
break;
// 视频播放按钮
case VIDEO_PLAY:
this.setOneVideoBtn(configItem, this.data.hotZoneItemArr[configItem.linkHotZoneIndex]);
break;
// 热区选项(单选)
case HOT_ZONE_RADIO:
validater = this.setHotZoneRadioGroup(configItem, isDebug);
......@@ -2402,6 +2426,29 @@ export default class SceneComponent extends MyCocosSceneComponent {
})
};
// 视频播放题型
setOneVideoBtn(contentData, hotZoneItemData, debugMode=false) {
const rect = this.newRectNode(hotZoneItemData, layer_4, debugMode);
const aniAudio = cc.instantiate(this.aniVideoTips)
aniAudio.x = 0;
aniAudio.y = 0;
aniAudio.anchorX = aniAudio.anchorY = 0;
aniAudio.active = true;
aniAudio.zIndex = -1;
aniAudio.width = rect.width;
aniAudio.height = rect.height;
rect.addChild(aniAudio);
rect.on("click", async () => {
if(this.submitted) {
return;
}
this.showVideoLayer();
const videoplayer = cc.find("Canvas/VideoPlayerContainer/videoPlayer").getComponent(cc.VideoPlayer)
videoplayer.remoteURL = contentData.video_url;
videoplayer.play();
})
};
// 语音评测题型
setPronunciationAssessment(contentData, hotZoneItemData, debugMode=false) {
let recordUrl = "";
......@@ -2933,6 +2980,32 @@ export default class SceneComponent extends MyCocosSceneComponent {
scorllView.enabled = true;
}
// 显示视频播放页面
showVideoLayer() {
const canvas = cc.find("Canvas");
canvas.children.forEach(nodeItem => {
if(nodeItem.name != "VideoPlayerContainer") {
nodeItem.opacity = 0;
} else {
nodeItem.active = true;
nodeItem.opacity = 255;
}
});
}
// 隐藏视频播放页面
hideVideoLayer() {
const canvas = cc.find("Canvas");
canvas.children.forEach(nodeItem => {
if(nodeItem.name == "VideoPlayerContainer") {
nodeItem.opacity = 0;
nodeItem.active = false;
} else {
nodeItem.opacity = 255;
}
});
}
// 模糊匹配字符串 1,2,3
fuzzyMatchingString(testString, matchString, options){
const {
......
This diff is collapsed.
......@@ -518,3 +518,22 @@ export function getUUID() {
});
}
// 获取视频地址
// export function getVideoUrl(callback) {
// const url1 = this.data.video_url;
// // 强制使用原视频
// // console.log("强制使用原视频")
// // callback(url1);
// // return
// // ==== End ===
// const url2 = url1.replace(/.mp4$/g, "_h.mp4");
// this.httpHeadCall(url2, (success) => {
// if (success) {
// console.log('return url2: ', url2);
// callback(url2);
// } else {
// console.log('return url1: ', url1);
// callback(url1);
// }
// })
// }
{
"ver": "2.3.5",
"uuid": "cf3bbd02-e243-4c25-bcbe-31194ea30f54",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 70,
"height": 70,
"platformSettings": {},
"subMetas": {
"video_0": {
"ver": "1.0.4",
"uuid": "d6e358ee-47e0-44b8-8143-512ad95853ba",
"rawTextureUuid": "cf3bbd02-e243-4c25-bcbe-31194ea30f54",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0.5,
"offsetY": 0,
"trimX": 5,
"trimY": 2,
"width": 61,
"height": 66,
"rawWidth": 70,
"rawHeight": 70,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "e1ab8777-3621-4444-9321-258e7ec5780a",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 70,
"height": 70,
"platformSettings": {},
"subMetas": {
"video_1": {
"ver": "1.0.4",
"uuid": "183d0c6e-42ae-42e0-9d29-4464519e5a1e",
"rawTextureUuid": "e1ab8777-3621-4444-9321-258e7ec5780a",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0.5,
"offsetY": 0,
"trimX": 5,
"trimY": 2,
"width": 61,
"height": 66,
"rawWidth": 70,
"rawHeight": 70,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"__type__": "cc.AnimationClip",
"_name": "videoTip",
"_objFlags": 0,
"_native": "",
"_duration": 1.0166666666666666,
"sample": 60,
"speed": 1,
"wrapMode": 2,
"curveData": {
"comps": {
"cc.Sprite": {
"spriteFrame": [
{
"frame": 0,
"value": {
"__uuid__": "d6e358ee-47e0-44b8-8143-512ad95853ba"
}
},
{
"frame": 0.5,
"value": {
"__uuid__": "183d0c6e-42ae-42e0-9d29-4464519e5a1e"
}
},
{
"frame": 1,
"value": {
"__uuid__": "d6e358ee-47e0-44b8-8143-512ad95853ba"
}
}
]
}
}
},
"events": []
}
\ No newline at end of file
{
"ver": "2.1.0",
"uuid": "05ef0b95-c80b-4564-843c-1b884ad9b8ee",
"subMetas": {}
}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<div class="p-video-box">
<div class="up-video" style="display: flex;">
<!--<nz-upload class="" [nzDisabled]="!showUploadBtn"-->
<!--[nzShowUploadList]="false"-->
<!--[nzBeforeUpload]="beforeUpload"-->
<!--nzAccept = ".mp4"-->
<!--style="margin-right: 1rem">-->
<nz-upload class="p-image-uploader" [nzDisabled]="uploading"
[nzShowUploadList]="false"
nzAccept = ".mp4"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="handleChange($event)"
style="margin-right: 1rem">
<button type="button" nz-button nzType="default" *ngIf="showUploadBtn" [disabled]="uploading"
[nzLoading]="uploading" >
<i nz-icon nzType="plus" nzTheme="outline"></i>
<span>{{ uploading ? 'Uploading' : 'Select Video' }}</span>
<!--<span>Select Video</span>-->
</button>
</nz-upload>
<!--<button nz-button nzType="primary" *ngIf="showUploadBtn"-->
<!--style="margin-right: 1rem"-->
<!--type="button"-->
<!--[nzLoading]="uploading"-->
<!--(click)="handleUpload()"-->
<!--[disabled]="!videoFile || uploading">-->
<!--<i nz-icon type="upload" theme="outline"></i>-->
<!--<span>{{ uploading ? 'Uploading' : 'Start Upload' }}</span>-->
<!--</button>-->
<!--
<button type="button"
(click)="extraCover()"
nz-button nzType="default"
[disabled]=" !(videoUrl && videoUrl.constructor.name === 'String')">设置封面</button>
-->
<!--
<nz-divider></nz-divider>
<div [style.display]="!uploading?'none':''" style="position:relative">
<div style="width: calc( 100% - 20px);">
<nz-progress [nzPercent]="progress">
</nz-progress>
<div class="up-video" style="display: flex;">
<!--<nz-upload class="" [nzDisabled]="!showUploadBtn"-->
<!--[nzShowUploadList]="false"-->
<!--[nzBeforeUpload]="beforeUpload"-->
<!--nzAccept = ".mp4"-->
<!--style="margin-right: 1rem">-->
<nz-upload class="p-image-uploader" [nzDisabled]="uploading"
[nzShowUploadList]="false"
nzAccept = ".mp4"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="handleChange($event)"
style="margin-right: 1rem">
<button type="button" nz-button nzType="default" *ngIf="showUploadBtn" [disabled]="uploading"
[nzLoading]="uploading" >
<i nz-icon nzType="plus" nzTheme="outline"></i>
<span>{{ uploading ? 'Uploading' : 'Select Video' }}</span>
<!--<span>Select Video</span>-->
</button>
</nz-upload>
<!--<button nz-button nzType="primary" *ngIf="showUploadBtn"-->
<!--style="margin-right: 1rem"-->
<!--type="button"-->
<!--[nzLoading]="uploading"-->
<!--(click)="handleUpload()"-->
<!--[disabled]="!videoFile || uploading">-->
<!--<i nz-icon type="upload" theme="outline"></i>-->
<!--<span>{{ uploading ? 'Uploading' : 'Start Upload' }}</span>-->
<!--</button>-->
<!--
<button type="button"
(click)="extraCover()"
nz-button nzType="default"
[disabled]=" !(videoUrl && videoUrl.constructor.name === 'String')">设置封面</button>
-->
<!--
<nz-divider></nz-divider>
<div [style.display]="!uploading?'none':''" style="position:relative">
<div style="width: calc( 100% - 20px);">
<nz-progress [nzPercent]="progress">
</nz-progress>
</div>
<i (click)="cancelUpload()" class="anticon anticon-close-circle" style="position: absolute;top: 50%;right: 0;transform: translateY(-50%);cursor: pointer"></i>
</div>
<i (click)="cancelUpload()" class="anticon anticon-close-circle" style="position: absolute;top: 50%;right: 0;transform: translateY(-50%);cursor: pointer"></i>
</div>
-->
</div>
<div class="p-box d-flex align-items-center p-video-uploader">
<div class="p-upload-icon" *ngIf="!showUploadBtn && !videoUrl && !uploading">
<i nz-icon nzType="upload" nzTheme="outline"></i>
<div class="m-3"></div>
<span>Click here to upload video</span>
<div class="mt-5 p-progress-bar" *ngIf="uploading">
<div class="p-progress-bg" [style.width]="progress*0.2+'rem'"></div>
<div class="p-progress-value">{{progress}}%</div>
</div>
-->
</div>
<div class="p-upload-progress-bg dddd " *ngIf="uploading"
[ngClass]="{'smart-bar': showUploadBtn}" >
<div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text">
<fa-icon icon="cloud-upload-alt"></fa-icon>
Uploading...
<div class="p-box d-flex align-items-center p-video-uploader">
<div class="p-upload-icon" *ngIf="!showUploadBtn && !videoUrl && !uploading">
<i nz-icon nzType="upload" nzTheme="outline"></i>
<div class="m-3"></div>
<span>Click here to upload video</span>
<div class="mt-5 p-progress-bar" *ngIf="uploading">
<div class="p-progress-bg" [style.width]="progress*0.2+'rem'"></div>
<div class="p-progress-value">{{progress}}%</div>
</div>
</div>
</div>
<div class="p-upload-check-bg" *ngIf="checking">
<div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text">
<fa-icon icon="cloud-upload-alt"></fa-icon>
<i nz-icon nzType="loading" nzTheme="outline"></i>Checking...
<div class="p-upload-progress-bg dddd " *ngIf="uploading"
[ngClass]="{'smart-bar': showUploadBtn}" >
<div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text">
<fa-icon icon="cloud-upload-alt"></fa-icon>
Uploading...
</div>
</div>
<div class="p-upload-check-bg" *ngIf="checking">
<div class="i-bg" [style.width]="progress+'%'"></div>
<div class="i-text">
<fa-icon icon="cloud-upload-alt"></fa-icon>
<i nz-icon nzType="loading" nzTheme="outline"></i>Checking...
</div>
</div>
<div class="p-preview" *ngIf="!uploading && videoUrl " >
<!--<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>-->
<video [src]="safeVideoUrl(videoUrl)" controls #videoNode></video>
</div>
</div>
<div [style.display]="!checkVideoExists?'none':''">
<span><i nz-icon nzType="loading" nzTheme="outline"></i> checking file to upload</span>
</div>
<div class="p-preview" *ngIf="!uploading && videoUrl " >
<video crossorigin="anonymous" [src]="videoUrl" controls #videoNode></video>
<!-- <video [src]="safeVideoUrl(videoUrl)" controls #videoNode></video> -->
</div>
</div>
<div [style.display]="!checkVideoExists?'none':''">
<span><i nz-icon nzType="loading" nzTheme="outline"></i> checking file to upload</span>
</div>
</div>
\ No newline at end of file
......@@ -19,9 +19,8 @@
.p-video-uploader {
position: relative;
display: block;
width: 100%;
height: 0;
padding-bottom: 56.25%;
height: 200px;
.p-box {
position: absolute;
left: 0;
......
......@@ -59,10 +59,10 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
this.videoFile = null;
this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadUrl = (<any> window).courseware.uploadVideoUrl();
this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => {
window['air'].getUploadVideoCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
......@@ -81,8 +81,8 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
}
safeVideoUrl(url) {
console.log(url);
return this.sanitization.bypassSecurityTrustResourceUrl(url); // `${url}`;
// console.log(this.sanitization.bypassSecurityTrustResourceUrl(url));
return this.sanitization.bypassSecurityTrustResourceUrl(url)['changingThisBreaksApplicationSecurity']; // `${url}`;
}
videoLoadedMetaData() {
......
......@@ -54,6 +54,7 @@
<nz-select [(ngModel)]="it.hotZoneType" style="width: 300px;" (ngModelChange)="save()">
<nz-option [nzValue]="TEXT_SELECT" nzLabel="文字选项"></nz-option>
<nz-option [nzValue]="AUDIO_PLAY" nzLabel="播放音频"></nz-option>
<nz-option [nzValue]="VIDEO_PLAY" nzLabel="播放视频"></nz-option>
<nz-option [nzValue]="HOT_ZONE_RADIO" nzLabel="热区选项(单选)"></nz-option>
<nz-option [nzValue]="HOT_ZONE_CHECKBOX" nzLabel="热区选项(多选)"></nz-option>
<nz-option [nzValue]="TEXTINPUT" nzLabel="文字输入"></nz-option>
......@@ -108,7 +109,7 @@
</nz-table>
</div>
<div *ngIf="it.hotZoneType != '' && it.hotZoneType != AUDIO_PLAY && it.hotZoneType != TEXTINPUT && it.hotZoneType != PRONUNCIATION_ASSESSMENT" style="padding: 10px 0 10px 150px;">
<div *ngIf="it.hotZoneType != '' && it.hotZoneType != AUDIO_PLAY && it.hotZoneType != VIDEO_PLAY && it.hotZoneType != TEXTINPUT && it.hotZoneType != PRONUNCIATION_ASSESSMENT" style="padding: 10px 0 10px 150px;">
<div style="margin-bottom: 16px;">
<span style="font-size: 14px; color: #000000d9;">内容清单</span>
<button nz-button nzSize="small" nzType="primary" style="float: right;" (click)="addHotZoneConfigItem(it)">
......@@ -460,14 +461,19 @@
</tr>
</tbody>
</nz-table>
</div>
<div *ngIf="it.hotZoneType == AUDIO_PLAY" style="padding: 20px 0 10px 150px;">
<app-audio-recorder
[audioUrl]="it.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url', it)"
></app-audio-recorder>
</div>
<div *ngIf="it.hotZoneType == VIDEO_PLAY" style="padding: 20px 0 10px 150px;">
<app-upload-video [videoUrl]="it.video_url" (videoUploaded)="onVideoUploadSuccess($event, 'video_url', it)"></app-upload-video>
</div>
</div>
<div *ngIf="it.hotZoneType == HOT_ZONE_RADIO || it.hotZoneType == HOT_ZONE_CHECKBOX" style="margin: 10px 10px;">
......@@ -529,7 +535,7 @@
</nz-select>
</div>
<div *ngIf="it.hotZoneType != ''&& it.hotZoneType != AUDIO_PLAY && it.hotZoneType != HOT_ZONE_CHECKBOX && it.hotZoneType != CONNECTION && it.hotZoneType != TEXT_SELECT && it.hotZoneType != RIGHT_OR_WRONG && it.hotZoneType != TEXTINPUT_GROUP" style="margin: 10px 10px;">
<div *ngIf="it.hotZoneType != ''&& it.hotZoneType != AUDIO_PLAY && it.hotZoneType != VIDEO_PLAY && it.hotZoneType != HOT_ZONE_CHECKBOX && it.hotZoneType != CONNECTION && it.hotZoneType != TEXT_SELECT && it.hotZoneType != RIGHT_OR_WRONG && it.hotZoneType != TEXTINPUT_GROUP" style="margin: 10px 10px;">
<span style="display: inline-block; text-align: right; width: 150px;">分数:</span>
<input type="text" nz-input [(ngModel)]="it.score" (blur)="save()" style="display: inline-block; width: 300px;">
</div>
......
......@@ -55,6 +55,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
SORT_WORDS = "10";
CONNECTION_CHOICE = "11";
TEXTINPUT_GROUP = "12";
VIDEO_PLAY = "13";
// 评分体系
RS_15_5L_FAF = "0";
......@@ -126,6 +127,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
hotZoneType: "",
linkHotZoneIndex: -1,
audio_url: "",
video_url: "",
score: "0",
unselectedStyle: "none",
selectedStyle: "border",
......@@ -552,7 +554,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
totalScore = parseFloat(_totalScore + "");
this.item.hotZoneConfigArr.forEach((content, contentIndex) => {
if(content.hotZoneType != this.AUDIO_PLAY) {
if(content.hotZoneType != this.AUDIO_PLAY && content.hotZoneType != this.VIDEO_PLAY) {
if(allScoreIndex.indexOf(contentIndex) == -1) {
scoreConfigErr.push((`内容${contentIndex+1}: 没有被配置到题目内容中,请检查分数配置`))
}
......@@ -626,11 +628,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
this.save();
}
onVideoUploadSuccess(e, item=null) {
onVideoUploadSuccess(e, key, item=null) {
if (!item) {
item = this.item;
}
item.video_url = e.url;
item[key] = e.url;
this.save();
}
......
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