当前位置: 首页 > article >正文

flutter VideoPlayer适配:保持视频的原始宽高比,缩放视频使它完全覆盖父容器

在这里插入图片描述
需求:视频充满整个长方形容器不能有黑边;视频不能拉伸变形;视频可以显示不全。

当播放器放置在列表中时,它固定了宽度及高度是一个width : height 为16:9的横向长方形。
情况1:不使用AspectRatio设置横纵比例,它会默认充满整个父容器,用户上传横屏视频比例相差不大显示较为正常,当用户上传竖屏视频时会横向拉伸显示变形。
情况2:使用AspectRatio设置横纵比例,当用户上传竖屏视频时会在中间显示,左右两边出现大片空白区域。

适配:使用FittedBox设置BoxFit.cover使子控件等比占据父容器,再使用SizedBox.expand尽量大的填充父布局,最后ClipRRect裁剪掉超出Container容器的部分。此时

视频播放器适配代码:

import 'package:atui/jade/configs/PathConfig.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class TestVideo extends StatefulWidget{
  
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TestVideo();
  }
}

class _TestVideo extends State<TestVideo>{

  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;
  double aspectRadio = 16.0 / 9.0;

  double _sizeWidth = 0.0;
  double _sizeHeight = 0.0;

  
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = VideoPlayerController.network(
      //竖屏测试视频
    //  'https://zmkx.oss-cn-hangzhou.aliyuncs.com/oss/folder/atui2024-10-281730076387146f6b3a41047074243b8624b9994eff6a1zjuqd6qtbonq.mp4',
      //横屏测试视频
      'https://media.w3.org/2010/05/sintel/trailer.mp4',
    );
    _controller.setVolume(0);
    _initializeVideoPlayerFuture = _controller.initialize().then((_) {
      if (_controller.value.size.width < _controller.value.size.height) {
        //宽度小于高度: 竖屏视频
        _sizeWidth = 9.0;
        _sizeHeight = 16.0;
      }else{
        //宽度大于高度: 横屏视频
        _sizeWidth = 16.0;
        _sizeHeight = 9.0;
      }
      _controller.setLooping(true);
    });

    print('比例 ${_controller.value.aspectRatio}');
  }


  
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: _body(),
    );
  }

  _body(){
    return Center(
      child: Column(
        children: [
          SizedBox(height: 300,),
          ClipRRect( //裁剪掉超出Container容器的部分
              borderRadius: BorderRadius.circular(5),
              child: Container(
                  width: 320,height: 180,
                  color: Colors.green,
                  alignment: Alignment.center,
                  child: _video()
              ))
        ],
      )
    );
  }


  _video(){
    return FutureBuilder(
      future: _initializeVideoPlayerFuture,
      builder: (context, snapshot) {
        return snapshot.connectionState == ConnectionState.done
            ? Stack(
          children: [
            SizedBox.expand(//尽量大的去填充父布局
                child: FittedBox(//使用FittedBox设置BoxFit.cover使子控件等比占据父容器
                  fit: BoxFit.cover,
                  child: SizedBox(
                      width: _sizeWidth,height: _sizeHeight,
                      child: VideoPlayer(_controller)),
                )
            ),

            GestureDetector(
              onTap: (){
                if(_controller.value.isPlaying){
                  _controller.pause();
                }else {
                  _controller.play();
                }
              },
              child:  Center(
                child: Offstage(
                  offstage: _controller.value.isPlaying,
                  child: Image.asset(PathConfig.iconPause,
                    width: 40,
                    height: 40,
                  ),
                ),
              )
            ),
          ],
        )
            : Center(
          child: CircularProgressIndicator(),
        );
      },
    );
  }
}

http://www.kler.cn/a/373217.html

相关文章:

  • 基于SSM学生竞赛模拟系统的设计
  • 阿里云物联网的通信方式
  • 智慧小区:科技之光点亮幸福家园
  • fastGpt
  • SASS转换成CSS步骤
  • 基于深度学习的舆论分析与检测系统应用与研究
  • Vue生成名片二维码带logo并支持下载
  • 《人工智能炒股:变革与挑战》
  • 《YOLO 目标检测》—— YOLO v3详细介绍
  • Linux rabbitmq客户端 SimpleAmqpClient 源码编译
  • docker 数据目录迁移
  • 正确认识HTTP和HTTPS协议及其在Java Web项目中的应用!
  • 1_信息化项目实施方案
  • 数据结构:(OJ387)字符串中的第一个唯一字符
  • 恋爱脑学Rust之闭包三Traits:Fn,FnOnce,FnMut
  • [Mysql] 介绍一下PROCEDURE、TRIGGERS和EVENTS
  • AdaBoost与前向分步算法
  • 使用openssl生成自签名证书(多域名)用于https的ssl验证
  • 【Java SE】变量与常量
  • JVM机制
  • 视频美颜平台的搭建指南:基于直播美颜SDK的完整解决方案
  • 可视化应急指挥平台在应急通信中的优势
  • 视觉目标检测标注xml格式文件解析可视化 - python 实现
  • 【数据结构】五分钟自测主干知识(十二)
  • 两步GMM计算权重矩阵
  • HTML5新增属性