Flutter OH 外接纹理第一帧（背景）自定义

概述在这个 Flutter 插件中flutterRenderer.setTextureBackGroundColor和flutterRenderer.setTextureBackGroundPixelMap方法用于设置视频播放器纹理的背景颜色和纹理内容。背景颜色和纹理图像可以在视频加载或播放之前设置确保用户在等待视频渲染时看到合适的背景。flutterRenderer类型flutterRenderer是TextureRegistry类型的实例它是通过FlutterState类获取的。FlutterState类包含两个重要成员binaryMessenger(BinaryMessenger): 用于与 Flutter 引擎之间进行消息传递。textureRegistry(TextureRegistry): 用于管理纹理和注册新纹理。FlutterState类exportclassFlutterState{privatebinaryMessenger:BinaryMessenger;privatetextureRegistry:TextureRegistry;constructor(binaryMessenger:BinaryMessenger,textureRegistry:TextureRegistry){this.binaryMessengerbinaryMessenger;this.textureRegistrytextureRegistry;}getBinaryMessenger():BinaryMessenger{returnthis.binaryMessenger;}getTextureRegistry():TextureRegistry{returnthis.textureRegistry;}}通过FlutterState.getTextureRegistry()方法你可以访问flutterRenderer它是TextureRegistry的一个实例并且可以使用它来管理和注册视频播放器的纹理。方法签名flutterRenderer.setTextureBackGroundColorflutterRenderer.setTextureBackGroundColor(int textureId,int color)textureId(int): 纹理的 ID用于标识要设置背景颜色的纹理。color(int): 背景颜色的值采用 32 位十六进制格式0xAABBGGRR。flutterRenderer.setTextureBackGroundPixelMapflutterRenderer.setTextureBackGroundPixelMap(int textureId,image.PixelMappixelMap)textureId(int): 纹理的 ID用于标识要设置图像纹理的纹理。pixelMap(image.PixelMap): 包含图像数据的PixelMap对象用作纹理的背景图像。主要功能设置背景颜色setTextureBackGroundColor方法用于设置纹理的背景颜色。在视频加载之前它为纹理提供一个预设颜色通常用于显示纯色背景。设置背景图像setTextureBackGroundPixelMap方法则允许你将一帧视频图像或任何图像设置为纹理的背景通常在视频文件加载时用第一帧图像填充纹理。示例代码设置背景颜色为红色flutterRenderer.setTextureBackGroundColor(textureId,0xFF0000FF);在此示例中背景颜色被设置为红色 (0xFF0000FF)这意味着FF是 Alpha 值表示完全不透明。00是蓝色分量表示没有蓝色。00是绿色分量表示没有绿色。FF是红色分量表示最大红色。设置背景图像为视频的第一帧let avImageGeneratorawaitmedia.createAVImageGenerator();let pixelMapawaitavImageGenerator.fetchFrameByTime(0,media.AVImageQueryOptions.AV_IMAGE_QUERY_NEXT_SYNC,{width:-1,height:-1});flutterRenderer.setTextureBackGroundPixelMap(textureId,pixelMap);这段代码中使用AVImageGenerator获取视频的第一帧图像。使用flutterRenderer.setTextureBackGroundPixelMap方法将这帧图像设置为纹理的背景图像。设置纹理的背景颜色和背景图像在创建视频播放器时可以同时设置纹理的背景颜色和背景图像确保视频加载之前有一个合适的显示效果。flutterRenderer.setTextureBackGroundColor(textureId,0xFF0000FF);// 红色背景flutterRenderer.setTextureBackGroundPixelMap(textureId,pixelMap);// 第一帧图像常见用例视频加载前的占位背景在视频播放器初始化时使用背景颜色或背景图像填充纹理以确保用户在视频加载期间不会看到空白界面。显示加载状态在等待视频加载和渲染时可以使用预设的背景颜色或图像表示加载状态提升用户体验。自定义视频背景可以通过背景图像或颜色定制播放器的外观增强视觉效果。代码使用示例在三方库video_player_ohos中的VideoPlayerApiImpl.ets中create方法中创建了AVImageGenerator和AVMetadataExtractor来获取视频的元数据和图像数据。如果视频资源来自资产或本地文件则第一帧会作为背景设置。if(asset!null){Log.i(TAG,asset create called, asset isasset);let avMetaExtractorawaitmedia.createAVMetadataExtractor();avMetaExtractor.fdSrcawaitthis.getContext().resourceManager.getRawFd(flutter_assets/asset);let mateDataawaitavMetaExtractor.fetchMetadata();if(mateData.hasVideoCommonConstants.YES){let avImageGeneratorawaitmedia.createAVImageGenerator();Log.i(TAG,asset video create);avImageGenerator.fdSrcawaitthis.getContext().resourceManager.getRawFd(flutter_assets/asset);let pixelMapawaitavImageGenerator.fetchFrameByTime(0,media.AVImageQueryOptions.AV_IMAGE_QUERY_NEXT_SYNC,{width:-1,height:-1});this.pixelMaps.set(JSON.stringify(arg),pixelMap);avImageGenerator.release();flutterRenderer.setTextureBackGroundPixelMap(textureId,this.pixelMaps.get(JSON.stringify(arg)));}avMetaExtractor.release();}elseif(uri!nulluri.startsWith(fd://)){Log.i(TAG,local create called, file isuri);let avMetaExtractorawaitmedia.createAVMetadataExtractor();avMetaExtractor.fdSrc{fd:Number.parseInt(uri.replace(fd://,))};let mateDataawaitavMetaExtractor.fetchMetadata();if(mateData.hasVideoCommonConstants.YES){let avImageGeneratorawaitmedia.createAVImageGenerator();Log.i(TAG,local video create);avImageGenerator.fdSrc{fd:Number.parseInt(uri.replace(fd://,))};let pixelMapawaitavImageGenerator.fetchFrameByTime(0,media.AVImageQueryOptions.AV_IMAGE_QUERY_NEXT_SYNC,{width:-1,height:-1});this.pixelMaps.set(JSON.stringify(arg),pixelMap);avImageGenerator.release();flutterRenderer.setTextureBackGroundPixelMap(textureId,this.pixelMaps.get(JSON.stringify(arg)));}avMetaExtractor.release();}flutterRenderer.setTextureBackGroundColor(textureId,0xFF0000FF);// 新增代码展示setTextureBackGroundColor用法设置红色背景在这里flutterRenderer.setTextureBackGroundPixelMap(textureId, pixelMap)会将从视频资源中提取的第一帧图像设置为纹理的背景。新增的flutterRenderer.setTextureBackGroundColor(textureId, 0xFF0000FF)会将从红色设置为纹理的背景色。注意事项纹理 ID: 确保在调用这些方法之前已经为纹理分配了有效的textureId。内存管理: 使用setTextureBackGroundPixelMap设置图像后确保适当管理内存避免内存泄漏。视频资源: 确保资源路径如资产路径或本地路径正确确保能够成功加载视频文件并提取图像。总结flutterRenderer.setTextureBackGroundColor和flutterRenderer.setTextureBackGroundPixelMap方法是 Flutter 视频播放器插件中非常实用的功能它们允许开发者在视频加载期间自定义纹理的显示效果。通过设置背景颜色或图像开发者能够提升用户体验确保在视频内容渲染之前显示合适的界面。功能需求背景和困难目前 Flutter 外接纹理默认第一帧固定为白色背景但对于视频等内容默认白色背景不符合需求。具体来说有些业务需要白色背景显示但其他业务可能需要黑色或者其它颜色的背景显示。因此固定为白色背景的实现无法满足所有业务场景尤其是视频类业务。预期为了支持更多场景应允许通过 Texture 容器的背景色控制或者提供一个设置背景色的接口。这样开发者可以根据需求动态设置纹理的背景颜色。iOS 和安卓对标方案目前iOS 和安卓默认第一帧的背景色为黑色。不过考虑到先前的更改是将第一帧的背景色从黑色改为白色提供一个用户可自定义背景颜色的能力显得更加合理。这样不仅保留了对旧版的兼容性也为业务需求提供了更多的灵活性。