Videos and files

Keep a video, a recording or any other file beside the post that shows it, as you keep a picture, or show a video kept on YouTube or Vimeo.

A video or recording beside the post

content/
  post-1/
    index.md
    video-1.mp4
    still-1.jpg
    recording-1.m4a

In post-1/index.md:

@video("video-1.mp4", caption="Video 1", poster="still-1.jpg")

@audio("recording-1.m4a", caption="Recording 1")

Each shows the browser’s own player in a <figure>, with the caption beneath, read as Markdown. The caption also names the player for a reader who can’t see it. A browser with no video player shows a link to download the video.

poster names a picture beside the post, shown until the video plays. A photograph is shown as one of its copies.

Kind	Endings
Video	`.mp4`, `.m4v`, `.webm`, `.ogv`, `.mov`
Recording	`.mp3`, `.m4a`, `.ogg`, `.oga`, `.wav`, `.flac`

A name is found as a picture’s is: beside the file it is written in, or from the top with a /.

A file to download

content/
  post-1/
    index.md
    notes-1.pdf

In post-1/index.md:

[The notes as a PDF](notes-1.pdf)

A file beside the writing that isn’t a page is published as it is, at the same place: notes-1.pdf at /post-1/notes-1.pdf. Hidden files, whose names start with a dot, are left out, and so are the names in the left_behind setting.

A photograph’s own file is published where a page links to it: the photograph itself.

A file shown as code

@file("example.rs")

This shows example.rs, kept beside the post, as a block of coloured code under its name, which is a link to download the file.

The language comes from the file’s name, as on a code block: rs for example.rs, makefile for Makefile. A file Statac has no colours for is shown as it is. A file that isn’t UTF-8 text, or is larger than 200,000 bytes, is shown as the link alone.

The page needs the stylesheet Statac writes for code. To colour text that is in no file, use the highlight filter.

A video kept on YouTube or Vimeo

@youtube("https://www.youtube.com/watch?v=abcdefghijk", caption="Video 1")

@vimeo("https://vimeo.com/123456789")

Each shows a still picture of the video, and loads the video site’s player only when a reader presses play. YouTube’s player comes from youtube-nocookie.com.

Write	Shows
An address YouTube gives for one video, such as `https://youtu.be/abcdefghijk`, or its id alone, `abcdefghijk`	The video.
An address with a start, `https://youtu.be/abcdefghijk?t=1m30s`	The video from that point.
A video in a playlist, `https://www.youtube.com/watch?v=abcdefghijk&list=PL0123456789`	The video, in its playlist.
`https://www.youtube.com/embed/videoseries?list=PL0123456789`	The playlist, with no still.
`https://vimeo.com/123456789`, or `123456789`	The Vimeo video.

The still

statac refresh

Fetched `fetched/stills/youtube-abcdefghijk.jpg`.
Fetched 1 still.

The still is fetched once, by statac refresh or by statac serve as it starts, and kept in fetched/stills/. A build never fetches: until the still is there, the button shows only its words.

To show a picture of your own instead, hand it to the snippet as poster:

@youtube("abcdefghijk", poster="still-1.jpg")

The video’s own still is then never read. @vimeo takes poster too. Fetching from other sites has the rest.

Pressing play

Pressing the still puts the player where it was, asks it to start the video, and moves the reader to it.

Note:

Safari, and most browsers on phones, start a video with sound only on a press inside the player itself. A reader there presses twice: once on the still, once on the player.

For a reader who can’t see the still, the button is named by the caption: “Play Video 1” for caption="Video 1". A title, as title="Video 1", names it another way. With neither, it says “Play the video”.

A few lines of JavaScript at the foot of snippets/youtube.html and snippets/vimeo.html do this, yours to change or remove. In a browser that runs no scripts, the still is a link to the player.

Files and videos in a template

A template or snippet asks a page for a file beside it by name, found as a picture’s is.

Ask	For	Gives
`page.file("notes-1.pdf")`	Any file	`url`, where it is published; `name`, its file name; `size`, in bytes; `text`, what a file of text holds; `code` and `language`.
`page.video("video-1.mp4")`	A video a browser plays	`src`, where it is published; `type`, as a `<source>` names it.
`page.audio("recording-1.m4a")`	A recording	`src` and `type`.
`page.youtube(address)`, `page.vimeo(address)`	An address, or an id alone	`id`, `start`, `embed` and `still`.

{{ page.file("drawing-1.svg").text | safe }} writes an SVG into the page itself.

Field	What it is
`language`	The language the file’s name gives. Empty where Statac has no colours for it.
`code`	What the file holds, coloured as that language, as the inside of a `<code>`. Nothing for a file that isn’t UTF-8 text or is larger than 200,000 bytes.
`id`	The video’s id.
`start`	The second the address says to start at, as `t=1m30s` does.
`embed`	The player’s address, for an `<iframe>`, starting there.
`still`	The fetched still, as `page.photo` gives a picture.

A start or a still that isn’t there has no value: ask with {% if video.still %}, or give one, as {{ video.start | default(0) }}.

The starter lists a new site’s snippets for each of these.

Where next?

Pictures: photographs, their copies and their descriptions
Fetching from other sites: statac refresh, fetched/ and its record
Snippets: calls in the writing, and snippets of your own
The starter: every snippet a new site has