Skip to content

Instantly share code, notes, and snippets.

@chendaniely

chendaniely/index.Rmd

Created January 11, 2021 02:27
Show Gist options
  • Save chendaniely/2bef380d83cee6b5eb2df3c7ea4d1763 to your computer and use it in GitHub Desktop.
Save chendaniely/2bef380d83cee6b5eb2df3c7ea4d1763 to your computer and use it in GitHub Desktop.
Download ZIP
backup caption post
Raw
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Source Themes Academic 4.3.1">
<meta name="author" content="Daniel Chen">
<meta name="description" content="
In the wake of the pandemic and online conferences,
some of the presentations and talks are asked to be pre-recorded for the event.
Last year’s PyCon was the first time I ever saw a professional stenographer at each of the talks.
This is important because not only do you get live closed captions during the presentation,
they also accurately transcribe technical jargon and terms.
I’ve seen some Twitch streamers add closed captioning on their streams recently,
and after seeing people request for captions in a recent webinar,
I decided to see how I can add captions to a conference video submission.
">
<link rel="alternate" hreflang="en-us" href="https://daniel.rbind.io/2020/08/27/creating-and-adding-subtitles-to-your-videos/">
<meta name="theme-color" content="hsl(339, 90%, 68%)">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.8.6/css/academicons.min.css" integrity="sha256-uFVgMKfistnJAfoCUQigIl+JfUaP47GrRKjf6CTPVmw=" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" integrity="sha256-ygkqlh3CYSUri3LhQxzdcm0n1EQvH2Y+U5S2idbLtxs=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css" crossorigin="anonymous" title="hl-light">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css" crossorigin="anonymous" title="hl-dark" disabled>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:400,400italic,700|Roboto+Mono&display=swap">
<link rel="stylesheet" href="/css/academic.min.51aaf4ffea3f47e2aa5becc49e20baec.css">
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-54964509-2', 'auto');
ga('set', 'anonymizeIp', true);
ga('require', 'eventTracker');
ga('require', 'outboundLinkTracker');
ga('require', 'urlChangeTracker');
ga('send', 'pageview');
</script>
<script async src="//www.google-analytics.com/analytics.js"></script>
<script async src="https://cdnjs.cloudflare.com/ajax/libs/autotrack/2.4.1/autotrack.js" integrity="sha512-HUmooslVKj4m6OBu0OgzjXXr+QuFYy/k7eLI5jdeEy/F4RSgMn6XRWRGkFi5IFaFgy7uFTkegp3Z0XnJf3Jq+g==" crossorigin="anonymous"></script>
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/img/icon.png">
<link rel="apple-touch-icon" type="image/png" href="/img/icon-192.png">
<link rel="canonical" href="https://daniel.rbind.io/2020/08/27/creating-and-adding-subtitles-to-your-videos/">
<meta property="twitter:card" content="summary">
<meta property="twitter:site" content="@chendaniely">
<meta property="twitter:creator" content="@chendaniely">
<meta property="og:site_name" content="Daniel Chen">
<meta property="og:url" content="https://daniel.rbind.io/2020/08/27/creating-and-adding-subtitles-to-your-videos/">
<meta property="og:title" content="Creating and Adding Subtitles to your Videos | Daniel Chen">
<meta property="og:description" content="
In the wake of the pandemic and online conferences,
some of the presentations and talks are asked to be pre-recorded for the event.
Last year’s PyCon was the first time I ever saw a professional stenographer at each of the talks.
This is important because not only do you get live closed captions during the presentation,
they also accurately transcribe technical jargon and terms.
I’ve seen some Twitch streamers add closed captioning on their streams recently,
and after seeing people request for captions in a recent webinar,
I decided to see how I can add captions to a conference video submission.
"><meta property="og:image" content="https://daniel.rbind.io/img/icon-192.png">
<meta property="twitter:image" content="https://daniel.rbind.io/img/icon-192.png"><meta property="og:locale" content="en-us">
<meta property="article:published_time" content="2020-08-27T00:00:00&#43;00:00">
<meta property="article:modified_time" content="2020-08-27T15:29:18-04:00">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "hsl(339, 90%, 68%)",
"text": "#fff"
},
"button": {
"background": "#fff",
"text": "hsl(339, 90%, 68%)"
}
},
"theme": "classic",
"content": {
"message": "This website uses cookies to ensure you get the best experience on our website.",
"dismiss": "Got it!",
"link": "Learn more",
"href": "https://cookies.insites.com"
}
})});
</script>
<title>Creating and Adding Subtitles to your Videos | Daniel Chen</title>
</head>
<body id="top" data-spy="scroll" data-target="#TableOfContents" data-offset="71" class="dark">
<aside class="search-results" id="search">
<div class="container">
<section class="search-header">
<div class="row no-gutters justify-content-between mb-3">
<div class="col-6">
<h1>Search</h1>
</div>
<div class="col-6 col-search-close">
<a class="js-search" href="#"><i class="fas fa-times-circle text-muted" aria-hidden="true"></i></a>
</div>
</div>
<div id="search-box">
<input name="q" id="search-query" placeholder="Search..." autocapitalize="off"
autocomplete="off" autocorrect="off" role="textbox" spellcheck="false" type="search">
</div>
</section>
<section class="section-search-results">
<div id="search-hits">
</div>
</section>
</div>
</aside>
<nav class="navbar navbar-light fixed-top navbar-expand-lg py-0" id="navbar-main">
<div class="container">
<a class="navbar-brand" href="/">Daniel Chen</a>
<button type="button" class="navbar-toggler" data-toggle="collapse"
data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link " href="/#about"><span>Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/post/"><span>Posts</span></a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"><span>Courses</span><span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-item my-0 py-0 mx-0 px-0">
<a href="/courses/python/"><i class="fab fa-python" style="color: #fff;"></i> <span>Python</span></a>
</li>
<li class="dropdown-item my-0 py-0 mx-0 px-0">
<a href="/courses/r/"><i class="fab fa-r-project" style="color: #fff;"></i> <span>R</span></a>
</li>
<li class="dropdown-item my-0 py-0 mx-0 px-0">
<a href="/courses/git/"><i class="fas fa-code-branch" style="color: #fff;"></i> <span>Git</span></a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"><span>Hobbies</span><span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-item my-0 py-0 mx-0 px-0">
<a href="/hobbies/scuba"><i class="fas fa-fish" style="color: #fff;"></i> <span>SCUBA Diving</span></a>
</li>
<li class="dropdown-item my-0 py-0 mx-0 px-0">
<a href="/hobbies/photography"><i class="fas fa-camera" style="color: #fff;"></i> <span>Photography</span></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link js-search" href="#"><i class="fas fa-search" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link js-dark-toggle" href="#"><i class="fas fa-moon" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<article class="article" itemscope itemtype="http://schema.org/Article">
<div class="article-container pt-3">
<h1 itemprop="name">Creating and Adding Subtitles to your Videos</h1>
<meta content="2020-08-27 00:00:00 &#43;0000 UTC" itemprop="datePublished">
<meta content="2020-08-27 15:29:18 -0400 -0400" itemprop="dateModified">
<div class="article-metadata">
<span class="article-date">
Last updated on
<time>2020-08-27</time>
</span>
<span class="middot-divider"></span>
<span class="article-reading-time">
3 min read
</span>
<span class="middot-divider"></span>
<a href="/2020/08/27/creating-and-adding-subtitles-to-your-videos/#disqus_thread"></a>
<div class="share-box" aria-hidden="true">
<ul class="share">
<li>
<a href="https://twitter.com/intent/tweet?url=https://daniel.rbind.io/2020/08/27/creating-and-adding-subtitles-to-your-videos/&amp;text=Creating%20and%20Adding%20Subtitles%20to%20your%20Videos" target="_blank" rel="noopener" class="share-btn-twitter">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="https://www.facebook.com/sharer.php?u=https://daniel.rbind.io/2020/08/27/creating-and-adding-subtitles-to-your-videos/&amp;t=Creating%20and%20Adding%20Subtitles%20to%20your%20Videos" target="_blank" rel="noopener" class="share-btn-facebook">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="mailto:?subject=Creating%20and%20Adding%20Subtitles%20to%20your%20Videos&amp;body=https://daniel.rbind.io/2020/08/27/creating-and-adding-subtitles-to-your-videos/" target="_blank" rel="noopener" class="share-btn-email">
<i class="fas fa-envelope"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/shareArticle?url=https://daniel.rbind.io/2020/08/27/creating-and-adding-subtitles-to-your-videos/&amp;title=Creating%20and%20Adding%20Subtitles%20to%20your%20Videos" target="_blank" rel="noopener" class="share-btn-linkedin">
<i class="fab fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="https://web.whatsapp.com/send?text=Creating%20and%20Adding%20Subtitles%20to%20your%20Videos%20https://daniel.rbind.io/2020/08/27/creating-and-adding-subtitles-to-your-videos/" target="_blank" rel="noopener" class="share-btn-whatsapp">
<i class="fab fa-whatsapp"></i>
</a>
</li>
<li>
<a href="https://service.weibo.com/share/share.php?url=https://daniel.rbind.io/2020/08/27/creating-and-adding-subtitles-to-your-videos/&amp;title=Creating%20and%20Adding%20Subtitles%20to%20your%20Videos" target="_blank" rel="noopener" class="share-btn-weibo">
<i class="fab fa-weibo"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="article-container">
<div class="article-style" itemprop="articleBody">
<p>The tools I used:</p>
<ul>
<li>Audio/Video Capture: <a href="https://obsproject.com/">OBS</a></li>
<li>Captioning: <a href="https://webcaptioner.com/">Web Captioner</a>
<ul>
<li>I had a script so my words were already transcribed</li>
</ul></li>
<li>Video editor: <a href="https://kdenlive.org/en/">kdenlive</a></li>
<li>Subtitle creation: <a href="http://www.aegisub.org/">Aegisub</a></li>
<li>“Burning” the captions to the video: <a href="https://ffmpeg.org/">FFmpeg</a></li>
</ul>
<div id="capturing-the-audiovideo" class="section level5">
<h5>Capturing the audio/video</h5>
<p>Each one of the tools have a lot of resources.
I have a machine setup for Twitch streaming, so my OBS setup is mainly setup already to record.
I really love and recommend the
<a href="https://www.youtube.com/channel/UClx4eJ_EP9MJdz19JUjKD1w">Gaming Careers</a>
page if you want to get OBS setup for streaming (or just know how to setup OBS in general).</p>
<p>If you do not have a script you definetly want to capture your microphone and do a realtime
transcribe so you don’t have to type everything you’re saying, and only need to make edits (see below).</p>
<p>I record my videos using <code>.mkv</code> so if something happens and the recording application (OBS) crashes,
the video file itself is still usable and not corrupted.</p>
</div>
<div id="captioning" class="section level5">
<h5>Captioning</h5>
<p>People on Twitch have started puting caption overlays in their stream using
<a href="https://webcaptioner.com/">Web Captioner</a>.
This system lets you save out the text so you have something to work with in post.</p>
<p>If you are talking from a script, then you can skip this step.
But it’s a good resource to know of when you’re doing online presentations.
Google slides, for example, also has their own built-in captioning system,
but I don’t know how it works if you’re on a panel presentation as I don’t think these systems
capture system audio, just the microphone.
In general, these auto captioning systems do not handle technical jargon and terms well.</p>
</div>
<div id="editing-the-video" class="section level5">
<h5>Editing the video</h5>
<p>As far as conference talks go, video editing is pretty minimal.
You’ll mainly be cutting and trimming the beginning and end of the clip and probably letting it play
continuously.
There are things like contrast and saturation you can do to make the image not as bland,
but that’s personal preference.
I do a bunch of photography work, and have some experience with NLE programs like kdenlive,
so making picture changes for the entire clip wasn’t too bad for me.</p>
<p>You’ll probably be watching the video anyway,
so when you open it in a video editor you can get the <em>exact</em> timestame and frame,
which is used to sync a captions file.</p>
<p>You can render (i.e., export) a video into mp4 for sharing.</p>
</div>
<div id="subtitles" class="section level5">
<h5>Subtitles</h5>
<p>Kdenlive doesn’t support captioning or importing a captions files.
This is different from adding a text overlay to a video.
A caption file is a specifically formatted text file that has start and end frames
along with the text to be displayed.</p>
<p>I used <a href="http://www.aegisub.org/">Aegisub</a> to create my subtitle file by using the timestamps from kdenlive.
I already had a script, but this is where your text transcription fill be used.
From there it’s add timestamps, copy, and paste.</p>
<p><img src="aegisub.PNG" width="453" /></p>
<p><em>Figure 1: Screenshot of Aegisub application which is used to create subtitle file timings.</em></p>
</div>
<div id="adding-the-captions" class="section level5">
<h5>Adding the captions</h5>
<p>At the end you’ll have an <code>.ass</code> subtitle file, and a <code>.mp4</code> video file.
Some video players (e.g., VLC) can accept a subtitle file as it plays a video and the subtitles will be automatically displayed.
However, for pre-recoreded videos, you may want to have the captions permanetly “burned” into the video itself.
You can use <code>ffmpeg</code> for this task.</p>
<p>The magical line of code (confirmed to work windows too!):</p>
<pre class="bash"><code>ffmpeg -i &lt;path_to_input_file&gt; -vf ass=&lt;path_to_subtitle_file.ass&gt; &lt;path_to_output_file&gt;</code></pre>
<p>for me it was:</p>
<pre class="bash"><code>ffmpeg -i cropped_video.mp4 -vf ass=subtitles.ass daniel_chen-subtitled.mp4</code></pre>
<p>Now you’ll have a video with captions on the bottom!</p>
<p>Obligatory: Follow me on twitch! I’ll start streaming my dissertation work and some games after I move late September, <a href="https://www.twitch.tv/chendaniely" class="uri">https://www.twitch.tv/chendaniely</a> :D</p>
</div>
</div>
<div class="article-tags">
<a class="badge badge-light" href="/tags/accessibility/">accessibility</a>
<a class="badge badge-light" href="/tags/subtitles/">subtitles</a>
<a class="badge badge-light" href="/tags/video-editing/">video editing</a>
</div>
<div class="media author-card" itemscope itemtype="http://schema.org/Person">
<img class="portrait mr-3" src="https://s.gravatar.com/avatar/4020908e54741b5fc49e743ef6913ceb?s=200')" itemprop="image" alt="Avatar">
<div class="media-body">
<h5 class="card-title" itemprop="name"><a href="https://daniel.rbind.io/">Daniel Chen</a></h5>
<h6 class="card-subtitle">PhD Student</h6>
<p class="card-text" itemprop="description">My research interests include trying anything to graduate.</p>
<ul class="network-icon" aria-hidden="true">
<li>
<a itemprop="sameAs" href="https://twitter.com/chendaniely" target="_blank" rel="noopener">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a itemprop="sameAs" href="https://github.com/chendaniely" target="_blank" rel="noopener">
<i class="fab fa-github"></i>
</a>
</li>
<li>
<a itemprop="sameAs" href="https://www.instagram.com/chendaniely/" target="_blank" rel="noopener">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a itemprop="sameAs" href="https://www.twitch.tv/chendaniely" target="_blank" rel="noopener">
<i class="fab fa-twitch"></i>
</a>
</li>
<li>
<a itemprop="sameAs" href="https://open.spotify.com/user/maveri2k" target="_blank" rel="noopener">
<i class="fab fa-spotify"></i>
</a>
</li>
<li>
<a itemprop="sameAs" href="http://orcid.org/0000-0003-3857-1741" target="_blank" rel="noopener">
<i class="ai ai-orcid"></i>
</a>
</li>
<li>
<a itemprop="sameAs" href="/#contact" >
<i class="fas fa-envelope"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="article-widget">
<div class="post-nav">
<div class="post-nav-item">
<div class="meta-nav">Previous</div>
<a href="/2020/02/29/python-environments-with-conda/" rel="prev">Python Environments with Conda</a>
</div>
</div>
</div>
<section id="comments">
<div id="disqus_thread"></div>
<script type="application/javascript">
var disqus_config = function () {
};
(function() {
if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
return;
}
var d = document, s = d.createElement('script'); s.async = true;
s.src = '//' + "chendaniely" + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</section>
</div>
</article>
<script src="/js/mathjax-config.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js" integrity="sha256-lqvxZrPLtfffUl2G/e7szqSvPBILGbwmsGE1MKlOi0Q=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" integrity="sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js" integrity="sha256-X5PoE3KU5l+JcX+w09p/wHl9AzK333C4hJ2I9S5mD4M=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js" integrity="sha256-aYTdUrn6Ow1DDgh5JTc3aDGnnju48y/1c8s1dgkYPQ8=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/r.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_CHTML-full" integrity="sha256-GhM+5JHb6QUzOQPXSJLEWP7R73CbkisjzK5Eyij4U9w=" crossorigin="anonymous" async></script>
<script id="dsq-count-scr" src="//chendaniely.disqus.com/count.js" async></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
const search_index_filename = "/index.json";
const i18n = {
'placeholder': "Search...",
'results': "results found",
'no_results': "No results found"
};
const content_type = {
'post': "Posts",
'project': "Projects",
'publication' : "Publications",
'talk' : "Talks"
};
</script>
<script id="search-hit-fuse-template" type="text/x-template">
<div class="search-hit" id="summary-{{key}}">
<div class="search-hit-content">
<div class="search-hit-name">
<a href="{{relpermalink}}">{{title}}</a>
<div class="article-metadata search-hit-type">{{type}}</div>
<p class="search-hit-description">{{snippet}}</p>
</div>
</div>
</div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.1/fuse.min.js" integrity="sha256-VzgmKYmhsGNNN4Ph1kMW+BjoYJM2jV5i4IlFoeZA9XI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js" integrity="sha256-4HLtjeVgH0eIB3aZ9mLYF6E8oU5chNdjU6p6rrXpl9U=" crossorigin="anonymous"></script>
<script src="/js/academic.min.f1a21f988a77cdbdeeb2f60c710009d1.js"></script>
<div class="container">
<footer class="site-footer">
<p class="powered-by">
&copy; Daniel Chen 2020 &middot;
Powered by the
<a href="https://sourcethemes.com/academic/" target="_blank" rel="noopener">Academic theme</a> for
<a href="https://gohugo.io" target="_blank" rel="noopener">Hugo</a>.
<span class="float-right" aria-hidden="true">
<a href="#" id="back_to_top">
<span class="button_icon">
<i class="fas fa-chevron-up fa-2x"></i>
</span>
</a>
</span>
</p>
</footer>
</div>
<div id="modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Cite</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<pre><code class="tex hljs"></code></pre>
</div>
<div class="modal-footer">
<a class="btn btn-outline-primary my-1 js-copy-cite" href="#" target="_blank">
<i class="fas fa-copy"></i> Copy
</a>
<a class="btn btn-outline-primary my-1 js-download-cite" href="#" target="_blank">
<i class="fas fa-download"></i> Download
</a>
<div id="modal-error"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
index.Rmd
---
# Documentation: https://sourcethemes.com/academic/docs/managing-content/
title: "Creating and Adding Subtitles to Your Videos"
subtitle: ""
summary: ""
authors: []
tags: []
categories: []
date: 2020-08-27T19:51:05-05:00
lastmod: 2021-01-10T19:51:05-05:00
featured: false
draft: true
# Featured image
# To use, add an image named `featured.jpg/png` to your page's folder.
# Focal points: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight.
image:
caption: ""
focal_point: ""
preview_only: false
# Projects (optional).
# Associate this post with one or more of your projects.
# Simply enter your project's folder or file name without extension.
# E.g. `projects = ["internal-project"]` references `content/project/deep-learning/index.md`.
# Otherwise, set `projects = []`.
projects: []
---
Note: This is a very condensed re-post of the original blog article (hopefully with the same url).
I must've clobbered the original entry with a git push somewhere...
<hr>
Tools:
1. OBS: Record the screen and/or webcam, https://obsproject.com/
2. Web Captioner: Transcriping the audio during recording, https://webcaptioner.com/
3. Kdenlive: Trim and edit the video, https://kdenlive.org/en/
4. Aegisub: Time the captions and output a subtitle file, www.aegisub.org
5. FFMpeg: Optional if you want to "burn" the subtitles to the video
Web Captioner gives you the option to export out the captions as a plain text file.
You can then use Aegisub to take the text and time them to the video:
```{r}
knitr::include_graphics("./aegisub.PNG")
```
This image shows a snapshot of Aegisub with the video on the top left corner,
and what the timing and text for the subtitles look like.
The numbers highligted in red under the CPS column,
are signifies that too many words may be used in a particular time block.
Once you have the video and the subtitle file (.srt or .ass),
you can use ffmpeg to "burn" in the subtitles so it shows in the video all the time.
Link to the ffmpeg wiki on how to do this: https://trac.ffmpeg.org/wiki/HowToBurnSubtitlesIntoVideo
```bash
ffmpeg -i input.avi -vf "ass=subtitle.ass" output.avi
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment