Flutter 透明视频播放插件——基于字节跳动AlphaPlayer

已于 2023-04-27 17:19:25 修改
阅读量2k 收藏 2
点赞数 2
文章标签： 字节跳动AlphaPlayer Flutter透明视频播放 Flutter礼物动效 Flutter礼物动画 AlphaPlayer
于 2023-04-27 16:38:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pengbo6665631/article/details/130409316
版权

字节跳动：AlphaPlayer

GitHub - bytedance/AlphaPlayer: AlphaPlayer is a video animation engine.

关于透明视频

透明视频的播放，对于webm格式的视频，在h5上面是很容易播放的

但是对于android或者flutter来说，尤其flutter的官方video_player是不支持带有透明通道的视频播放的

但是对于字节跳动这个方案，综合起来还是比较合适的

比如我们想播一个炫酷的礼物特效，要求有透明效果，这种用AlphaPlayer实现最好不过了

可以这个插件目前没有flutter版本的，那么就来手撸一个

实现效果

特点

  • 支持android和ios双端
  • 支持播放手机本地mp4文件
  • 简单易用，直接传入path地址

快速接入

alpha_player_plugin: ^0.0.1

 用法

AlphaPlayerSimpleView(
  path: videoPath,
  width: xxx,
  height: xxx,
)

项目地址

pub: alpha_player_plugin | Flutter Package

github: GitHub - pengboboer/alpha_player_plugin: flutter版本 字节跳动官方原生组件AlphaPlayer

其他

如果对你有帮助，动动小手给一个star，谢谢。

