Commit 4e0035fe authored by Tt's avatar Tt

视频播放基础完成

parent 0d73475e
......@@ -3351,8 +3351,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 972,
"height": 39
"width": 1388,
"height": 12
},
"_anchorPoint": {
"__type__": "cc.Vec2",
......@@ -3417,8 +3417,8 @@
},
"_contentSize": {
"__type__": "cc.Size",
"width": 972,
"height": 39
"width": 1388,
"height": 12
},
"_anchorPoint": {
"__type__": "cc.Vec2",
......@@ -3532,7 +3532,7 @@
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "b42b439b-c03b-4687-98c4-39a3b8fe830f"
"__uuid__": "57aefa76-3665-4e87-aa3f-7d249116fc82"
},
"_type": 0,
"_sizeMode": 1,
......@@ -3564,7 +3564,7 @@
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "b035c74f-9f28-4698-8325-8fe9ec6e3db0"
"__uuid__": "396d0691-0897-468c-b8fb-ca6b6b803145"
},
"_type": 3,
"_sizeMode": 0,
......@@ -4055,7 +4055,7 @@
"_srcBlendFactor": 770,
"_dstBlendFactor": 771,
"_spriteFrame": {
"__uuid__": "4a11e302-ced0-4bf8-bdc3-baf51bf64c3a"
"__uuid__": "ae4e34c4-b108-495d-bd27-ece2b49db518"
},
"_type": 1,
"_sizeMode": 1,
......@@ -5111,6 +5111,15 @@
"currentTimeLabel": {
"__id__": 79
},
"videoControls": {
"__id__": 68
},
"pauseButton": {
"__id__": 76
},
"playButton": {
"__id__": 74
},
"_id": "6eW7M4ET1L4KOTzIOVRmf8"
}
]
\ No newline at end of file
......@@ -281,6 +281,11 @@ export default class SceneComponent extends MyCocosSceneComponent {
@property(cc.Node) ProgressBar: cc.Node = null;
@property(cc.VideoPlayer) videoPlayer: cc.VideoPlayer = null;
@property(cc.Label) currentTimeLabel: cc.Label = null;
@property(cc.Node) videoControls: cc.Node = null;
@property(cc.Node) pauseButton: cc.Node = null;
@property(cc.Node) playButton: cc.Node = null;
private _isReadyToPlay: boolean;
showUI() {
......@@ -300,106 +305,80 @@ export default class SceneComponent extends MyCocosSceneComponent {
pg.view.visible(pg.view.find(this, 'layout_xiaodi'), false)
}
playVideoEnd() {
showVideoPlayer() {
// this.videoPlayer.stayOnBottom = true;
}
// this._isReadyToPlay = false;
// this.videoPlayer.node.x = -5000;
// this.videoPlayer.node.y = -5000;
showVideoPlayer() {
this.videoPlayer.stayOnBottom = true;
this._isReadyToPlay = false;
this.videoPlayer.node.x = 0;
this.videoPlayer.node.y = 0;
this.videoPlayer.remoteURL = this.data.video;
// this.play();
this.hideUI();
pg.view.touchOn(this.playButton, this.play, this);
pg.view.touchOn(this.pauseButton, this.pause, this);
setTimeout(() => {
this.videoPlayer.node.x = 0;
this.videoPlayer.node.y = 0;
this.videoPlayer.stayOnBottom = true;
}, 2000);
// this.time1 = setTimeout(() => {
// this.videoPlayer.stayOnBottom = false;
// cc.find(`Canvas/Controls`).active = false;
// }, 500);
}
// private _isPlayComplated
initVideoPlayer() {
this.videoPlayer.node.on('ready-to-play', () => {
console.log('ready-to-play');
// this.playButton.active = true;
// this.durationLabel.string = this.formatTime(this.videoPlayer.getDuration());
this._isReadyToPlay = true;
this._isPlayComplated = false;
this.videoPlayer.currentTime = 0;
// this.videoPlayer.resume();
this.play();
});
this.videoPlayer.node.on('meta-loaded', () => {
console.log('meta-loaded');
});
this.videoPlayer.node.on('clicked', () => {
// console.log('clicked');
// if (this.isVideoFull) {
// this.videoPlayer.stayOnBottom = true;
// cc.find(`Canvas/Controls`).active = true;
// if (this.time1) {
// clearTimeout(this.time1);
// }
// this.time1 = setTimeout(() => {
// this.videoPlayer.stayOnBottom = false;
// cc.find(`Canvas/Controls`).active = false;
// }, 6000);
// }
this.videoPlayer.stayOnBottom = true;
this.videoControls.active = true;
if (this.time1) {
clearTimeout(this.time1);
}
this.time1 = setTimeout(() => {
this.videoPlayer.stayOnBottom = false;
this.videoControls.active = false;
}, 6000);
});
this.videoPlayer.node.on('touchstart', () => {
// console.log('touchstarted');
// if (this.isVideoFull) {
// this.videoPlayer.stayOnBottom = true;
// cc.find(`Canvas/Controls`).active = true;
// if (this.time1) {
// clearTimeout(this.time1);
// }
// this.time1 = setTimeout(() => {
// this.videoPlayer.stayOnBottom = false;
// cc.find(`Canvas/Controls`).active = false;
// }, 6000);
// }
this.videoPlayer.stayOnBottom = true;
this.videoControls.active = true;
if (this.time1) {
clearTimeout(this.time1);
}
this.time1 = setTimeout(() => {
this.videoPlayer.stayOnBottom = false;
this.videoControls.active = false;
}, 6000);
});
this.videoPlayer.node.on('playing', () => {
// console.log('playing');
// this.durationLabel.string = this.formatTime(this.videoPlayer.getDuration());
// this.playButton.node.active = false;
// this.restartButton.node.active = false;
// this.pauseButton.node.active = true;
this.playButton.active = false;
this.pauseButton.active = true;
});
this.videoPlayer.node.on('paused', () => {
console.log('paused');
// this.playButton.node.active = true;
// this.pauseButton.node.active = false;
this.playButton.active = true;
this.pauseButton.active = false;
});
this.videoPlayer.node.on('stopped', () => {
console.log('stopped');
// this.playButton.node.active = true;
// this.pauseButton.node.active = false;
this.playButton.active = true;
this.pauseButton.active = false;
});
this.videoPlayer.node.on('completed', async () => {
// console.log('completed');
// // this.videoPlayer.currentTime = 0;
// this._isPlayComplated = true;
// this.playButton.node.active = false;
// this.pauseButton.node.active = false;
// this.restartButton.node.active = false;
// // 循环播放下一个
// const nextItem = this.videoItemList[this.videoPlayIndex + 1];
// if (nextItem) {
// nextItem.emit('my_item_click');
// } else {
// this.videoItemList[0].emit('my_item_click');
// }
console.log('completed');
this._isPlayComplated = true;
this.playButton.active = false;
this.pauseButton.active = false;
// 循环播放下一个
this.playVideoEnd();
});
cc.view.setResizeCallback((params) => {
console.log('Resize', params);
......@@ -409,8 +388,6 @@ export default class SceneComponent extends MyCocosSceneComponent {
this.initdDrag();
}
initdDrag() {
const maxX = this.ProgressBar.width;
const minX = 0;
......@@ -454,7 +431,6 @@ export default class SceneComponent extends MyCocosSceneComponent {
this.updateBarByPos(this.barTag.x);
});
}
updateBarByPos(newX) {
const maxX = this.ProgressBar.width;
const minX = 0;
......@@ -508,17 +484,6 @@ export default class SceneComponent extends MyCocosSceneComponent {
if (!this._isReadyToPlay) {
return;
}
// const { width, height } = cc.find(`Canvas/bg`);
// cc.find(`Canvas/text_tips`).active = false;
// cc.find(`Canvas/bg`).active = false;
// cc.find(`Canvas/bgwhite`).active = false;
// cc.find(`Canvas/bg_video_shadow`).active = false;
// const videoContainer = cc.find('Canvas/video_node');
// cc.find('bg', videoContainer).width = width;
// cc.find('bg', videoContainer).height = height;
// this.videoPlayer.node.x = videoContainer.x;
// this.videoPlayer.node.y = videoContainer.y;
this.videoPlayer.play();
}
pause() {
......@@ -538,81 +503,12 @@ export default class SceneComponent extends MyCocosSceneComponent {
private isVideoFull: boolean;//false,
private tempPos: any;
fullScreen() {
// if (this.isVideoFull) {
// return;
// }
// if (!this._isReadyToPlay) {
// return;
// }
// this.tempPos = {};
// console.log("====进入全屏===");
// this.isVideoFull = true;
// this.videoPlayer.stayOnBottom = true;
// cc.find(`Canvas/Controls/fullscreen`).active = !this.isVideoFull;
// cc.find(`Canvas/Controls/exitfull`).active = this.isVideoFull;
// const videoContainer = cc.find('Canvas/video_node');
// this.tempPos.videoPos = { x: videoContainer.x, y: videoContainer.y, width: videoContainer.width, height: videoContainer.height };
// videoContainer.width = this.node.width;
// videoContainer.height = this.node.height;
// videoContainer.x = 0;
// videoContainer.y = 0;
// cc.find(`Canvas/videolist`).active = false;
// const controls = cc.find(`Canvas/Controls`);
// this.tempPos.controlPos = { x: controls.x, y: controls.y };
// cc.find(`bg_video_bottom`, controls).active = false;
// controls.x = 0;
// controls.y = 0 - this.node.height / 2 + 130;
// this.videoPlayer.node.height = this.node.height;
// this.videoPlayer.node.width = this.node.width;
// this.videoPlayer.node.x = 0;
// this.videoPlayer.node.y = 0;
// setTimeout(() => {
// // IOS下视频的全屏适配比例有问题,所以做一个计算
// this.videoPlayer.node.width = Math.min(this.node.width, this.node.height * 16 / 9);
// }, 100);
// this.time1 = setTimeout(() => {
// this.videoPlayer.stayOnBottom = false;
// cc.find(`Canvas/Controls`).active = false;
// }, 3000);
}
exitFullScreen() {
if (!this.isVideoFull) {
return;
}
console.log("====退出全屏===", this.tempPos);
this.isVideoFull = false;
cc.find(`Canvas/Controls/fullscreen`).active = !this.isVideoFull;
cc.find(`Canvas/Controls/exitfull`).active = this.isVideoFull;
const videoContainer = cc.find('Canvas/video_node');
videoContainer.width = this.tempPos.videoPos.width;
videoContainer.height = this.tempPos.videoPos.height;
videoContainer.x = this.tempPos.videoPos.x;
videoContainer.y = this.tempPos.videoPos.y;
this.videoPlayer.node.width = this.tempPos.videoPos.width;
this.videoPlayer.node.height = this.tempPos.videoPos.height;
this.videoPlayer.node.x = videoContainer.x;
this.videoPlayer.node.y = videoContainer.y;
cc.find(`Canvas/videolist`).active = true;
const controls = cc.find(`Canvas/Controls`);
cc.find(`bg_video_bottom`, controls).active = true;
controls.x = this.tempPos.controlPos.x;
controls.y = this.tempPos.controlPos.y;
if (this.time1) {
clearTimeout(this.time1);
}
}
updateVideo() {
if (!this._isReadyToPlay) {
return;
......@@ -622,26 +518,21 @@ export default class SceneComponent extends MyCocosSceneComponent {
if (ct) {
this.updateBarByTime(ct);
}
// if (this.videoPlayer.isPlaying()) {
// if (this.playButton.node.active) {
// this.playButton.node.active = false;
// this.restartButton.node.active = false;
// }
// if (!this.pauseButton.node.active) {
// this.pauseButton.node.active = true;
// }
// } else {
// if (!this.playButton.node.active) {
// this.playButton.node.active = true;
// }
// if (this.pauseButton.node.active) {
// this.pauseButton.node.active = false;
// }
// if (this.restartButton.node.active) {
// this.playButton.node.active = false;
// }
// }
if (this.videoPlayer.isPlaying()) {
if (this.playButton.active) {
this.playButton.active = false;
}
if (!this.pauseButton.active) {
this.pauseButton.active = true;
}
} else {
if (!this.playButton.active) {
this.playButton.active = true;
}
if (this.pauseButton.active) {
this.pauseButton.active = false;
}
}
}
}
//----------------------------------------VideoEND-------------------------
......@@ -670,7 +561,7 @@ export default class SceneComponent extends MyCocosSceneComponent {
private waitTime: number;
update(dt) {
this.showTimeUpdate();
this.updateVideo();
if (!this.waitTime) this.waitTime = 8;
this.waitTime -= dt;
if (this.waitTime < 0) {
......
{
"ver": "2.3.5",
"uuid": "549582e9-ad11-4f6f-9998-abbddaf788a6",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 56,
"height": 56,
"platformSettings": {},
"subMetas": {
"btn_slider": {
"ver": "1.0.4",
"uuid": "57aefa76-3665-4e87-aa3f-7d249116fc82",
"rawTextureUuid": "549582e9-ad11-4f6f-9998-abbddaf788a6",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 56,
"height": 56,
"rawWidth": 56,
"rawHeight": 56,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "4ddba3ec-91b6-4a3e-bcd7-cd584ccaf6e5",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1388,
"height": 12,
"platformSettings": {},
"subMetas": {
"img_blue": {
"ver": "1.0.4",
"uuid": "396d0691-0897-468c-b8fb-ca6b6b803145",
"rawTextureUuid": "4ddba3ec-91b6-4a3e-bcd7-cd584ccaf6e5",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1388,
"height": 12,
"rawWidth": 1388,
"rawHeight": 12,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
{
"ver": "2.3.5",
"uuid": "397f1780-47e7-4b64-80bf-30878e4707b2",
"type": "sprite",
"wrapMode": "clamp",
"filterMode": "bilinear",
"premultiplyAlpha": false,
"genMipmaps": false,
"packable": true,
"width": 1388,
"height": 12,
"platformSettings": {},
"subMetas": {
"img_white": {
"ver": "1.0.4",
"uuid": "ae4e34c4-b108-495d-bd27-ece2b49db518",
"rawTextureUuid": "397f1780-47e7-4b64-80bf-30878e4707b2",
"trimType": "auto",
"trimThreshold": 1,
"rotated": false,
"offsetX": 0,
"offsetY": 0,
"trimX": 0,
"trimY": 0,
"width": 1388,
"height": 12,
"rawWidth": 1388,
"rawHeight": 12,
"borderTop": 0,
"borderBottom": 0,
"borderLeft": 0,
"borderRight": 0,
"subMetas": {}
}
}
}
\ No newline at end of file
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