iOS使用AVFoundation在視訊上新增字幕以及控制字幕時間

aron1992發表於2019-04-04

IOS在視訊上新增字幕效果的基本思路是：

使用自定義的CATextLayer文字圖層或者CAShapeLayer文字圖層，新增到視訊的Layer上建立使用者自定義的字幕效果。這兩者的區別是：CATextLayer支援設定簡單的文字效果，包括文字的內容、字型、字號大小、對其方式、文字顏色、背景顏色等基本的屬性；CAShapeLayer功能更強大，提供了CATextLayer沒有的邊框大小、邊框顏色等設定，如果需要更高階的文字內容展示，需要使用CATextLayer配合UIBezierPath來定製自定義的文字內容。
通過設定Layer圖層的動畫來控制字幕的時間點和時間長度，這裡有一個坑如果單獨設定CATextLayer或者CAShapeLayer的動畫不能控制開始的時間，需要額外新增一個CALayer圖層，把文字圖層CATextLayer或者CAShapeLayer新增到父CALayer圖層中，在文字圖層CATextLayer或者CAShapeLayer上設定開始的動畫

    NSTimeInterval animatedInStartTime = startTime + initAnimationDuration;
    CABasicAnimation *fadeInAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fadeInAnimation.fromValue = @0.0f;
    fadeInAnimation.toValue = @1.0f;
    fadeInAnimation.additive = NO;
    fadeInAnimation.removedOnCompletion = NO;
    fadeInAnimation.beginTime = animatedInStartTime;
    fadeInAnimation.duration = animationDuration;
    fadeInAnimation.autoreverses = NO;
    fadeInAnimation.fillMode = kCAFillModeBoth;
    [textLayer addAnimation:fadeInAnimation forKey:@"opacity"];
複製程式碼

在父CALayer圖層上設定結束的動畫，這樣設定才能實現使用者自定義的時間點和時間長度

NSTimeInterval animatedOutStartTime = startTime + duration - animationDuration;
    CABasicAnimation *fadeOutAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fadeOutAnimation.fromValue = @1.0f;
    fadeOutAnimation.toValue = @0.0f;
    fadeOutAnimation.additive = NO;
    fadeOutAnimation.removedOnCompletion = NO;
    fadeOutAnimation.beginTime = animatedOutStartTime;
    fadeOutAnimation.duration = animationDuration;
    fadeOutAnimation.autoreverses = NO;
    fadeOutAnimation.fillMode = kCAFillModeBoth;
    [animatedTitleLayer addAnimation:fadeOutAnimation forKey:@"opacity"];
複製程式碼

完整的程式碼

