Blog Signup

EverWeb Widgets Podcast

MP4 & VideoJS Podcast Episode

Video Podcast Episode

These widgets for creating a podcast episode are for displaying an MP4 video. The first one plays MP4 video natively in the browser using the HTML5 <video> element and the one below it uses the VideoJS script.
Both of these methods have their advantages and disadvantages. Using HTML5 video is more efficient in that it doesn't require any supporting scripts but it displays differently in each browser.
The VideoJS version has the advantage of a uniform appearance in all browsers and has extra features like initial volume, pause a video when another is played and the ability to hide the fullscreen control.

MP4 Video

Blender Foundation

Date: May 6th 2019

Run Time: 0:52

The container is full width, responsive with a maximum width setting. The grid layout has two columns - one with the video and the other with the info and optional download link.

© Blender Foundation -

VideoJS

Blender Foundation

August 18th 2015

Run Time: 3:52

The video is inserted using the VideoJS script so it video has a uniform appearance in all browser.s

© Blender Foundation -

Layout

The layout consists on an HTML5 <video> element to display the video and and a text section. The Video video can be positioned to the left or right when viewed on wider screens.
The text section has fields for the episode title, author, date, run time and description. The optional copyright field has a control to add the year and keep it updated.
The vertical spacing of the text items can be adjusted.
Link
The optional link is absolutely positioned at the top right of the content area and is used to allow visiors to download a ZIP file containing the video. The icon is an SVG so it can be styled for color and hover color.
The link can be configured to download a zip file which has been added to the EverWeb Assets or to download a file from a folder on the server. If publishing to a server other than the EverWeb one, the latter method is preferable.
ZIP
The .zip file can be created using the "Compress" function in the Finder's File menu but this is not very satisfactory for visitors who are using a device with the Microsoft OS. Check out the free Yemu Zip software for quickly creating PC compatible zip files.

Yemu Zip

EverWeb Widgets Blog
All Rights Reserved
© EverWeb Widgets -