<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../../static/styles.css?h=dff0aaad">
<link rel="stylesheet" href="../../../static/pygments.css">
<link rel="shortcut icon" href="../../../static/favicon.png?h=fa09bedd">
<title>Video Operations | Documentation | Lektor Static Content Management System</title>
</head>
<body class="default">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../../../">Lektor</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="../../../downloads/">Download</a></li>
<li class="active"><a href="../../">Documentation</a></li>
<li><a href="../../../showcase/">Showcase</a></li>
<li><a href="../../../plugins/">Plugins</a></li>
<li><a href="../../../community/">Community</a></li>
<li><a href="../../../blog/">Blog</a></li>
</ul>
</div>
</div>
</nav>
<div class="body-wrapper">
<div class="container">
<div class="row">
<div class="col-sm-3">
<ul class="tree-nav nocontent">
<li><a href="../../">Welcome</a></li>
<li><a href="../../what/">What is Lektor</a>
<li><a href="../../installation/">Installation</a>
<li><a href="../../quickstart/">Quickstart</a>
<li><a href="../../project/">Project</a>
<li><a href="../../content/">Content</a>
<li><a href="../">Templates</a>
<ul>
<li><a href="../urls/">URLs and Links</a>
<li><a href="../navigation/">Navigation</a>
<li><a href="../imageops/">Image Operations</a>
<li class="active"><a href="./">Video Operations</a>
<ul></ul>
</ul>
<li><a href="../../themes/">Themes</a>
<li><a href="../../guides/">Guides</a>
<li><a href="../../deployment/">Deployment</a>
<li><a href="../../plugins/">Plugins</a>
<li><a href="../../models/">Data Modelling</a>
<li><a href="../../cli/">Command Line</a>
<li><a href="../../api/">API</a>
<li><a href="../../search/">Search</a>
</ul>
<div class="visible-md-block visible-lg-block">
<h4>This Page</h4>
<ul class="toc">
<li><a href="#accessing-videos">Accessing videos</a></li>
<li><a href="#accessing-metadata">Accessing metadata</a></li>
<li><a href="#generating-thumbnails">Generating thumbnails</a></li>
</ul>
</div>
</div>
<div class="col-sm-9 doc-styling">
<h1>Video Operations</h1>
<ul class=page-meta>
<li>New in Lektor Version <em>3.2</em></li>
</ul>
<p>Just like <a href="../imageops/">images</a>, videos are separate files that are embedded into HTML files. Since they are media files, it's often desirable to read metadata or manipulate them in some way.</p>
<div class="admonition admonition-info"><p>Video metadata access is powered by <a href="https://ffmpeg.org/">FFmpeg</a>. In order to use it FFmpeg must be installed on your system and detected by Lektor. If Lektor is unable to find FFmpeg you will see the error message <code>Unable to locate ffmpeg or ffprobe executable. Is it installed?</code> in your console output if you try to use functionality that requires it.</p></div><h2 id="accessing-videos">Accessing videos</h2><div class="hll"><pre><span></span><span class="cp">{%</span> <span class="k">for</span> <span class="nv">video</span> <span class="k">in</span> <span class="nv">this.attachments.videos</span> <span class="cp">%}</span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"video"</span><span class="p">><</span><span class="nt">video</span> <span class="na">src</span><span class="o">=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">video</span><span class="o">|</span><span class="nf">url</span> <span class="cp">}}</span><span class="s">"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
</pre></div>
<p>Just like images you can also access them using <code>site.get('/myfolder').attachments.videos</code> or <code>site.get('/myfolder').attachments.get('examplevideo.mp4')</code>. Note that not all formats are detected as videos (see <a href="../../content/attachments/">attachments</a>). If your format is not in the list you may still be able to get it detected as a video by adding it to your <a href="../../project/file/#attachment-types">Lektor project file</a>.</p>
<h2 id="accessing-metadata">Accessing metadata</h2><p>Video objects are sub-classes of Attachments but with a few extra properties.</p>
<table>
<thead><tr>
<th>Attribute</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>width</code></td>
<td>Video height in pixels</td>
</tr>
<tr>
<td><code>height</code></td>
<td>Video height in pixels</td>
</tr>
<tr>
<td><code>duration</code></td>
<td>Video length as a <a href="https://docs.python.org/3/library/datetime.html"><code>datetime.timedelta</code></a> instance</td>
</tr>
</tbody>
</table>
<p>Example:</p>
<div class="hll"><pre><span></span><span class="cp">{%</span> <span class="k">set</span> <span class="nv">video</span> <span class="o">=</span> <span class="nv">this.attachments.videos.first</span><span class="o">()</span> <span class="cp">%}</span>
<span class="p"><</span><span class="nt">video</span> <span class="na">src</span><span class="o">=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">video</span><span class="o">|</span><span class="nf">url</span> <span class="cp">}}</span><span class="s">"</span><span class="p">></span>
<span class="p"><</span><span class="nt">dl</span><span class="p">></span>
<span class="p"><</span><span class="nt">dt</span><span class="p">></span>Width:<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
<span class="p"><</span><span class="nt">dd</span><span class="p">></span><span class="cp">{{</span> <span class="nv">video.width</span> <span class="cp">}}</span> px<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
<span class="p"><</span><span class="nt">dt</span><span class="p">></span>Height:<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
<span class="p"><</span><span class="nt">dd</span><span class="p">></span><span class="cp">{{</span> <span class="nv">video.height</span> <span class="cp">}}</span> px<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
<span class="p"><</span><span class="nt">dt</span><span class="p">></span>Duration:<span class="p"></</span><span class="nt">dt</span><span class="p">></span>
<span class="p"><</span><span class="nt">dd</span><span class="p">></span><span class="cp">{{</span> <span class="nv">video.duration.total_seconds</span><span class="o">()</span> <span class="cp">}}</span> s<span class="p"></</span><span class="nt">dd</span><span class="p">></span>
<span class="p"></</span><span class="nt">dl</span><span class="p">></span>
</pre></div>
<h2 id="generating-thumbnails">Generating thumbnails</h2><p>The main difference between video and image attachments is how thumbnails are handled. Since a video basically is a long sequence of images you must first choose where in the video the thumbnail should be generated. This is done using the `.frame() method. There are multiple ways of calling it:</p>
<table>
<thead><tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>frame()</code></td>
<td>Use a frame from the middle of the video <em>(default)</em></td>
</tr>
<tr>
<td><code>frame(seek: float)</code></td>
<td>Fraction between 0.0 and 1.0 of the video duration from where to extract the frame. The value <code>0.5</code> means that the middle of the video will be used. It can be seen as a shorthand for <code>video.frame(video.duration * seek)</code>.</td>
</tr>
<tr>
<td><code>frame(seek: datetime.timedelta)</code></td>
<td>Use a frame at the given seek distance from the beginning of the video. This is useful when you want to seek a fix time into a video.</td>
</tr>
</tbody>
</table>
<p>Calling this method will return a <code>VideoFrame</code> instance, which is not usable by itself. It does however just like an image have a thumbnail method.</p>
<p>Example:</p>
<div class="hll"><pre><span></span><span class="cp">{%</span> <span class="k">set</span> <span class="nv">video</span> <span class="o">=</span> <span class="nv">this.attachments.videos.first</span><span class="o">()</span> <span class="cp">%}</span>
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">video.frame</span><span class="o">()</span><span class="nv">.thumbnail</span><span class="o">(</span><span class="m">300</span><span class="o">,</span> <span class="m">200</span><span class="o">,</span> <span class="nv">mode</span><span class="o">=</span><span class="s2">"crop"</span><span class="o">)|</span><span class="nf">url</span> <span class="cp">}}</span><span class="s">"</span><span class="p">></span>
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">video.frame</span><span class="o">(</span><span class="m">0.1</span><span class="o">)</span><span class="nv">.thumbnail</span><span class="o">(</span><span class="m">300</span><span class="o">,</span> <span class="m">200</span><span class="o">,</span> <span class="nv">mode</span><span class="o">=</span><span class="s2">"crop"</span><span class="o">)|</span><span class="nf">url</span> <span class="cp">}}</span><span class="s">"</span><span class="p">></span>
</pre></div>
<p>Note that unlike images it is not possible to get an URL to a video frame directly:</p>
<div class="hll"><pre><span></span><span class="cp">{%</span> <span class="k">set</span> <span class="nv">video</span> <span class="o">=</span> <span class="nv">this.attachments.videos.first</span><span class="o">()</span> <span class="cp">%}</span>
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">video.frame</span><span class="o">()|</span><span class="nf">url</span> <span class="cp">}}</span><span class="s">"</span><span class="p">></span> <span class="cm"><!-- This is not valid --></span>
</pre></div>
<div class="comment-box">
<h2>Comments</h2>
<div id="disqus_thread"></div>
<script>
var disqus_config = function() { this.page.identifier = "/docs/templates/videoops"; this.page.url = "https://www.getlektor.com/docs/templates/videoops/"; };
(function() {
var d = document, s = d.createElement('script');
s.src = '//lektordocumentation.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"
rel="nofollow">comments powered by Disqus.</a>
</noscript>
</div>
</div>
</div>
</div>
</div>
<div class="bottomsummary">
<div class="container">
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-4 icon-bar">
<a href="https://github.com/lektor/lektor/" title="Lektor on GitHub"
><i class="fa fa-github"></i></a>
<a href="https://github.com/lektor/lektor/issues/" title="Report Issues for Lektor"
><i class="fa fa-bug"></i></a>
<a href="https://twitter.com/getlektor" title="Find Lektor on Twitter"
><i class="fa fa-twitter"></i></a>
<a href="https://gitter.im/lektor/lektor" title="Chat on Gitter"
><i class="fa fa-comment"></i></a>
<a href="https://github.com/lektor/lektor-website/tree/master/content/docs/templates/videoops/contents.lr" title="View source for this page"><i class="fa fa-code"></i></a>
</div>
<div class="col-sm-8">
<a href="../../../license/">License & Copyright</a> •
<a href="../../../contact/">Contact</a> •
Made with <i class="fa fa-fw fa-heart" title="Heart"><span hidden>Heart</span></i> in Carinthia
</div>
</div>
</div>
</footer>
<script type=text/javascript src="../../../static/app.js?h=ee15141e" charset="utf-8"></script>
<script>
((window.gitter = {}).chat = {}).options = {
room: 'lektor/lektor',
activationElement: null
};
document.write('<button class="js-gitter-toggle-chat-button">Toggle Chat</button>');
var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
if (dnt != "1" && dnt != "yes") {
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-70822533-1', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
} else {
console.debug("Respecting Do-Not-Track, not running analytics.");
}
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
</body>
</html>