- (CALayer *)buildLayerbuildTxt:(NSString*)text
                       textSize:(CGFloat)textSize
                      textColor:(UIColor*)textColor
                    strokeColor:(UIColor*)strokeColor
                        opacity:(CGFloat)opacity
                       textRect:(CGRect)textRect
                       fontPath:(NSString*)fontPath
                     viewBounds:(CGSize)viewBounds
                      startTime:(NSTimeInterval)startTime
                       duration:(NSTimeInterval)duration
{
    if (!text || [text isEqualToString:@""])
    {
        return nil;
    }
    
    // Create a layer for the overall title animation.
    CALayer *animatedTitleLayer = [CALayer layer];
    
    // 1. Create a layer for the text of the title.
    CATextLayer *titleLayer = [CATextLayer layer];
    titleLayer.string = text;
    titleLayer.font = (__bridge CFTypeRef)(@"Helvetica");
    titleLayer.fontSize = textSize;
    titleLayer.alignmentMode = kCAAlignmentCenter;
    titleLayer.bounds = CGRectMake(0, 0, textRect.size.width, textRect.size.height);
    titleLayer.foregroundColor = textColor.CGColor;
    titleLayer.backgroundColor = [UIColor clearColor].CGColor;
    // [animatedTitleLayer addSublayer:titleLayer];
    
    // 新增文字以及邊框效果
    UIFont *font = nil;
    if ((fontPath != nil) && (fontPath.length > 0)) {
        font = [[FLVideoEditFontManager sharedFLVideoEditFontManager] fontWithPath:fontPath size:textSize];
        titleLayer.font = CGFontCreateWithFontName((__bridge CFStringRef)font.fontName);
    }
    if (font == nil) {
        titleLayer.font = (__bridge CFTypeRef)(@"Helvetica");
    }
    
    UIBezierPath *path = nil;
    if (font) {
        path = [FLLayerBuilderTool createPathForText:text fontHeight:textSize fontName:(__bridge CFStringRef)(font.fontName)];
    }
    else
    {
        path = [FLLayerBuilderTool createPathForText:text fontHeight:textSize fontName:CFSTR("Helvetica")];
    }
    CGRect rectPath = CGPathGetBoundingBox(path.CGPath);
    CAShapeLayer *textLayer = [CAShapeLayer layer];
    textLayer.path = path.CGPath;
    textLayer.lineWidth = 1;
    if (strokeColor != nil) {
        textLayer.strokeColor = strokeColor.CGColor;
    }
    if (textColor != nil) {
        textLayer.fillColor = textColor.CGColor;
    }
    textLayer.lineJoin = kCALineJoinRound;
    textLayer.lineCap = kCALineCapRound;
    textLayer.geometryFlipped = NO;
    textLayer.opacity = opacity;
    textLayer.bounds = CGRectMake(0, 0, rectPath.size.width, textSize+10);
    [animatedTitleLayer addSublayer:textLayer];
    
    // 動畫圖層位置
    animatedTitleLayer.position = CGPointMake(textRect.origin.x+textRect.size.width/2, viewBounds.height - textRect.size.height/2 - textRect.origin.y);
    
    NSTimeInterval initAnimationDuration = 0.1f;
    NSTimeInterval animationDuration = 0.1f;
    
    // 3.顯示動畫
    NSTimeInterval animatedInStartTime = startTime + initAnimationDuration;
    CABasicAnimation *fadeInAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fadeInAnimation.fromValue = @0.0f;
    fadeInAnimation.toValue = @1.0f;
    fadeInAnimation.additive = NO;
    fadeInAnimation.removedOnCompletion = NO;
    fadeInAnimation.beginTime = animatedInStartTime;
    fadeInAnimation.duration = animationDuration;
    fadeInAnimation.autoreverses = NO;
    fadeInAnimation.fillMode = kCAFillModeBoth;
    [textLayer addAnimation:fadeInAnimation forKey:@"opacity"];
    
    NSTimeInterval animatedOutStartTime = startTime + duration - animationDuration;
    CABasicAnimation *fadeOutAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    fadeOutAnimation.fromValue = @1.0f;
    fadeOutAnimation.toValue = @0.0f;
    fadeOutAnimation.additive = NO;
    fadeOutAnimation.removedOnCompletion = NO;
    fadeOutAnimation.beginTime = animatedOutStartTime;
    fadeOutAnimation.duration = animationDuration;
    fadeOutAnimation.autoreverses = NO;
    fadeOutAnimation.fillMode = kCAFillModeBoth;
    
    [animatedTitleLayer addAnimation:fadeOutAnimation forKey:@"opacity"];
    
    return animatedTitleLayer;
}
複製程式碼

依賴的工具類FLLayerBuilderTool.m檔案：

#import "FLLayerBuilderTool.h"
#import <CoreText/CoreText.h>

@implementation FLLayerBuilderTool


+ (UIBezierPath*) createPathForText:(NSString*)string fontHeight:(CGFloat)height fontName:(CFStringRef)fontName
{
    if ([string length] < 1)
        return nil;
    
    UIBezierPath *combinedGlyphsPath = nil;
    CGMutablePathRef letters = CGPathCreateMutable();
    
    CTFontRef font = CTFontCreateWithName(fontName, height, NULL);
    if (font == nil) {
        font = (__bridge CFTypeRef)(@"Helvetica");
    }
    NSDictionary *attrs = [NSDictionary dictionaryWithObjectsAndKeys:
                           (__bridge id)font, kCTFontAttributeName,
                           nil];
    NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:string
                                                                     attributes:attrs];
    CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)attrString);
    CFArrayRef runArray = CTLineGetGlyphRuns(line);
    
    // for each RUN
    for (CFIndex runIndex = 0; runIndex < CFArrayGetCount(runArray); runIndex++)
    {
        // Get FONT for this run
        CTRunRef run = (CTRunRef)CFArrayGetValueAtIndex(runArray, runIndex);
        CTFontRef runFont = CFDictionaryGetValue(CTRunGetAttributes(run), kCTFontAttributeName);
        
        // for each GLYPH in run
        for (CFIndex runGlyphIndex = 0; runGlyphIndex < CTRunGetGlyphCount(run); runGlyphIndex++)
        {
            // get Glyph & Glyph-data
            CFRange thisGlyphRange = CFRangeMake(runGlyphIndex, 1);
            CGGlyph glyph;
            CGPoint position;
            CTRunGetGlyphs(run, thisGlyphRange, &glyph);
            CTRunGetPositions(run, thisGlyphRange, &position);
            
            // Get PATH of outline
            {
                CGPathRef letter = CTFontCreatePathForGlyph(runFont, glyph, NULL);
                CGAffineTransform t = CGAffineTransformMakeTranslation(position.x, position.y);
                CGPathAddPath(letters, &t, letter);
                CGPathRelease(letter);
            }
        }
    }
    CFRelease(line);
    
    combinedGlyphsPath = [UIBezierPath bezierPath];
    [combinedGlyphsPath moveToPoint:CGPointZero];
    [combinedGlyphsPath appendPath:[UIBezierPath bezierPathWithCGPath:letters]];
    
    CGPathRelease(letters);
    CFRelease(font);
    
    if (attrString)
    {
        attrString = nil;
    }
    
    return combinedGlyphsPath;
}

