Video and Audio on Codex Press
Codex was made to take advantage of all the things the web can do to tell a great story and that most certainly includes multimedia. Video and audio assets, not just images and text, are considered first-class citizens on the platform and you can use all of the same tools to manipulate them.
Videos on Codex can be added to stories in the exact same manner as images, by just dragging them into your story. Videos also have the same built-in features for responsive cropping and text blocks.
You’ll notice that once you add a video, there are three toggles available in the editor.
- Autoplay Unlike the browser’s native autoplay functionality, this one is linked to the scroll as in Facebook and other social media applications. The video will start playing once half of it has crossed into the browser window.
- Controls This enables a play/pause button, a mute button (if the video includes an audio track) and a time indicator that lets the user seek the video.
- Loop This is pretty self explanatory. It’s recommended that you loop very short clips that may take a few viewings to absorb.
Note that there is no built-in method for the reader to change the volume of videos on Codex. This is not an oversight. We trust the user to be able to set the volume of their own speakers or headphones using their own device. If Codex had a method to change the volume, they would have to set it in two different places — on the page and in their system audio. Often it’s much easier for them to use their system and this also frees up our pages from a bit of clutter.
When a new visitor comes to your stories, they will have audio disabled so even if your video has autoplay enabled, the user will need to click to enable the sound.
Video clips on mobile present an extra challenge. Mobile browsers until late 2016 did not support autoplay video, requiring that any video be played after the user made a tap on the screen. Even now, the browsers still require that videos begin playing muted — including when other things on the page have already been played with sound enabled.
What’s more is that most video is shot in a horizontal format like a movie screen yet most people hold their phone vertically for comfort in the hand and for reading text. People often have the phone locked in portrait so rotating is not even an option. If your video is meant to be mixed with text, we recommend that you shoot it in a way that allows it to be cropped or use a less extreme aspect ratio.
The next version of the Codex video player will have a fullscreen option but this feature is still in development.
Audio also has the same toggles as a video for autoplay, loop and controls. The behavior on the page is slightly different however.
With controls enabled, readers will see their progress in the audio clip and be able to seek to a specific point. This is usually unnecessary and undesirable for short clips or ambient sounds since it’s quite distracting from other things on the page.
Since by default all first time readers have audio disabled, we must prompt them to play audio—even if the audio is autoplay and even if controls are disabled. Once they’ve opted in to sound, all future audio clips will play automatically as expected. However as with video, we can only play audio in response to a tap on the screen.
Since the audio element itself takes up very little room, autoplay uses the parent element to decide when to play. So if you’d like to play a piece of ambient sound over an image, simply add the audio on top of the image with autoplay enabled and it will play when the reader scrolls the image into view (once they’ve enabled sound on the page).
The same technique could be used for a group of images by adding the images and the audio to the same containing element. If you add the audio to a containing element that’s bigger than the screen, it’s good practice to have the controls stay visible using a sticky or some other means.