Commit 4e0035fe authored by Tt's avatar Tt

视频播放基础完成

parent 0d73475e
...@@ -3351,8 +3351,8 @@ ...@@ -3351,8 +3351,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 972, "width": 1388,
"height": 39 "height": 12
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -3417,8 +3417,8 @@ ...@@ -3417,8 +3417,8 @@
}, },
"_contentSize": { "_contentSize": {
"__type__": "cc.Size", "__type__": "cc.Size",
"width": 972, "width": 1388,
"height": 39 "height": 12
}, },
"_anchorPoint": { "_anchorPoint": {
"__type__": "cc.Vec2", "__type__": "cc.Vec2",
...@@ -3532,7 +3532,7 @@ ...@@ -3532,7 +3532,7 @@
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
"_dstBlendFactor": 771, "_dstBlendFactor": 771,
"_spriteFrame": { "_spriteFrame": {
"__uuid__": "b42b439b-c03b-4687-98c4-39a3b8fe830f" "__uuid__": "57aefa76-3665-4e87-aa3f-7d249116fc82"
}, },
"_type": 0, "_type": 0,
"_sizeMode": 1, "_sizeMode": 1,
...@@ -3564,7 +3564,7 @@ ...@@ -3564,7 +3564,7 @@
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
"_dstBlendFactor": 771, "_dstBlendFactor": 771,
"_spriteFrame": { "_spriteFrame": {
"__uuid__": "b035c74f-9f28-4698-8325-8fe9ec6e3db0" "__uuid__": "396d0691-0897-468c-b8fb-ca6b6b803145"
}, },
"_type": 3, "_type": 3,
"_sizeMode": 0, "_sizeMode": 0,
...@@ -4055,7 +4055,7 @@ ...@@ -4055,7 +4055,7 @@
"_srcBlendFactor": 770, "_srcBlendFactor": 770,
"_dstBlendFactor": 771, "_dstBlendFactor": 771,
"_spriteFrame": { "_spriteFrame": {
"__uuid__": "4a11e302-ced0-4bf8-bdc3-baf51bf64c3a" "__uuid__": "ae4e34c4-b108-495d-bd27-ece2b49db518"
}, },
"_type": 1, "_type": 1,
"_sizeMode": 1, "_sizeMode": 1,
...@@ -5111,6 +5111,15 @@ ...@@ -5111,6 +5111,15 @@
"currentTimeLabel": { "currentTimeLabel": {
"__id__": 79 "__id__": 79
}, },
"videoControls": {
"__id__": 68
},
"pauseButton": {
"__id__": 76
},
"playButton": {
"__id__": 74
},
"_id": "6eW7M4ET1L4KOTzIOVRmf8" "_id": "6eW7M4ET1L4KOTzIOVRmf8"
} }
] ]
\ No newline at end of file
...@@ -281,6 +281,11 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -281,6 +281,11 @@ export default class SceneComponent extends MyCocosSceneComponent {
@property(cc.Node) ProgressBar: cc.Node = null; @property(cc.Node) ProgressBar: cc.Node = null;
@property(cc.VideoPlayer) videoPlayer: cc.VideoPlayer = null; @property(cc.VideoPlayer) videoPlayer: cc.VideoPlayer = null;
@property(cc.Label) currentTimeLabel: cc.Label = 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; private _isReadyToPlay: boolean;
showUI() { showUI() {
...@@ -300,106 +305,80 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -300,106 +305,80 @@ export default class SceneComponent extends MyCocosSceneComponent {
pg.view.visible(pg.view.find(this, 'layout_xiaodi'), false) pg.view.visible(pg.view.find(this, 'layout_xiaodi'), false)
} }
playVideoEnd() {
showVideoPlayer() { }
// this.videoPlayer.stayOnBottom = true;
// this._isReadyToPlay = false; showVideoPlayer() {
// this.videoPlayer.node.x = -5000; this.videoPlayer.stayOnBottom = true;
// this.videoPlayer.node.y = -5000; this._isReadyToPlay = false;
this.videoPlayer.node.x = 0;
this.videoPlayer.node.y = 0;
this.videoPlayer.remoteURL = this.data.video; this.videoPlayer.remoteURL = this.data.video;
// this.play();
this.hideUI(); this.hideUI();
pg.view.touchOn(this.playButton, this.play, this);
pg.view.touchOn(this.pauseButton, this.pause, this);
setTimeout(() => { setTimeout(() => {
this.videoPlayer.node.x = 0;
this.videoPlayer.node.y = 0;
this.videoPlayer.stayOnBottom = true; this.videoPlayer.stayOnBottom = true;
}, 2000); }, 2000);
// this.time1 = setTimeout(() => {
// this.videoPlayer.stayOnBottom = false;
// cc.find(`Canvas/Controls`).active = false;
// }, 500);
} }
// private _isPlayComplated
initVideoPlayer() { initVideoPlayer() {
this.videoPlayer.node.on('ready-to-play', () => { this.videoPlayer.node.on('ready-to-play', () => {
console.log('ready-to-play'); console.log('ready-to-play');
// this.playButton.active = true;
// this.durationLabel.string = this.formatTime(this.videoPlayer.getDuration());
this._isReadyToPlay = true; this._isReadyToPlay = true;
this._isPlayComplated = false; this._isPlayComplated = false;
this.videoPlayer.currentTime = 0; this.videoPlayer.currentTime = 0;
// this.videoPlayer.resume();
this.play(); this.play();
}); });
this.videoPlayer.node.on('meta-loaded', () => { this.videoPlayer.node.on('meta-loaded', () => {
console.log('meta-loaded'); console.log('meta-loaded');
}); });
this.videoPlayer.node.on('clicked', () => { this.videoPlayer.node.on('clicked', () => {
// console.log('clicked'); this.videoPlayer.stayOnBottom = true;
// if (this.isVideoFull) { this.videoControls.active = true;
// this.videoPlayer.stayOnBottom = true; if (this.time1) {
// cc.find(`Canvas/Controls`).active = true; clearTimeout(this.time1);
// if (this.time1) { }
// clearTimeout(this.time1); this.time1 = setTimeout(() => {
// } this.videoPlayer.stayOnBottom = false;
// this.time1 = setTimeout(() => { this.videoControls.active = false;
// this.videoPlayer.stayOnBottom = false; }, 6000);
// cc.find(`Canvas/Controls`).active = false;
// }, 6000);
// }
}); });
this.videoPlayer.node.on('touchstart', () => { this.videoPlayer.node.on('touchstart', () => {
// console.log('touchstarted'); this.videoPlayer.stayOnBottom = true;
// if (this.isVideoFull) { this.videoControls.active = true;
// this.videoPlayer.stayOnBottom = true; if (this.time1) {
// cc.find(`Canvas/Controls`).active = true; clearTimeout(this.time1);
// if (this.time1) { }
// clearTimeout(this.time1); this.time1 = setTimeout(() => {
// } this.videoPlayer.stayOnBottom = false;
// this.time1 = setTimeout(() => { this.videoControls.active = false;
// this.videoPlayer.stayOnBottom = false; }, 6000);
// cc.find(`Canvas/Controls`).active = false;
// }, 6000);
// }
}); });
this.videoPlayer.node.on('playing', () => { this.videoPlayer.node.on('playing', () => {
// console.log('playing'); this.playButton.active = false;
// this.durationLabel.string = this.formatTime(this.videoPlayer.getDuration()); this.pauseButton.active = true;
// this.playButton.node.active = false;
// this.restartButton.node.active = false;
// this.pauseButton.node.active = true;
}); });
this.videoPlayer.node.on('paused', () => { this.videoPlayer.node.on('paused', () => {
console.log('paused'); console.log('paused');
// this.playButton.node.active = true; this.playButton.active = true;
// this.pauseButton.node.active = false; this.pauseButton.active = false;
}); });
this.videoPlayer.node.on('stopped', () => { this.videoPlayer.node.on('stopped', () => {
console.log('stopped'); console.log('stopped');
// this.playButton.node.active = true; this.playButton.active = true;
// this.pauseButton.node.active = false; this.pauseButton.active = false;
}); });
this.videoPlayer.node.on('completed', async () => { this.videoPlayer.node.on('completed', async () => {
// console.log('completed'); console.log('completed');
// // this.videoPlayer.currentTime = 0; this._isPlayComplated = true;
// this._isPlayComplated = true; this.playButton.active = false;
// this.playButton.node.active = false; this.pauseButton.active = false;
// this.pauseButton.node.active = false; // 循环播放下一个
// this.restartButton.node.active = false; this.playVideoEnd();
// // 循环播放下一个
// const nextItem = this.videoItemList[this.videoPlayIndex + 1];
// if (nextItem) {
// nextItem.emit('my_item_click');
// } else {
// this.videoItemList[0].emit('my_item_click');
// }
}); });
cc.view.setResizeCallback((params) => { cc.view.setResizeCallback((params) => {
console.log('Resize', params); console.log('Resize', params);
...@@ -409,8 +388,6 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -409,8 +388,6 @@ export default class SceneComponent extends MyCocosSceneComponent {
this.initdDrag(); this.initdDrag();
} }
initdDrag() { initdDrag() {
const maxX = this.ProgressBar.width; const maxX = this.ProgressBar.width;
const minX = 0; const minX = 0;
...@@ -454,7 +431,6 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -454,7 +431,6 @@ export default class SceneComponent extends MyCocosSceneComponent {
this.updateBarByPos(this.barTag.x); this.updateBarByPos(this.barTag.x);
}); });
} }
updateBarByPos(newX) { updateBarByPos(newX) {
const maxX = this.ProgressBar.width; const maxX = this.ProgressBar.width;
const minX = 0; const minX = 0;
...@@ -508,17 +484,6 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -508,17 +484,6 @@ export default class SceneComponent extends MyCocosSceneComponent {
if (!this._isReadyToPlay) { if (!this._isReadyToPlay) {
return; 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(); this.videoPlayer.play();
} }
pause() { pause() {
...@@ -538,81 +503,12 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -538,81 +503,12 @@ export default class SceneComponent extends MyCocosSceneComponent {
private isVideoFull: boolean;//false, private isVideoFull: boolean;//false,
private tempPos: any; private tempPos: any;
fullScreen() { 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(() => { // setTimeout(() => {
// // IOS下视频的全屏适配比例有问题,所以做一个计算 // // IOS下视频的全屏适配比例有问题,所以做一个计算
// this.videoPlayer.node.width = Math.min(this.node.width, this.node.height * 16 / 9); // this.videoPlayer.node.width = Math.min(this.node.width, this.node.height * 16 / 9);
// }, 100); // }, 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() { updateVideo() {
if (!this._isReadyToPlay) { if (!this._isReadyToPlay) {
return; return;
...@@ -622,26 +518,21 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -622,26 +518,21 @@ export default class SceneComponent extends MyCocosSceneComponent {
if (ct) { if (ct) {
this.updateBarByTime(ct); this.updateBarByTime(ct);
} }
// if (this.videoPlayer.isPlaying()) { if (this.videoPlayer.isPlaying()) {
// if (this.playButton.node.active) { if (this.playButton.active) {
// this.playButton.node.active = false; this.playButton.active = false;
// this.restartButton.node.active = false; }
// } if (!this.pauseButton.active) {
// if (!this.pauseButton.node.active) { this.pauseButton.active = true;
// this.pauseButton.node.active = true; }
// } } else {
if (!this.playButton.active) {
// } else { this.playButton.active = true;
// if (!this.playButton.node.active) { }
// this.playButton.node.active = true; if (this.pauseButton.active) {
// } this.pauseButton.active = false;
// if (this.pauseButton.node.active) { }
// this.pauseButton.node.active = false; }
// }
// if (this.restartButton.node.active) {
// this.playButton.node.active = false;
// }
// }
} }
} }
//----------------------------------------VideoEND------------------------- //----------------------------------------VideoEND-------------------------
...@@ -670,7 +561,7 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -670,7 +561,7 @@ export default class SceneComponent extends MyCocosSceneComponent {
private waitTime: number; private waitTime: number;
update(dt) { update(dt) {
this.showTimeUpdate(); this.showTimeUpdate();
this.updateVideo();
if (!this.waitTime) this.waitTime = 8; if (!this.waitTime) this.waitTime = 8;
this.waitTime -= dt; this.waitTime -= dt;
if (this.waitTime < 0) { 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