@end
複製程式碼

參考資料：
視訊特效製作：如何給視訊新增邊框、水印、動畫以及3D效果
 視訊特效製作2
AVFoundation Tutorial: Adding Overlays and Animations to Videos

視訊怎麼使用外掛字幕
2016-01-11
「Premiere中文新手教程」為視訊新增文字字幕
2021-11-05
REM
MongoDB University 中文字幕視訊上線！
2022-02-17
MongoDB
蘋果手機怎麼在影片上新增字幕編輯文字
2021-05-26
蘋果
影片字幕製作Subtitle Studio如何輕鬆新增字幕
2021-01-05
新增字幕哪個視訊剪輯軟體比較簡單？
2020-09-22
IOS音視訊（二）AVFoundation視訊捕捉
2020-04-05
iOS
視訊：iOS 7官方介紹片(中文字幕)
2013-06-13
iOS
HTML5 video視訊字幕的使用和製作
2019-02-16
HTMLIDE
Win10系統下怎麼給視訊新增srt字幕檔案
2019-01-08
Win10
字幕圖示控制元件 (轉)
2007-12-14
控制元件
Submerge for mac(視訊字幕編輯處理工具)
2022-06-28
Mac
Submerge for Mac(字幕製作新增工具)
2020-06-05
Mac
fpcx教程：在Final Cut Pro中新增多語言字幕
2021-01-05
iOS學習：AVFoundation 視訊流處理
2016-12-01
iOS
影片通訊近實時生成字幕專案實踐
2023-03-19
使用Java修改字幕檔案
2010-04-25
Java
iOS開發 AVFoundation 自定義視訊錄製
2018-01-03
iOS
Final Cut Pro X教程：如何新增字幕
2020-11-01
B站英文教學視訊的字幕獲取學習必看！
2021-06-27
滾動的字幕怎麼批次新增到影片呢？
2023-03-11
Google NEXUS 7 官方介紹視訊（中文字幕）
2012-07-15
Go
IOS音視訊（四十三）AVFoundation 之 Audio Session
2020-04-05
iOSSession
JavaCV 視訊濾鏡（LOGO、滾動字幕、畫中畫、NxN宮格）
2021-04-21
JavaGo
不咕剪輯APP設定視訊字幕的透明度的方法
2020-11-20
APP
2017 Google I/O 主題演講中英雙語字幕視訊
2017-06-14
Go
使用 cURL 函式下載B站字幕
2020-11-09
函式
Arctime怎麼翻譯字幕？Arctime批次翻譯字幕的技巧
2020-07-14
iOS 視訊剪下、旋轉，視訊新增音訊、新增水印，視訊匯出
2016-05-30
iOS音訊
Mac教程： Final Cut Pro X for Mac之如何新增字幕
2020-09-23
Mac
首發 | 2017 Google I/O 主題演講雙語字幕視訊
2017-06-09
Go
為網際網路新手使用者打造良好體驗 | 中文字幕視訊
2022-01-21
字幕檔案srt筆記
2020-11-10
筆記
字幕迴圈顯示原理
2021-01-05
對話語料--字幕庫
2017-05-23
android 外掛字幕介面
2015-02-26
Android
2017 TensorFlow 開發者峰會中文字幕視訊釋出
2017-07-12
Android Jetpack 助推應用開發 | 中文字幕視訊介紹
2018-05-14
AndroidJetpack

iOS使用AVFoundation在視訊上新增字幕以及控制字幕時間

相關文章