telegram-crawler/data/web/core.telegram.org/stickers/webm-vp9-encoding.html

163 lines
9.1 KiB
HTML
Raw Normal View History

2022-02-23 16:30:26 +01:00
<!DOCTYPE html>
<html class="">
<head>
<meta charset="utf-8">
2022-08-12 18:20:48 +02:00
<title>Encoding Video Stickers and Emoji with .WEBM and VP9</title>
2022-02-23 16:30:26 +01:00
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2022-08-12 15:54:02 +02:00
<meta property="description" content=".WEBM video format allows anyone to easily create high-detail animations for stickers and emoji that users can send and…">
2022-08-12 18:20:48 +02:00
<meta property="og:title" content="Encoding Video Stickers and Emoji with .WEBM and VP9">
2022-02-23 16:30:26 +01:00
<meta property="og:image" content="">
2022-08-12 15:54:02 +02:00
<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…">
2022-04-21 15:52:36 +02:00
<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" />
2022-02-23 16:30:26 +01:00
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
2022-11-21 13:10:26 +01:00
<link href="/css/telegram.css?233" rel="stylesheet" media="screen">
2022-02-23 16:30:26 +01:00
<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>
2022-08-12 18:20:48 +02:00
<h1 id="dev_page_title">Encoding Video Stickers and Emoji with .WEBM and VP9</h1>
2022-02-23 16:30:26 +01:00
2022-08-12 15:54:02 +02:00
<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>
2022-02-23 16:30:26 +01:00
<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>
2022-08-12 15:54:02 +02:00
<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>
2022-02-23 16:30:26 +01:00
<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 apps 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>
2022-08-12 15:54:02 +02:00
<p>Adobes 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>
2022-02-23 16:30:26 +01:00
<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 &gt; Security &amp; 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 its 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>
2022-09-06 17:33:57 +02:00
<li>Use <strong>Constant Quality</strong> and a lower (or lowest) quality setting otherwise size dramatically decreases without affecting fidelity.</li>
2022-02-23 16:30:26 +01:00
<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 &gt; Export &gt; Add to Media Encoder Queue</em>.</p>
</blockquote>
2022-08-12 15:54:02 +02:00
<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>
2022-02-23 16:30:26 +01:00
</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>
2022-09-09 12:10:24 +02:00
<li><a href="//telegram.org/privacy">Privacy</a></li>
2022-09-09 23:58:59 +02:00
<li><a href="//telegram.org/press">Press</a></li>
2022-02-23 16:30:26 +01:00
</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>
2022-09-09 23:58:59 +02:00
<li><a href="//telegram.org/android">Android</a></li>
<li><a href="//telegram.org/dl/web">Mobile Web</a></li>
2022-02-23 16:30:26 +01:00
</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="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)">Twitter</a></h5>
</div>
</div>
</div>
</div>
2022-04-19 13:17:31 +02:00
<script src="/js/main.js?46"></script>
2022-02-23 16:30:26 +01:00
<script>backToTopInit("Go up");
removePreloadInit();
</script>
</body>
</html>