企业官网建设流程全解析

手机版网站开发实例,坪山附近公司做网站建设多少钱,网站制作前景,2022网页游戏01 前言 在日常视频播放中#xff0c;我们经常会遇到这样的问题#xff1a;视频的长宽比例与设备屏幕不一致#xff0c;导致画面上下或左右出现黑边。虽然这并不影响视频的正常播放#xff0c;但从用户体验的角度来看#xff0c;这些黑边往往打断了视觉的沉浸感#xff0…01 前言在日常视频播放中我们经常会遇到这样的问题视频的长宽比例与设备屏幕不一致导致画面上下或左右出现黑边。虽然这并不影响视频的正常播放但从用户体验的角度来看这些黑边往往打断了视觉的沉浸感显得格外突兀。为了解决这一问题业界主流播放器如 YouTube、Netflix引入了一种被称为氛围模式Ambient Mode的视觉增强效果。它的核心思路是通过实时识别视频画面的主色调并动态将其填充到黑边区域使边缘色彩与视频内容保持一致提升整体视觉统一性从而营造出与视频内容相协调的氛围效果让观众的观看体验更加自然和沉浸。下面是YouTube的氛围模式效果youtube竖屏效果youtube横屏效果百度播放内核团队也将氛围模式效果应用到了视频播放场景用于提升用户观看视频沉浸感同时在百度App、好看App两款产品完成上线。本文将详细说明视频场景氛围模式技术方案。02 整体技术方案氛围模式通过在播放内核视频后处理通道FilterChain添加一个AmbientFilter滤镜实现其核心思路通过AmbientFilter滤镜先将视频帧数据从GPU下载到CPU然后将视频帧数据按块进行区域划分划分完成后再通过颜色量化算法提取每个区域主色调最后将各个区域主色调传给平台层平台层拿到主色调进行绘制视频四周氛围效果。整体方案流程大致如下图所示氛围模式整体方案2.1 视频帧采样为了提取视频的主色调需要获取视频帧数据。但提取主色调并不要求每帧都下载太频繁下载会拖垮应用性能在视觉上也不会带来特别好的体验。因此我们对视频帧进行采样下载在 25 FPS 的视频下每隔约 50 帧约 2 秒采集一次帧数据。同时为了避免将视频帧数据从 GPU 下载到 CPU 时阻塞渲染线程我们采取了以下优化1. FBO 压缩先将视频帧渲染到较低分辨率的 FBO例如将 1080p 压缩到 108p大幅减少待传输的数据量。2. PBO 异步传输利用 PBO 异步将帧数据从 GPU 下载到 CPU从而避免阻塞主渲染线程。通过这种方式我们既能保证主色调提取的效率又不会影响视频的流畅播放。渲染线程和氛围模式工作线程两个线程工作流程如下图线程核心职责2.2 主色调提取2.2.1 视频帧区域划分拿到视频帧数据后我们先将视频帧划分出几个区域。项目中我们是将视频帧画面划分为TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight 六个区域如下图所示视频区域块划分接下来我们提取出每块区域的主色调。2.2.2 提取主色调要提取画面主色调我们是通过颜色量化技术实现的。颜色量化Color Quantization 是一种图像处理技术目的是减少图像中使用的颜色数量同时尽量保持原图的视觉效果。代表性的颜色量化算法有1. 中值切割法Median Cut将颜色空间递归分割成小立方体取每个立方体的颜色中位数作为调色板颜色。2. K-means聚类将颜色按相似性分组取每组的中心作为调色板颜色。3. 八叉树算法通过构建八叉树分层合并颜色逐层减少叶子节点数量最终保留高频颜色。4. 流行色算法Popularity统计原图颜色出现的频率选取高频颜色作为调色板。这几种算法从各维度对比情况如下从算法的速度、精度以及实现复杂度等多维度考虑氛围模式场景我们选用中值切割法完成视频画面主色调的提取。2.2.3 中值切割法中值切割法Median Cut是一种用于图像颜色量化的算法算法核心思想是将颜色空间递归地分割成更小的区域以减少图像中颜色数量。该算法的目标是在颜色空间中选择一组代表性的颜色这些颜色可以用于生成调色板从而减少图像的颜色数量同时尽量保留图像的视觉效果。算法核心步骤如下1. 初始化颜色盒a. 首先将所有颜色视为一个大的颜色盒即整个颜色空间的一个区域。b. 颜色盒包含图像中所有像素的颜色。2. 选择分割轴a. 在每次迭代中选择颜色分量红、绿、蓝中范围最大的分量作为分割轴。这是为了最大限度地减少颜色空间的不均匀性。3. 按中值分割a. 沿着选定的分割轴根据颜色值的中值将颜色盒分成两个较小的盒。b. 这种方法确保每个新盒子中包含的颜色数量尽可能相等。4. 递归分割a. 对每个新的颜色盒重复步骤2和3直到达到所需的颜色盒数量通常是所需调色板的大小。5. 生成调色板a. 一旦颜色盒的数量达到预期的数量对每个盒子计算平均颜色或中值颜色将其作为代表颜色添加到调色板中。6. 颜色映射a. 使用生成的调色板重新映射原始图像中的每个像素到最接近的调色板颜色。中值切割算法核心流程如下图中值切割算法03 平台渲染氛围效果当native层提取完视频帧各区域主色调后将色值传给平台层Android/iOS。平台层收到色值后将色值渲染到视频四周以产生氛围效果。为保证各个区域色值过渡自然以及前后两帧的色值平滑过渡需要借助平台层渐变、动画、rgb插值等技术实现。 下面结合Android和iOS两个平台分别介绍具体思路。3.1 Android平台Android 使用自定义view技术完成氛围色值的渲染。我们提供一个自定义view名为AmbientView 来完成这个功能。有了AmbientView之后布局结构大致如下FrameLayout android:layout_widthmatch_parent android:layout_heightmatch_parent android:layout_gravitycenter com.baidu.cyberplayer.sdk.AmbientView android:idid/left_ambient android:layout_widthxxxdp android:layout_heightmatch_parent/ FrameLayout android:idid/video_container android:layout_widthwrap_content android:layout_heightwrap_content/ com.baidu.cyberplayer.sdk.AmbientView android:idid/right_ambient android:layout_widthxxxdp android:layout_heightmatch_parent/ /FrameLayout上面为视频横屏下布局大致情况id为video_container的FrameLayout是播放器容器在播放器容器左右各摆放一个AmbientView渲染氛围模式AmbientView的宽度会根据播放器的尺寸的变化在代码中动态调整。AmbientView核心功能1. 相邻区域的主色调使用LinearGradient拉出线形渐变。对于横屏视频我们渐变方向就是从上至下。所以更新氛围色值的代码如下private void updateGradient() { mLinearGradient new LinearGradient(0, 0, 0, getHeight(), mColors, null, Shader.TileMode.CLAMP); mPaint.setShader(mLinearGradient); invalidate(); }2. 前后两帧氛围色值的切换为了颜色切换不显得生硬我们借助Android属性动画以及RGB插值实现色值缓慢渐变效果核心代码如下private void startColorAnimator() { int[] lastColors new int[mLastColors.length]; for (int i 0; i lastColors.length; i) { lastColors[i] mLastColors[i]; } mColorAnimator ValueAnimator.ofFloat(0, 1f); mColorAnimator.setDuration(1500); mColorAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { Override public void onAnimationUpdate(NonNull ValueAnimator valueAnimator) { float progress (float) valueAnimator.getAnimatedValue(); interpolateColors(progress, lastColors); updateGradient(); } }); mColorAnimator.start(); } /** * 插值计算color */ private void interpolateColors(float progress, int[] lastColors) { if (mCurColors null || mCurColors.length 0) { return; } ArgbEvaluator evaluator new ArgbEvaluator(); for (int i 0; i mCurColors.length; i) { mColors[i] (int) evaluator.evaluate(progress, lastColors[i], mCurColors[i]); } }mColorAnimator是一个ValueAnimator对象通过ValueAnimator我们创建一个1500ms的动画在动画的更新函数里面我们调用了interpolateColors这个方法内部就是用ArgbEvaluator完成RGB颜色插值更新到mColors数组中。最后调用updateGradient方法触发AmbientView重绘。3. 渐变遮罩最后我们还要在上面添加一层黑色渐变遮罩保证氛围区域不要太突兀以免过度吸引用户眼球导致用户注意力不在视频内容本身上面。黑色遮罩实现也非常简单代码如下所示float[] mPositions {0.0f, 1.0f}; int[] mMaskColors {0x88000000, 0xff000000}; // 从左到右渐变 mMaskLinearGradient new LinearGradient(0, 0, getWidth(), 0, mMaskColors, mPositions, Shader.TileMode.CLAMP); mMaskPaint.setShader(mMaskLinearGradient); // 绘制黑色渐变蒙层 canvas.drawRect(0, 0, getWidth(), getHeight(), mMaskPaint);3.2 iOS平台iOS端同样提供了一个自定义的 AmbientView氛围视图为视频播放场景提供动态渐变背景和遮罩效果增强视觉沉浸感。1. 双图层架构设计采用主渐变层与遮罩层分离的架构方案确保色彩渲染与边缘遮罩效果互不干扰提升整体渲染效率。- (void)setupSubLayers { _gradientLayer [CAGradientLayer layer]; _gradientLayer.frame self.bounds; [self.layer addSublayer:_gradientLayer]; _maskLayer [CAGradientLayer layer]; _maskLayer.frame self.bounds; [self.layer addSublayer:_maskLayer]; }2. 流畅动画引擎基于CADisplayLink构建动画循环通过实时颜色插值计算实现细腻流畅的色彩过渡效果。- (void)startAnimation { // 核心功能代码 self.displayLink [CADisplayLink displayLinkWithTarget:self selector:selector(updateColors)]; [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes]; } - (void)updateColors { CGFloat progress MIN(1.0, (CACurrentMediaTime() - self.startTime) / self.animationDuration); NSMutableArray *interpolated [NSMutableArray array]; for (NSUInteger i 0; i self.endColors.count; i) { UIColor *from i self.startColors.count ? self.startColors[i] : [UIColor clearColor]; UIColor *to self.endColors[i]; [interpolated addObject:(__bridge id)[self interpolateFrom:from to:to progress:progress].CGColor]; } _gradientLayer.colors interpolated; } - (UIColor *)interpolateFrom:(UIColor *)from to:(UIColor *)to progress:(CGFloat)progress { CGFloat fr, fg, fb, fa, tr, tg, tb, ta; [from getRed:fr green:fg blue:fb alpha:fa]; [to getRed:tr green:tg blue:tb alpha:ta]; return [UIColor colorWithRed:fr (tr - fr) * progress green:fg (tg - fg) * progress blue:fb (tb - fb) * progress alpha:fa (ta - fa) * progress]; }3. 渐变遮罩采用多段式渐变遮罩配合加速曲线算法打造自然的边缘过渡有效增强视觉层次感。- (void)makeMaskColorsAndLocations { const NSInteger steps 6; for (NSInteger i 0; i steps; i) { CGFloat t (CGFloat)i / (steps - 1); CGFloat acceleratedT t * t; CGFloat currentAlpha a (1.0 - a) * acceleratedT; UIColor *color [UIColor colorWithRed:r green:g blue:b alpha:currentAlpha]; [_maskColors addObject:(__bridge id)color.CGColor]; [_maskColorsLocations addObject:(t)]; } _maskLayer.colors _maskColors; _maskLayer.locations _maskColorsLocations; _maskLayer.startPoint CGPointMake(0, 0); _maskLayer.endPoint CGPointMake(1, 0); }该实现确保了氛围渲染的高性能和优美视觉效果为用户提供了沉浸式的观看体验。04 效果展示氛围模式已在百度内包括百度App和好看App两款App完成上线其中百度App主要集中在搜索三方影视场景好看App所有视频横屏场景排除广告视频。同时在视频观看时长、分发、完播率等UBS指标取得了正向收益说明氛围模式给用户带来了不错的沉浸式观影体验。下面是百度App和好看App效果展示百度App氛围模式好看App氛围模式5. 总结氛围模式是一种视觉增强功能通过技术手段有效解决了视频比例不匹配导致的黑边问题显著提升了用户视觉体验主要表现在如下几个方面1. 视觉沉浸氛围模式通过在视频周围添加柔和的背景颜色使屏幕的边缘与视频内容更好地融合。这种设计使得用户在观看视频时感觉更加沉浸减少了视频与周围环境之间的视觉割裂2. 舒适观看这种模式可以减少长时间观看视频时的眼睛疲劳。通过在视频周围使用柔和的色彩过渡可以缓解亮度差异带来的视觉刺激从而提高观看舒适度。3. 提升观感氛围模式通过智能地调整背景色彩使其与视频中的主要色调相匹配提升整体观感。这使得视频内容更加突出同时为观看者提供一种更为和谐的视觉体验。通过本文介绍的技术方案开发者可以实现类似主流视频平台的高质量氛围模式效果为用户带来更加沉浸的观看体验。