# VideoSubtitle

**Repository Path**: zhangxcode/video-subtitle

## Basic Information

- **Project Name**: VideoSubtitle
- **Description**: 给视频添加字幕
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2025-07-30
- **Last Updated**: 2025-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Implement video plug-in subtitles

## Project Introduction

This example uses AVPlayer instance and Video component respectively to realize video configuration plug-in subtitles and set subtitle font format, font size and color.

## Effect preview

| Application Home           | <img src="./screenshots/devices/home_en.jpg" height="320">         |
|:---------------------------|--------------------------------------------------------------------|
| Application effect display | <img src="./screenshots/devices/captionVideo_en.gif" height="320"> |

## Instructions for use
1. Open the app, click the button, and enter the AVPlayer/Video component plug-in subtitle page.
2. Click the Subtitle Settings button below, select the subtitle format, the setting is complete, click Confirm, and the subtitle format modification will take effect.

## Engineering catalogue

```
├──entry/src/main/ets/                              
│  ├──entryability
│  │  └──EntryAbility.ets                           // Program entry class
│  ├──constants
│  │  └──Constants.ets                              // Constant file
│  ├──model  
│  │  └──ViewModel.ets                              // Video playback parameter class     
│  ├──pages  
│  │  ├──Index.ets                                  // Home page entrance page          
│  │  └──VideoPage.ets                              // Video playback page
│  ├──utils                                         
│  │  ├──CommonUtil.ets                             // Public tools
│  │  └──Logger.ets                                 // Log class
│  └──views             
│     ├──AvPlayerComponent.ets                      // AVPlayer Video Playback Component
│     ├──CaptionFontComponent.ets                   // Subtitle font setting component
│     └──VideoPlayerComponent.ets                   // Video Video Playback Component
└──entry/src/main/resources                         // Application static resource directory
```

## Concrete implementation

1. The AVPlayer instance registers the 'subtitleUpdate' method to listen for subtitle information, uses a state variable to refresh the content of the Text component, and modifies the subtitle format by changing the Text property.
2. The Video component's Update method listens to the video progress, updates the subtitle information, uses a state variable to refresh the content of the Text component, and modifies the subtitle format by changing the Text property.

## Relevant permissions

NA

## Constraints and Limitations

1. This example only supports running on standard systems, and supports devices: Huawei mobile phones and tablets.

2. HarmonyOS system: HarmonyOS 5.1.1 Release and above.

3. DevEco Studio version: DevEco Studio 5.1.1 Release and above.

4. HarmonyOS SDK version: HarmonyOS 5.1.1 Release SDK and above.