mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-11-28 19:23:11 +01:00
162 lines
9 KiB
HTML
162 lines
9 KiB
HTML
<!DOCTYPE html>
|
||
<html class="">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Encoding Video Stickers and Emoji with .WEBM and VP9</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta property="description" content=".WEBM video format allows anyone to easily create high-detail animations for stickers and emoji that users can send and…">
|
||
<meta property="og:title" content="Encoding Video Stickers and Emoji with .WEBM and VP9">
|
||
<meta property="og:image" content="">
|
||
<meta property="og:description" content=".WEBM video format allows anyone to easily create high-detail animations for stickers and emoji that users can send and…">
|
||
<link rel="icon" type="image/svg+xml" href="/img/website_icon.svg?4">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
|
||
<link rel="alternate icon" href="/img/favicon.ico" type="image/x-icon" />
|
||
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
|
||
|
||
<link href="/css/telegram.css?240" rel="stylesheet" media="screen">
|
||
<style>
|
||
</style>
|
||
</head>
|
||
<body class="preload">
|
||
<div class="dev_page_wrap">
|
||
<div class="dev_page_head navbar navbar-static-top navbar-tg">
|
||
<div class="navbar-inner">
|
||
<div class="container clearfix">
|
||
<ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul>
|
||
<ul class="nav navbar-nav">
|
||
<li><a href="//telegram.org/">Home</a></li>
|
||
<li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li>
|
||
<li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li>
|
||
<li class=""><a href="/api">API</a></li>
|
||
<li class=""><a href="/mtproto">Protocol</a></li>
|
||
<li class=""><a href="/schema">Schema</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container clearfix">
|
||
<div class="dev_page">
|
||
<div id="dev_page_content_wrap" class=" ">
|
||
<div class="dev_page_bread_crumbs"></div>
|
||
<h1 id="dev_page_title">Encoding Video Stickers and Emoji with .WEBM and VP9</h1>
|
||
|
||
<div id="dev_page_content"><p><a href="https://telegram.org/blog/video-stickers-better-reactions">.WEBM video format</a> allows anyone to easily create <strong>high-detail animations</strong> for stickers and emoji that users can send and share instantly in Telegram.</p>
|
||
<h3><a class="anchor" name="video-requirements-for-stickers-and-emoji" href="#video-requirements-for-stickers-and-emoji"><i class="anchor-icon"></i></a>Video Requirements for Stickers and Emoji</h3>
|
||
<ul>
|
||
<li>Video must be in <strong>.WEBM</strong> format, up to <strong>30 FPS</strong>.</li>
|
||
<li>Video must be encoded with the <strong>VP9 codec</strong>.</li>
|
||
<li>Video must have <strong>no audio stream</strong>.</li>
|
||
<li>For stickers, one side must be <strong>512 pixels</strong> in size – the other side can be 512 pixels <strong>or less</strong>.</li>
|
||
<li>For emoji, the resolution must be exactly <strong>100x100 pixels</strong>.</li>
|
||
<li>Duration must not exceed <strong>3 seconds</strong>.</li>
|
||
<li>Video should be looped for optimal user experience.</li>
|
||
<li>Video size should not exceed <strong>256 KB</strong> after encoding. </li>
|
||
</ul>
|
||
<h3><a class="anchor" name="encoding-video-files" href="#encoding-video-files"><i class="anchor-icon"></i></a>Encoding Video Files</h3>
|
||
<p>You can design your animation in your <strong>preferred app</strong> – but depending on the app’s export settings, you may need an <strong>encoding program</strong> to create the final file.</p>
|
||
<blockquote>
|
||
<p>Programs like <a href="https://handbrake.fr/downloads.php">Handbrake</a> or <a href="https://www.ffmpeg.org/download.html">ffmpeg</a> natively support .WEBM encoding with VP9.</p>
|
||
</blockquote>
|
||
<h4><a class="anchor" name="encoding-with-adobe-media-encoder" href="#encoding-with-adobe-media-encoder"><i class="anchor-icon"></i></a>Encoding with Adobe Media Encoder</h4>
|
||
<p>Adobe’s Media Encoder <strong>requires a plug-in</strong> to support .WEBM encoding. Here is a modified version of a plug-in by <a href="https://github.com/fnordware/AdobeWebM">fnord software</a> that you can install to render your videos with Media Encoder.</p>
|
||
<ul>
|
||
<li><p><a href="/file/464001139/fd54/udyaRyjzBQ0.837957.zip/cd1e72526a65d383e5">Windows WEBM plug-in</a><br>Windows Installation Path<br><code>C:\Program Files\Adobe\Common\Plug-ins\7.0\MediaCore</code></p>
|
||
</li>
|
||
<li><p><a href="/file/464001958/101cc/d7q2KrY6DDU.1628141.zip/15bbe083289d292ce6">macOS WEBM plug-in (M1 and Intel)</a><br>macOS Installation Path:<br><code>~/Library/Application Support/Adobe/Common/Plug-ins/7.0/MediaCore</code></p>
|
||
</li>
|
||
</ul>
|
||
<p>After the plug-in is installed, .WEBM will appear in the list of formats in the Queue tab.</p>
|
||
<blockquote>
|
||
<p>On macOS, you may need to go to Settings > Security & Privacy to approve installation.</p>
|
||
</blockquote>
|
||
<h4><a class="anchor" name="render-settings" href="#render-settings"><i class="anchor-icon"></i></a>Render Settings</h4>
|
||
<p>If it’s your first time working with encoding software, here are some tips that might help:</p>
|
||
<ul>
|
||
<li>Make sure to check that <strong>VP9</strong> is selected in the codec settings – some apps may default to VP8.</li>
|
||
<li>Make sure to <strong>remove</strong> any audio streams (uncheck ‘Export Audio’ in Adobe programs).</li>
|
||
<li>Make sure the frame rate is a <strong>constant 30 FPS</strong>.</li>
|
||
<li>Use <strong>Constant Quality</strong> and a lower (or lowest) quality setting – otherwise size dramatically decreases without affecting fidelity.</li>
|
||
<li>In <strong>Media Encoder</strong>, make sure your Renderer is set to ‘Software Only’.</li>
|
||
<li>If your file fails to render, try importing it as a <strong>PNG Sequence</strong>.</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>After Effects projects integrate directly with Media Encoder via <em>File > Export > Add to Media Encoder Queue</em>.</p>
|
||
</blockquote>
|
||
<h3><a class="anchor" name="uploading-video-stickers-and-emoji" href="#uploading-video-stickers-and-emoji"><i class="anchor-icon"></i></a>Uploading Video Stickers and Emoji</h3>
|
||
<p>The <a href="https://t.me/Stickers">@Stickers</a> bot lets you quickly <strong>publish</strong> and <strong>manage</strong> your sticker and emoji packs. Start a chat with it on Telegram and it will walk you through the process. For <strong>step-by-step instructions</strong> and more information, see <a href="https://core.telegram.org/stickers#using-the-stickers-bot">this guide</a>.</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="footer_wrap">
|
||
<div class="footer_columns_wrap footer_desktop">
|
||
<div class="footer_column footer_column_telegram">
|
||
<h5>Telegram</h5>
|
||
<div class="footer_telegram_description"></div>
|
||
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
|
||
</div>
|
||
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/faq">About</a></h5>
|
||
<ul>
|
||
<li><a href="//telegram.org/faq">FAQ</a></li>
|
||
<li><a href="//telegram.org/privacy">Privacy</a></li>
|
||
<li><a href="//telegram.org/press">Press</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5>
|
||
<ul>
|
||
<li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li>
|
||
<li><a href="//telegram.org/android">Android</a></li>
|
||
<li><a href="//telegram.org/dl/web">Mobile Web</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/apps#desktop-apps">Desktop Apps</a></h5>
|
||
<ul>
|
||
<li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li>
|
||
<li><a href="//macos.telegram.org/">macOS</a></li>
|
||
<li><a href="//telegram.org/dl/web">Web-browser</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer_column footer_column_platform">
|
||
<h5><a href="/">Platform</a></h5>
|
||
<ul>
|
||
<li><a href="/api">API</a></li>
|
||
<li><a href="//translations.telegram.org/">Translations</a></li>
|
||
<li><a href="//instantview.telegram.org/">Instant View</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer_columns_wrap footer_mobile">
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/faq">About</a></h5>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/blog">Blog</a></h5>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/apps">Apps</a></h5>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="/">Platform</a></h5>
|
||
</div>
|
||
<div class="footer_column">
|
||
<h5><a href="//telegram.org/press">Press</a></h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="/js/main.js?47"></script>
|
||
|
||
<script>backToTopInit("Go up");
|
||
removePreloadInit();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|