The J1 Template system supports playing audio and video on web pages using HTML5, the current standard. Visitors can play audio and video files without the need for an external player.
Modern browsers support the video tag <video>. The previous proprietary
software, like Flash Player, Quicktime, Silverlight is no longer needed
as the J1 Template provides audio and video support for local video files
and online sources.
10-15 Minutes to read
HTML 5 Player
HTML5 video opens the doors to how to present video content on your web.
All modern browsers support the video tag <video>. Browsers already have
a built-in multimedia framework for decoding and displaying video content.
Two types of video sources are supported:
-
Video files from local folders (your webspace)
-
Video files from Online sources (on the Internet) like YouTube, Wistia, Dailymotion etc.
Standalone video players embedded in websites are software components that integrate and play video sources directly within a page or application. These players are essential for all current sites and apps. Embedded players provide a seamless and user-friendly way to present multimedia content to your audience.
All modern browsers universally support the video tag <video>. This tag
offers an out-of-the-box framework for decoding and displaying video content
without loading external players.
VideoJS Player
VideoJS is a free-to-use open-source JavaScript framework for building custom video players for the web. Implementing VideoJS for the J1 Template supports local video and several platforms, such as YouTube, Vimeo, Wistia, or Dailymotion, for presenting videos online.
For online sources, VideoJS uses plugins, such as the so-called VJS Playback Technology. With the help of plugins, it is possible to present different media using the same player, the same look and feel for a better user experience.
Local Video
VideoJS provides a flexible and customizable platform for displaying and controlling MPEG 4 video content on websites and web applications.
YouTube
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.
See below Adele’s opening concert in Munich’s specially built open-air arena, and tens of thousands celebrated with her. It is an extraordinary concert series: a pop-up stadium tailored to her needs was built specifically for her and long catwalks bring Adele closer to her fans.
The arena, shaped like an amphitheater, is decorated in black and white and is dominated by a 220-meter-long and 17-meter-high screen. Find below the first 45 minutes of her opening concert in August 2024 at the Adele World, Munich.
Pop icon Taylor Swift thrilled more than 70,000 fans at a sold-out concert at the Olympic Stadium in Munich. But the enthusiasm for the US star extended far beyond the stadium.
Taylor Swift recognized the unusual situation in Munich and, at the beginning of her concert, greeted not only the fans in the stadium but also the thousands who had gathered in the park in front of the stadium.
That evening, Taylor Swift took her fans through her long career. For over three hours, the pop queen played 45 songs, album by album, the so-called Eras. Taylor Swift concluded the show with a spectacular fireworks display. See impressions of this emotional event below.
Dailymotion
The Dailymotion platform is a monetization solution directly connecting to high-quality advertisers through a proprietary advertising system. Like YouTube, videos can be watched for free, but ads are shown on every video.
Vimeo
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.
|
Video controls
For the VJS Vimeo Tech, native vjs controls (controllbar) are currently NOT supported. Instead, the controllbar of the Vimeo Player is shown. |
Galleries of Video
Video galleries are collections that display videos organized around a specific theme, topic, or purpose. The gallery module (lightGallery) for J1 Template is a fast, modular, and responsive plugin for creating beautiful-looking, featured image and video galleries.
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. |
Find below examples of video galleries of locally stored (MP4) video resources and video content provided online.
Masonry
Masonry for J1 Template is a great tool for creating dynamic video galleries. The module makes creating a gallery to display videos of different types easy.
|
More about Masonry
Find more on how the Masonry module can be used on the Masonry Preview page. |
Local 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 media files is limited to 50 MegaByte. Using a modern MP4 Encoder for video compression, a video will play around 3-5 minutes for HD 1080p (1920x1080 pixel) or up to 10 minutes for HD 720p (1280x720 pixel). |
YouTube
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 YouTube channels is enormous. Today, it’s a must for TV stations or musicians to publish videos of their shows or songs on YouTube.
A really great channel at YouTube is presented by Taylor Swift for her new studio album The Tortured Poets Department: The Anthology, released on April 19, 2024.
|
An anthology is a collection of selected texts or a thematic compilation of literary or musical works. |
Vimeo
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 enables the operators of websites to present high-quality, professional videos and reach audiences worldwide.
|
A plus using Vimeo is that no advertising is used on that platform. The visitors can focus on the video without being distracted. |
Vimeo offers a basic free membership, but it limits you to 500MB of maximum weekly storage. Alternatively, you can book a paid plan: Plus, PRO, and Business. Each membership has varied storage limits, but the free plan offers sufficient space for private projects to present video content without advertising.
Dailymotion
Dailymotion is a video-sharing platform. The platform is available worldwide in 180+ languages, featuring websites for their video content.
The platform is a monetization solution that allows allows to directly connect to high-quality advertisers through a proprietary Advertising system. Like YouTube, videos can be watched for free, but ads are shown on each and every video.
What next
Images and videos are pretty visual, and they can be impressive, for sure. However, 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 is still fixed. To avoid this issue, especially for heavily text-focused pages, the J1 Template supports a fluidly scaled text that changes in size and line height to optimize readability for the user.
The JekyllOne Template J1 places the character font as one of the most crucial branding elements 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 is great for modern responsive websites.
Find out how it works and go for: Typography, then.