pengboboer
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
alpha组件 color_Unity 播放 带 alpha 通道的视频（Video Player组件）
weixin_31952675的博客
01-26 183
webm类型文件格式转换插件：https://www.fnordware.com/WebM/或者用shader实现```Shader "SYN/BlackScreenClipTex" {Properties{_Color("Alpha Color Key", Color) = (0,0,0,1)_MainTex("Albedo (RGB)", 2D) = "white" {}_Range("Ran...
又是一年金九银十！java编程思想哪个版本好
m0_57541165的博客
07-13 102
Spring面试高频问题 SpringMVC面试高频问题 MyBatis面试高频问题 SpringBoot面试高频题 SpringCloud面试高频问题 Redis高级面试题 Dubbo高频常问面试问题 Java虚拟机（JVM） MySQL数据库高频面试问题 Java高频面试专题合集解析： 当然在这还有更多整理总结的Java进阶学习笔记和面试题未展示，在这也是免费分享给那些有需要的朋友，其中囊括了Dubbo、Redis、Netty、zookeeper、Spring cloud、分布式、高
字节跳动又一Android开源力作发布！全新视频动画特效SDK：高效、稳定可靠、维护成本低
最新发布
2301_79098886的博客
04-12 388
感觉现在好多人都在说什么安卓快凉了，工作越来越难找了。又是说什么程序员中年危机啥的，为啥我这年近30的老农根本没有这种感觉，反倒觉得那些贩卖焦虑的都是瞎j8扯谈。当然，职业危机意识确实是要有的，但根本没到那种草木皆兵的地步好吗？Android凉了都是弱者的借口和说辞。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。
AlphaPlayer是一个视频动画引擎。-Android开发
05-26
AlphaPlayer是直播中台使用的一个视频动画特效SDK，可以通过制作Alpha通道分离的视频素材，再在客户端上通过OpenGL ES重新实现Alpha通道和RGB通道的混合，从而实现在端上播放带透明通道的视频。 AlphaPlayer Powered by ByteDance Live Android team. AlphaPlayer是直播中台使用的一个视频动画特效SDK，可以通过制作Alpha通道分离的视频素材，再在客户端上通过OpenGL ES重新实现Alpha通道和RGB通道的混合，从而实现在端上播放带透明通道的视频。 这套方案对设计师而言明显降低了特效的制作成本，对于客户端而言有着更可靠的性能和稳定性，且相比cocos2d引擎有着更低的入门门槛和维护成本，为复杂动画的实现提供了一种全新的方式，新的复杂动画开发将会变得更加简单高效。 背景 在直播项目的原有礼物动画实现效果是通过cocos引擎实现的，大部分动画都是通过一系列的旋转平移缩放组合而成，能实现的动画效果较简单且开发成本较高。为了丰富动画的表现形式，降低开发成本，我们引入了AlphaPlayer的动画实现
alphaVideoPlayTool:透明视频播放工具类
03-06
alphaVideoPlayTool 透明视频播放工具类 基于苹果金属框架给带alpha通道的视频添加滤镜效果实现合成透明视频效果 cocopods导入pod'alphaVideoPlayTool' 使用方法导入#import <SLMaskVideoPlayerLayer> _playerLayer = [SLMaskVideoPlayerLayer层]; _playerLayer.videoURL = [NSURL fileURLWithPath：[[NSBundle mainBundle] pathForResource：@“手表” ofType：@“ mp4”]]; _playerLayer.playDelegate =自我; [self.view.layer addSublayer：_playerLayer]; _playerLayer.frame = self.v
AlphaPlayer:AlphaPlayer是视频动画引擎
03-13
AlphaPlayer 由ByteDance Live Android团队提供支持。 AlphaPlayer是直播中台使用的一个视频动画特效SDK，可以通过制作Alpha通道分离的视频素材，再在客户端上通过OpenGL ES重新实现Alpha通道和RGB通道的混合，从而实现在端上播放带透明通道的视频。 这套方案对设计师而言明显降低了特效的制作成本，对于客户端而言具有更可靠的性能和稳定性，并且据称与cocos2d引擎并存的入门门智能和维护成本，为复杂动画的实现提供了一种全新的方式，新的复杂动画开发将会变得更加简单高效。 背景 在直播项目的初始化礼物动画实现效果是通过cocos引擎实现的，大部分动画都是通过一系列的旋转平移缩放组合并，能够实现的动画效果更简单并且开发成本较高。为了丰富动画的表现形式，降低开发成本，我们约会了AlphaPlayer的动画实现方案。 方案对比 目前较常见的动画实
Android播放透明视频
ywl5320的专栏
09-26 5321
透明视频随着业务场景的增多，更多的特效用原生绘制、GIF的方式都不能很好的满足需求了，这就带来了一个新的方式：用视频特效来代替。特别是在视频（直播）行业中，各种特效炫酷又精美，能很好的表达用户的想法。但是这也带来了一个问题：虽然播放视频非常简单，但是同时要把视频下面的UI也展示出来就没那么简单了，这就需要视频有透明效果，这样才能不遮挡底层UI。既然写了这篇博客，自然有很简单的方式来实现这种透明视频的播放了，那就是用第三方库《wlmedia》，几句代码就能实现透明视频的播放。一、先来大致说一下透明视频播放原理
安卓播放透明视频、Alpha视频
晓游的专栏
09-21 1975
适用于安卓开发 的直播间全屏礼物、弹屏广告等场景。 源视频 左侧一半为 彩色信息，右侧一增为黑白视频 用于 替换左侧的透明试，白表示 alpha=1，黑表示 alpha=0. 另外，代码里 支持左右的切换，也就是说 你可以让 彩色部分位于右边，黑白部分位于左边。 项目的所有源码在这里 https://github.com/meikaiss/giftvideoplayer 源视频文件播放时的效果图如下： 处理后的播放效果如下，播放效果 是具有 透明度的 ...
Unity 播放带alpha通道的视频（Video Player组件）
abcd5711664321的博客
12-16 957
通常是 .webm类型文件！！！！！ 使用工具：ffmpeg.exe将序列帧图片转换生成 .webm视频文件！！！！ 安装 ffmpeg.exe 下载链接: https://pan.baidu.com/s/1UUBEPYV7ql7WXJrj5tA35Q 提取码: 6cn4 操作流程 然后执行 转换的命令： ffmpeg.exe -i png/B_%5d.png -auto-alt-ref 0 -c:v libvpx export.webm ...
android /IOS openGl 高通/vaforia AR 播放透明视频,解决方案。
qq_30286149的博客
12-11 1884
不是那种替换单个颜色来实现，识别透明通道视频在绘制。先发实现图
alpha-video-html5:JavaScript实现alpha透明通道视频
04-30
alpha-video-html5 使用序列帧和canvas两种方法分别实现html5下的alpha通道视频
android透明视频教程,安卓透明教程（Android transparent tutorial）.doc
weixin_31704137的博客
05-28 140
安卓透明教程(Android transparent tutorial)安卓透明教程(Android transparent tutorial)First, this is the BRO team's approach,First, decompile framework_res.apkTwo, find res/value/styles.xmlsearch@color/background_d...
android播放vp8透明,Androids 使用MediaCodec在TV端播放不了视频
weixin_39759182的博客
05-30 841
请问是因为设备不支持mdiacodec吗，按理说应该都支持的呀。02-23 13:59:03.859 17173-17173/tv.danmaku.ijk.media.sample W/dalvikvm: VFY: unable to find class referenced in signature (Landroid/view/SearchEvent;)02-23 13:59:03.859 ...
android vlc视频背景透明,基于VLC框架的Android视频播放器Demo
weixin_39932611的博客
05-28 590
前言在 从零开始，手把手教你如何在Ubuntu下编译VLC-Android源码 文章中为大家讲解了如何在Ubuntu环境下编译VLC-Android源码，这篇文章就为大家讲解如何使用编译好的 libvlc-3.0.0.aar 包来编写一个视频播放器项目源代码本博客同步发布于XueLong的博客代码实现build.gradle 中配置使用 libvlc-3.0.0.aar 包//---1、---re...
Flutter 强大的MediaQuery控件
老孟Flutter
03-30 5040
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 MediaQuery 通常情况下，不会直接将MediaQuery当作一个控件，而是使用MediaQuery.of获取当前设备的信息，用法如下： var data = MediaQuery.of(context); 此方式必须放在MediaQuer...
字节跳动又一开源力作发布
qq_43338943的博客
07-21 1105
字节跳动开源了一个视频动画特效SDK（AlphaPlayer），可以通过制作Alpha通道分离的视频素材，再在客户端上通过OpenGL ES重新实现Alpha通道和RGB通道的混合，从而实现在端上播放带透明通道的视频。 AlphaPlayer已经在Github上标星650，累计分支277个 抖音、抖音火山版、西瓜小视频、今日头条已经接入。 这套方案对设计师而言明显降低了特效的制作成本，对于客户端而言有着更可靠的性能和稳定性，且相比cocos2d引擎有着更低的入门门槛和维护成本，为.
H5实现透明通道视频
keji_123的博客
08-23 8289
H5实现透明通道视频目前在做一个项目，项目要求是ui和视频相结合，做出动态效果。视频要在ui界面之上，但是又必须可以看见下面的ui界面，所有必须要求视频是透明的。 接着我查了一些资料，但是对h5如果运用透明通道的视频的资料介绍很少。一般透明视频是.mov格式的，但是h5并不支持此格式。所以下面我介绍2种方法。第一种方法，png序列帧动画由ui设计师做好，导出透明的png序列帧图片，我们只需要加个定
c#中怎么让正在播放的视频背景是透明的？
huang9012的专栏
07-25 5199
在C#编程的时候,由于一个功能需要播放一小段的AVI格式的短片，结果找了半天也没有搞定如何来进行播放。于是本人在网上查呀查呀!找了半天终于找到了一个方法播放文件。 　　他的方式是首先用下面的命令为媒体播放器控件：msdxm.ocx 生成 MediaPlayer.dll 和 AxMediaPlayer.dll。命令为:aximp c:\winnt\system32\msdxm.ocx 而通常msd
【html5插入透明Webm视频】
weixin_44029053的博客
08-14 4976
首先，你得有个透明Webm，哪里找？tb搜索：透明粒子素材，格式一般为mov格式，带alpha通道 然后用cmd命令，结合ffmpeg转换为vp8或vp9编码得webm视频： H:\iApp\小丸工具箱月儿\xiaowan_lune\tools\ffmpeg.exe -i “I:\ZUOYE_2021\Cinematic DustFX 001.mov” -c:v libvpx -pix_fmt yuva420p “I:\ZUOYE_2021\Cinematic DustFX 001.mov.webm” 这个
flutter 如何使用 chewie 插件播放flv格式的视频
03-22
Chewie插件是一个Flutter视频播放器，它支持多种视频格式，包括FLV格式。要使用Chewie插件播放FLV格式的视频，您需要在Flutter项目中添加chewie和video_player插件，并使用以下代码： ``` import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; import 'package:chewie/chewie.dart'; class VideoPlayerScreen extends StatefulWidget { final String videoUrl; VideoPlayerScreen({this.videoUrl}); @override _VideoPlayerScreenState createState() => _VideoPlayerScreenState(); } class _VideoPlayerScreenState extends State<VideoPlayerScreen> { VideoPlayerController _videoPlayerController; ChewieController _chewieController; @override void initState() { super.initState(); _videoPlayerController = VideoPlayerController.network(widget.videoUrl); _chewieController = ChewieController( videoPlayerController: _videoPlayerController, aspectRatio: 16 / 9, autoPlay: true, looping: true, ); } @override void dispose() { _videoPlayerController.dispose(); _chewieController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Chewie( controller: _chewieController, ), ), ); } } ``` 在上面的代码中，VideoPlayerScreen是一个StatefulWidget，它接受一个videoUrl参数，该参数是要播放的FLV格式视频的URL。在initState方法中，我们创建一个VideoPlayerController和一个ChewieController，然后在build方法中使用Chewie小部件来显示视频播放器。最后，在dispose方法中，我们释放视频播放器和Chewie控制器的资源。 希望这可以帮助您使用Chewie插件播放FLV格式的视频。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值