LVGL组件设计之视频播放器

LVGL组件设计之视频播放器

1. 概述

视频播放器组件(vplayer)是基于LVGL和FFmpeg实现的一个通用视频播放组件，为嵌入式设备提供高效的视频播放功能。该组件封装了FFmpeg的解码功能和LVGL的显示功能，提供了简单的接口用于视频文件的播放、暂停、停止等操作。

2. 开发环境说明

2.1 开发环境

• 处理器：AM3354
• 显示屏：支持触摸功能的LCD屏幕
• 操作系统：Linux 3.2
• LVGL版本：v8.3
• FFmpeg版本：3.4.12
• 构建工具：CMake 3.16+
• 交叉编译工具链：arm-arago-linux-gnueabi-gcc 4.5.3

2.2 依赖组件

• LVGL核心库
• FFmpeg库
  • libavcodec
  • libavformat
  • libswscale
  • libavutil

2.3 源码路径

• 组件源码：apps/tests/videoTest/src/com/vplayer
• FFmpeg源码：thirdpart/ffmpeg/ffmpeg-3.4.12
• LVGL适配层：lvgl/src/extra/libs/ffmpeg
• 项目源码：https://gitcode.com/am335xt3/lvgl/tree/main/apps/tests/videoTest

3. 核心功能

3.1 组件结构

视频播放器组件主要由以下部分组成：

typedef struct {
   
   
    lv_obj_t *player;         // 视频播放器容器对象
    lv_obj_t *video_obj;      // 实际显示视频的对象
    lv_obj_t *toolbar;        // 工具栏对象
    lv_obj_t *play_btn;       // 播放/暂停按钮
    lv_obj_t *stop_btn;       // 停止按钮
    lv_obj_t *fullscreen_btn; // 全屏按钮
    bool is_playing;          // 播放状态
    uint16_t video_width;     // 视频原始宽度
    uint16_t video_height;    // 视频原始高度
    char *video_path;         // 视频源路径
    bool is_fullscreen;       // 全屏状态
} vplayer_t;

3.2 主要接口

组件提供以下核心接口：

• vplayer_create(): 创建视频播放器组件，初始化播放器界面布局和控制按钮
• vplayer_set_src(): 设置视频源文件，自动调整视频显示尺寸以适应容器
• vplayer_play(): 开始播放视频
• vplayer_pause(): 暂停播放
• vplayer_stop(): 停止播放
• vplayer_toggle_fullscreen(): 切换全屏模式

3.3 界面布局

播放器界面包含以下主要元素：

1. 视频显示区域：

   • 自适应容器大小，保持视频原始宽高比
   • 支持全屏显示模式
   • 点击视频区域可退出全屏

2. 控制工具栏：

   • 播放/暂停按钮：控制视频播放和暂停
   • 停止按钮：停止视频播放
   • 全屏按钮：切换全屏显示模式
   • 工具栏在全屏模式下自动隐藏

3.4 视频播放控制

播放器组件通过LVGL的FFmpeg播放器对象(lv_ffmpeg_player)实现视频解码和显示：

1. 视频源设置：

   • 支持设置本地视频文件路径
   • 自动获取视频原始尺寸
   • 根据容器大小计算最佳显示尺寸

2. 播放控制：

   • 开始播放：调用LV_FFMPEG_PLAYER_CMD_START命令
   • 暂停播放：调用LV_FFMPEG_PLAYER_CMD_PAUSE命令
   • 停止播放：调用LV_FFMPEG_PLAYER_CMD_STOP命令

3. 显示控制：

   • 正常模式：视频区域高度为屏幕高度减去工具栏高度
   • 全屏模式：视频区域占满整个屏幕，工具栏隐藏
   • 自动计算并保持视频显示比例

4. 实现细节

4.1 FFmpeg移植

在AM3354平台上移植FFmpeg需要进行以下配置：

1. 配置交叉编译环境
2. 配置FFmpeg编译选项
3. 编译FFmpeg库

相关CMake配置：

# 下面为ffmpeg的关键配置选项，详细请参考thirdpart/ffmpeg/CMakeLists.txt
set(FFMPEG_CONFIGURE_OPTIONS
    --prefix=${FFMPEG_INSTALL_DIR}
    --enable-cross-compile
    --cross-prefix=${CROSS_PREFIX}
    --sysroot=${CROSS_SYSROOT}
    --cc=${CMAKE_C_COMPILER}
    --cxx=${CMAKE_CXX_COMPILER}
    --strip=${CROSS_PREFIX}strip
    --arch=arm
    --target-os=linux
    --enable-shared
    --enable-static
    --disable-doc
    --disable-ffplay
    --disable-ffprobe
    --disable-ffserver
    --disable-avdevice
    --disable-jack
    --disable-bzlib
    --disable-doc
    --disable-htmlpages
    --disable-manpages
    --disable-podpages
    --disable-txtpages
    --enable-gpl
    --enable-nonfree
    --enable-version3
    --enable-small
    --enable-zlib
    --enable-decoder=h264,mpeg4,aac,mp3,png,mjpeg
    --enable-parser=h264,aac,mpegaudio,png
    --enable-demuxer=mov,mp4,matroska,mpegts,image2
    --enable-protocol=file
    --enable-swscale
    --extra-cflags="-I${CROSS_COMPILE_INCLUDE_PATH}"
)

1. 设置”–extra-cflags“的原因是，本项目使用的交叉编译工具包含的Linux内核头文件和实际运行的环境不一致，使用CROSS_COMPILE_INCLUDE_PATH指定Linux内核的头文件路径

2. 交叉编译环境配置请参考工程源码的toolchain.cmake文件。

4.2 FFmpeg在LVGL上的适配

1. FFmpeg在LVGL上的适配
   CMake需要进行以下配置：

# lvgl/env_support/cmake/custom.cmake
# Option to define LV_CONF_INCLUDE_SIMPLE, default: ON
option(LV_USE_FFMPEG_SHARED "Use shared ffmpeg libraries" ON)

# ffmpeg库，确保链接顺序正确
if(LV_USE_FFMPEG_SHARED)
  target_link_libraries(lvgl PRIVATE avformat avcodec swresample swscale avutil)
else()
  target_link_libraries(lvgl PRIVATE libavformat.a)
  target_link_libraries(lvgl PRIVATE libavcodec.a)
  target_link_libraries(lvgl PRIVATE libswresample.a)
  target_link_libraries(lvgl PRIVATE libswscale.a)
  target_link_libraries(lvgl PRIVATE libavutil.a)
endif()

2. 使能FFmpeg模块

# lv_conf.h
#define LV_USE_FFMPEG 1

4.2 LVGL适配层

LVGL提供了FFmpeg适配层，用于将解码后的视频帧转换为LVGL可显示的格式：

// lvgl/src/extra/libs/ffmpeg/lv_ffmpeg.c

4.3 播放器实现

播放器的核心实现包括以下部分：

1. 创建播放器组件

vplayer_t *vplayer_create(lv_obj_t *parent)
{
   
   
    vplayer_t *vplayer = lv_mem_alloc(sizeof(vplayer_t));
    if (vplayer ==