Commit 1a935b61 authored by Tt's avatar Tt

视频播放基础

parent 81f5dddc
...@@ -266,6 +266,386 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -266,6 +266,386 @@ export default class SceneComponent extends MyCocosSceneComponent {
} }
} }
//-----------------------------------------Video------------------------------
@property(cc.Node) barTag: cc.Node;
@property(cc.Node) ProgressBar: cc.Node;
@property(cc.VideoPlayer) videoPlayer: cc.VideoPlayer;
@property(cc.Label) currentTimeLabel: cc.Label;
private _isReadyToPlay: boolean;
// 选择视频播放
async clickVideoItem(evt, _node) {
const item = evt ? evt.currentTarget : _node;
if (!item.video_url) {
// this.showTips("视频不存在");
return;
}
if (item.video_url == this.videoPlayer.remoteURL) {
// this.showTips("该视频正在播放");
return;
}
// this.videoPlayIndex = item.playIndex;
this._isReadyToPlay = false;
cc.find(`Canvas/loading`).active = true;
cc.find(`Canvas/bg`).active = true;
cc.find(`Canvas/bgwhite`).active = true;
cc.find(`Canvas/bg_video_shadow`).active = true;
this.videoPlayer.node.x = -5000;
this.videoPlayer.node.y = -5000;
cc.find(`Canvas/videolist/view/content`).children.forEach(row => {
cc.find(`item_active`, row).active = false;
});
cc.find(`item_active`, item).active = true;
this.videoPlayer.remoteURL = item.video_url;
// 数据采集
for (let i = 0; i < this.data.dataArr.length; i++) {
const element = this.data.dataArr[i];
if (element.video_url == item.video_url) {
const count = this.data.dataArr[i].count;
if (count) {
this.data.dataArr[i].count++;
} else {
this.data.dataArr[i].count = 1;
}
}
}
const totalCount = this.data.totalCount;
if (totalCount) {
this.data.totalCount++;
} else {
this.data.totalCount = 1;
}
}
// private _isPlayComplated
initVideoPlayer() {
this.videoPlayer.node.on('ready-to-play', () => {
// console.log('ready-to-play');
// this.playButton.active = true;
// cc.find(`Canvas/bg_video_shadow`).active = false;
// cc.find(`Canvas/loading`).active = false;
// 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.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.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.videoPlayer.node.on('paused', () => {
console.log('paused');
// this.playButton.node.active = true;
// this.pauseButton.node.active = false;
});
this.videoPlayer.node.on('stopped', () => {
console.log('stopped');
// this.playButton.node.active = true;
// this.pauseButton.node.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');
// }
});
cc.view.setResizeCallback((params) => {
console.log('Resize', params);
this.initdDrag()
});
this.initdDrag();
}
initdDrag() {
const maxX = this.ProgressBar.width;
const minX = 0;
this.barTag.off(cc.Node.EventType.TOUCH_START);
this.barTag.on(cc.Node.EventType.TOUCH_START, (e) => {
if (!this._isReadyToPlay) {
return;
}
console.log("TOUCH_START");
});
this.barTag.off(cc.Node.EventType.TOUCH_MOVE);
this.barTag.on(cc.Node.EventType.TOUCH_MOVE, (e) => {
if (!this._isReadyToPlay) {
return;
}
const worldPos = e.getLocation();
const localPos = this.barTag.parent.convertToNodeSpaceAR(worldPos);
let newX = localPos.x;
newX = Math.min(maxX, Math.max(newX, minX));
this.barTag.x = newX;
const percent = newX / maxX;
const dur = this.videoPlayer.getDuration();
this.currentTimeLabel.string = this.formatTime(percent * dur);
this.videoPlayer.currentTime = percent * dur;
});
this.barTag.off(cc.Node.EventType.TOUCH_END);
this.barTag.on(cc.Node.EventType.TOUCH_END, (e) => {
if (!this._isReadyToPlay) {
return;
}
console.log("TOUCH_ENDED");
this.updateBarByPos(this.barTag.x);
});
this.barTag.off(cc.Node.EventType.MOUSE_UP);
this.barTag.on(cc.Node.EventType.MOUSE_UP, (e) => {
if (!this._isReadyToPlay) {
return;
}
console.log("MOUSE_UP");
this.updateBarByPos(this.barTag.x);
});
}
updateBarByPos(newX) {
const maxX = this.ProgressBar.width;
const minX = 0;
let percent = newX / maxX;
if (percent > 1) {
percent = 1
}
const dur = this.videoPlayer.getDuration();
this.videoPlayer.currentTime = percent * dur
}
private _isPlayComplated: boolean
updateBarByTime(ct) {
if (this._isPlayComplated) {
return;
}
this.currentTimeLabel.string = this.formatTime(ct);
const dur = this.videoPlayer.getDuration();
let percent = ct / dur;
if (percent > 1) {
percent = 1
}
this.ProgressBar.getComponent(cc.ProgressBar).progress = percent;
const maxX = this.ProgressBar.width;
const minX = 0;
let newX = percent * maxX;
newX = Math.min(maxX, Math.max(newX, minX));
this.barTag.x = newX;
}
formatTime(time) {
if (time === undefined) {
return '';
}
let hh = "" + Math.floor(time / 60 / 60);
if (Number(hh) > 0) {
hh = `${hh.toString().padStart(2, '0')}:`;
} else {
hh = '';
}
const mm = Math.floor(time / 60).toString().padStart(2, '0');
const ss = Math.round(time % 60).toString().padStart(2, '0');
return `${hh}${mm}:${ss}`;
}
play() {
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() {
this.videoPlayer.pause();
}
forward() {
}
backward() {
}
replay() {
this._isPlayComplated = false;
this.videoPlayer.currentTime = 0;
this.videoPlayer.play();
}
private time1: any;
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;
}
if (this.videoPlayer) {
const ct = this.videoPlayer.currentTime;
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;
// }
// }
}
}
//----------------------------------------VideoEND-------------------------
showData(data) { showData(data) {
let list = data.result.sentences[0].details; let list = data.result.sentences[0].details;
// 列表处理 // 列表处理
......
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