The J1 Template system support playing audio and video on web pages by HTML5, the new standard of HTML to play audio and video files on webpages natively without the need of any external player.
Modern browsers support the audio tag <audio>
and the video tag <video>
for the current HTML standard. The previous proprietary software like
Flash Player, Quicktime, or Silverlight is no longer needed as J1
provides HTML Audio and Video and VideoJS support for local video and from
online sources on the Internet.
10-15 Minutes to read
HTML5 Audio
Audio players can be embedded in Web pages very easy by using the HTML5 audio
tag <audio>
. Browsers have a built-in multimedia framework for decoding
and playing audio content directly within a webpage.
HTML5 Video
HTML5 video opens the doors to your way of presenting video content on your
web. All modern browsers support the video tag <video>
. Browsers have a
built-in multimedia framework already for decoding and displaying video
content. No need to use proprietary software components anymore.
Two types of video sources are supported:
-
Video files from local folders (your webspace)
-
Video files from online sources (on the Internet) like YouTube, Vimeo, etc.
The combination of a gallery and a lightbox is entirely usable for all the video content you want to present on your site. You can place galleries elsewhere with your content. You can use them for blogs by putting them into your article’s content.
The module lightGallery can be used for free for private use, but a commercial license is required for business or commercial websites. See LightGallery Licenses how to use lightGallery for commercial websites and projects. |
Standalone Players
Video players embedded in Web pages are software components that integrate and play videos directly within a web page or application. These players are essential for websites, blogs, and apps that want to display video content without requiring users to download the video file or use any external media player.
Embedded video players provide a seamless and user-friendly way to present video content to your audience.
HTML5 Player
Modern browsers support the video tag <video>
for the current version of
HTML. The browsers support a framework for decoding and displaying video
content.
VideoJS Player
VideoJS is an Open Source JavaScript framework and library for building custom video players for the web. It provides a flexible and customizable platform for displaying and controlling MPEG 4 video content on websites and web applications.
YouTube on VideoJS
YouTube is a popular online video-sharing platform that allows users to upload, view, share, and comment on videos. The platform provides services for people and organizations to publish various video content.
Wistia on VideoJS
Wistia is a marketing software and video hosting platform made for B2B marketers with free or paid plans available. While Wistia may not be the Big Man on Campus like Vimeo, it still brings valuable functionality to the table for marketers and should be seriously considered as a viable video platform.
Vimeo on VideoJS
Vimeo is an sharing platform that allows users to upload, share, and view video content. It was founded in 2004 by a group of filmmakers and has since grown into a popular platform for individuals and businesses to showcase their videos. Vimeo is known for its emphasis on high-quality videos and creative expression.
Galleries of Video
Video galleries are collections to display videos organized around a specific theme, topic, or purpose. The gallery module (lightGallery) for J1 Template is a fast, modular, and responsive plugin to create beautiful-looking, featured image and video galleries.
Find below examples of video galleries of locally stored (MP4) video resources and video content provided online via YouTube.
Masonry Grid
Masonry for J1 is a great tool to create dynamic video galleries as well. By using the Masonry module, you can create a gallery that displays video of different type.
More about Masonry
Find more on how the Masonry module can be used on the Masonry Preview page. |
MP4 Video
Videos created by a digicam or a mobile can be played by J1 Template using the lightGallery integration. Present videos you have made at it’s best.
The current file size of Local Video is limited to 50MB (Git LFS limit). Using a modern MP4 Encoder (H264|H265 compression), a video will have a playing time of around ~3-5 minutes for HD 1080p (1920x1080) or up to ~10 minutes for HD 720p (1280x720) resolution. |
The HTML5 specification does not define which audio and video formats browsers should support. J1 lightGallery can play all standard types of video for the Web like MP4, WebM, or Ogg. |
YouTube Video
The community at YouTube is large, with over 1 billion users that watch hundreds of millions of hours of content every day. The number of channels on YouTube is enormous. For TV Stations, it’s a must to publish videos of their shows on YouTube.
Find below a classic channel Carpool Karaoke presented by the frontman James Corden of The Late Late Show at CBS, Los Angeles.
Vimeo Video
Vimeo is a video-sharing platform that includes features such as live-streaming and customization. Vimeo provides many tools for video creation, editing, and broadcasting. The platform provides you with an excellent channel to present high-quality, professional videos and reach audiences worldwide.
A great plus using Vimeo is that no advertising is used on that platform. |
Vimeo does offer a basic free membership, but it limits you to 500MB maximum storage per week. Alternately, you can book on paid plans: Plus, PRO, Business. Each membership has varied storage limits, but the free plan offers sufficient space for private projects to present video content without advertising.
What next
Images and videos are pretty visual. And it can be impressive, for sure. But the most visual component on all web pages is text, for all sites on the Internet.
Sadly, one common flaw in many templates and frameworks is a lack of support for responsive text. While other elements on a page resize fluidly, the text still resizes fixed. To avoid this issue, especially for heavily text-focused pages, J1 Template supports a fluidly scaled text that changes in size and line height to optimize readability for the user.
The JekyllOne Template places the character font as one of the most crucial branding element for any website. Typography matters for any media presenting text. The text will take on an important role of acting as plain text and as something like images. To see how text could be presented great for modern responsive webs.
Find out how it works and go for: Typography, then.