cocosCreator视频web模式播放踩坑解决
/**
* 对外输出接口
*/
export interface VideoPlayerManageInterface {
//初始化视频播放器
init(
list: VideoPlayerManageInitListType[],
options?: VideoPlayerManageInitOptionsType
): Promise<void>;
//播放视频
play(url: string, currentTime?: number): Promise<void>;
//销毁视频
destroyUrl(url: string, currentTag: string): void;
//销毁标签的所有视频
destroyTag(targetTag: string): void;
}
export type VideoPlayerManageInitListType = {
//标签,分组
tag: string;
//视频地址
url: string;
//视频宽度
width: number;
//视频高度
height: number;
//是否循环播放
isLoop: boolean;
//视频播放结束回调（非循环下生效）
endCallback?: () => void;
};
export type VideoPlayerManageInitOptionsType = {
//视频封面地址
poster?: string;
//播放按钮地址
playerStartButtonUrl?: string;
//是否已经点击过播放按钮
hasClicked?: boolean;
//是否是苹果设备检测函数
checkIsAppleFun?: () => boolean;
};
/**
* 鉴于cocos对于视频播放的支持不够完善，在自带的VideoPlayer组件上进行了封装
* 使用VideoPlayerManage进行视频的提前装载，播放，销毁等操作
* 解决视频切换时的黑屏问题、视频默认样式修改、ISO自动播放、播放时未就绪报错的问题
* web环境使用
*/
cc.macro.ENABLE_TRANSPARENT_CANVAS = true;
export default class VideoPlayerManage implements VideoPlayerManageInterface {
private static V: VideoPlayerManageInterface = null;
public static get instance(): VideoPlayerManageInterface {
if (!this.V) {
this.V = new VideoPlayerManage();
}
return this.V;
}
private readonly CLASS_NAME = "cocosVideo";
private poster = ""; //这里是一个视频封面的图片地址
private playerStartButtonUrl = ""; //这里是一个播放按钮的图片地址
private hasClicked = false;
constructor() {
cc.Canvas.instance.node.getComponentInChildren(
cc.Camera
).backgroundColor = new cc.Color(0, 0, 0, 0);
}
private map: Map<
string,
{
url: string;
videoPlayer: cc.VideoPlayer;
tag: string[];
}
> = new Map();
async init(
list: VideoPlayerManageInitListType[],
options?: VideoPlayerManageInitOptionsType
): Promise<void> {
Object.keys(options).forEach((key) => {
this[key] = options[key];
});
await Promise.all(
list.map((listItem) => this.initVideoPlayerCore(listItem))
);
await this.initVideos();
}
async play(url: string, currentTime = 0) {
const videoPlayer = this.map.get(url).videoPlayer;
this.map.forEach((value) => {
value.videoPlayer.node.active = url === value.url;
});
videoPlayer.currentTime = currentTime;
if (videoPlayer.isPlaying()) {
videoPlayer.pause();
}
videoPlayer.node.off("ready-to-play");
videoPlayer.node.on(
"ready-to-play",
() => {
if (!videoPlayer.isPlaying()) {
videoPlayer.play();
}
},
this
);
await this.waitPlayerClick();
if (!videoPlayer.isPlaying()) {
videoPlayer.play();
} else {
videoPlayer.resume();
}
}
destroyUrl(url: string, currentTag: string) {
const item = this.map.get(url);
if (!item) return;
if (item.tag.length > 1) {
item.tag = item.tag.filter((tagItem) => {
return tagItem !== currentTag;
});
return;
}
this.delOneVideo(item);
}
destroyTag(targetTag: string) {
this.map.forEach((item) => {
if (item.tag.includes(targetTag)) {
item.tag = item.tag.filter((tagItem) => {
return tagItem !== targetTag;
});
if (item.tag.length === 0) {
this.delOneVideo(item);
}
}
});
}
private delOneVideo(item) {
item.videoPlayer.node.destroy();
const videoDom = this.getVideoDom(item.url);
if (videoDom) {
videoDom.parentNode.removeChild(videoDom);
}
this.map.delete(item.url);
}
private async initVideos() {
await this.delayOneFrame();
const list = document.getElementsByClassName(this.CLASS_NAME);
for (let i = 0; i < list.length; i++) {
const video: Element = list[i];
video["poster"] = this.poster;
video["autoplay"] = true;
}
}
private async initVideoPlayerCore(listItem) {
const videoMapItem = this.map.get(listItem.url);
if (videoMapItem) {
!videoMapItem.tag.includes(listItem.tag) &&
videoMapItem.tag.push(listItem.tag);
return;
}
const videoPlayer = await this.createVideoPlayerForUrl(listItem);
this.map.set(listItem.url, {
url: listItem.url,
videoPlayer,
tag: [listItem.tag],
});
}
private async createVideoPlayerForUrl(listItem): Promise<cc.VideoPlayer> {
const videoNode: cc.Node = new cc.Node();
videoNode.active = false;
const videoPlayer = videoNode.addComponent(cc.VideoPlayer);
videoPlayer.mute = true;
videoPlayer.resourceType = cc.VideoPlayer.ResourceType.LOCAL;
videoNode.width = listItem.width;
videoNode.height = listItem.height;
videoPlayer.stayOnBottom = true;
cc.Canvas.instance.node.addChild(videoNode);
const asset = await this.loadVideo(listItem.url);
videoPlayer.clip = asset as unknown as string;
this.setLoopAndEndCallBack(
videoPlayer,
listItem.isLoop,
listItem.endCallback
);
return videoPlayer;
}
private loadVideo(url: string) {
return new Promise((resolve, reject) => {
cc.assetManager.loadRemote(
url,
{ ext: ".mp4" },
(err, asset: cc.Asset) => {
if (err) {
reject(err);
} else {
resolve(asset);
}
}
);
});
}
private loadPng(url: string) {
return new Promise((resolve, reject) => {
cc.assetManager.loadRemote(
url,
{ ext: ".png" },
(err, asset: cc.Asset) => {
if (err) {
reject(err);
} else {
resolve(asset);
}
}
);
});
}
private delayOneFrame(): Promise<void> {
return new Promise((resole) => {
cc.Canvas.instance.scheduleOnce(() => {
resole();
});
});
}
private setLoopAndEndCallBack(
videoPlayer: cc.VideoPlayer,
isLoop: boolean,
endCallback: () => void
) {
videoPlayer.node.off("completed");
videoPlayer.node.on(
"completed",
() => {
if (isLoop) {
videoPlayer.currentTime = 0;
videoPlayer.play();
} else {
endCallback && endCallback();
}
},
this
);
}
private async waitPlayerClick(): Promise<void> {
return new Promise((resolve) => {
if (this.hasClicked || !this.checkIsApple()) {
resolve();
return;
}
const node = new cc.Node();
node.addComponent(cc.BlockInputEvents);
const sprite = node.addComponent(cc.Sprite);
this.loadPng(this.playerStartButtonUrl).then((asset) => {
sprite.spriteFrame = new cc.SpriteFrame(
asset as unknown as cc.Texture2D
);
node.setPosition(cc.v2(0, 0));
cc.Canvas.instance.node.addChild(node);
node.once(cc.Node.EventType.TOUCH_END, () => {
node.destroy();
this.hasClicked = true;
resolve();
});
});
});
}
private checkIsApple() {
return /iphone|ipad|ios|mac/gi.test(navigator.userAgent.toLowerCase());
}
private getVideoDom(url: string) {
const list = document.getElementsByClassName(this.CLASS_NAME);
for (let i = 0; i < list.length; i++) {
const video = list[i];
if (url == video["src"]) {
return video;
}
}
return null;
}
}
使用样例：
import VideoPlayerManage from "./VideoPlayerManage";
const { ccclass } = cc._decorator;
@ccclass
export default class Index extends cc.Component {
private list = [
"http://localhost:3000/light1.mp4",
"http://localhost:3000/light2.mp4",
];
private index = 0;
protected async onLoad(): Promise<void> {
await VideoPlayerManage.instance.init(
this.list.map((url) => {
return {
tag: url,
url,
width: this.node.width,
height: this.node.height,
isLoop: true,
endCallback: () => {
console.log("end");
},
};
}),
{
poster: "",
playerStartButtonUrl: "http://localhost:3000/head1.png",
}
);
this.playByIndex();
this.node.on(cc.Node.EventType.TOUCH_END, () => {
this.playByIndex();
});
}
playByIndex() {
this.index++;
if (this.index >= this.list.length) {
this.index = 0;
}
VideoPlayerManage.instance.play(this.list[this.index]);
}
}