---
title:                                  Audio and Video
title_extention:                        Playing HTML5 Audio and Video using J1 Template
tagline:                                Playing Audio and Video files

date:                                   2020-11-04
#last_modified:                         2023-01-01

description: >
                                        The J1 Template support playing video on web pages
                                        by HTML5 Video, the new standard of HTML to show
                                        videos on web pages.
keywords: >
                                        open source, free, template, jekyll, jekyllone, web,
                                        sites, static, jamstack, bootstrap,
                                        html, html5, video, support, flash player,
                                        quicktime, silverlight, videojs,
                                        vimeo, dailymotion, wistia, youtube

categories:                             [ Roundtrip ]
tags:                                   [ Module, Video ]

image:
  path:                                 /assets/videos/headers/present_videos/still/underground-broadway.jpg
  width:                                1920
  height:                               1280

personalization:                        true
regenerate:                             false
permalink:                              /pages/public/learn/roundtrip/present_audio_video/

resources:                              [
                                          animate,
                                          gallery, lightgallery, masonry, rouge,
                                          videojs, vimeoplayer
                                        ]
resource_options:
  - attic:
      slides:

        # Broadway Underground - still image (animate default)
        - url:                          /assets/videos/headers/present_videos/still/underground-broadway.jpg
          alt:                          Broadway Underground
          title:                        Audio and Video
          tagline:                      Playing Audio and Video files
          alignY:                       top
          animateFirst:                 false

        # Broadway Underground - FAYETTE ST, moved file to Github/LFS
        - url:                          /assets/videos/headers/present_videos/underground-broadway.mp4
          alt:                          Broadway Underground Video
          title:                        Audio and Video
          tagline:                      Playing Audio and Video files
          alignY:                       0
          isVideo:                      true
          loop:                         false
          duration:                     12000

        # Broadway Underground - still image (animate random)
        - url:                          /assets/videos/headers/present_videos/still/underground-broadway.jpg
          alt:                          Broadway Underground
          title:                        Audio and Video
          tagline:                      Playing Audio and Video files
          alignY:                       top
          transition:                   push_left|push_right|cover_up|cover_down|fade|fadeInOut
---

// Page Initializer
// =============================================================================
// Enable the Liquid Preprocessor
:page-liquid:

// Set (local) page attributes here
// -----------------------------------------------------------------------------
// :page--attr:                         <attr-value>
:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images

//  Load Liquid procedures
// -----------------------------------------------------------------------------
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}

// Load page attributes
// -----------------------------------------------------------------------------
{% include {{load_attributes}} scope="all" %}


// Page content
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[role="dropcap"]
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.

mdi:clock-time-five-outline[24px, md-gray mt-5 mr-2]
*10-15 Minutes* to read


[role="mt-5"]
== 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.

.Ambient Piano
audio::/assets/audio/sound-effects/ambient-piano.mp3[role="mt-4 mb-5"]

// Include sub-documents (if any)
// -----------------------------------------------------------------------------
[role="mt-5"]
== 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.

[role="mb-4"]
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.

[CAUTION]
====
The module lightGallery can be used for free for private use, but a
*commercial license* is required for business or commercial websites. See
link:{url-light-gallery--license}[LightGallery Licenses, {browser-window--new}]
how to use lightGallery for *commercial* websites and projects.
====

[role="mt-5"]
== 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.

[role="mt-4"]
=== 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.

.MP4 Video, Peck Pocketed
video::/assets/videos/gallery/html5/video1.mp4[poster="/assets/videos/gallery/video1-poster.jpg" role="mt-4 mb-5"]

[role="mt-4"]
=== 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.

.MP4 Video, Rolling Wild
// videojs::/assets/videos/gallery/html5/video2.mp4[start="00:00:50" poster="/assets/videos/gallery/video2-poster.jpg" role="mt-4 mb-5"]
videojs::/assets/videos/gallery/html5/video2.mp4[poster="/assets/videos/gallery/video2-poster.jpg" role="mt-4 mb-5"]


[role="mt-5"]
=== 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.

.The Voice Kids NL 2021 - Emma Kok
youtube::20gXikNRjbo[poster="/assets/videos/gallery/voice_kids_nl_2021/video_poster.jpg" role="mt-4 mb-5"]


/////
[role="mt-4"]
=== Dailymotion on VideoJS

The Dailymotion platform is a monetization solution that 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.

.SELF Channel
dailymotion::x87ycik[role="mt-4 mb-5"]
/////

/////
++++
<iframe frameborder="0" width="480" height="270"
    src="//www.dailymotion.com/embed/video/x87ycik"
    allowfullscreen allow="autoplay">
</iframe>
++++
/////


[role="mt-4"]
=== 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.

.Wistia Video
wistia::29b0fbf547[role="mt-4 mb-4"]


[role="mt-5"]
=== 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.

.Forever 21 Channel
vimeo::179528528[role="mt-4 mb-5"]


[role="mt-5"]
== 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.

[role="mt-4"]
=== 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.

.Grid of Videos
masonry::mixed_video_example[role="mt-4 mb-5"]

.More about Masonry
[TIP]
====
Find more on how the Masonry module can be used on the
link:{url-j1-masonry-previewer}[Masonry Preview, {browser-window--new}] page.
====

[role="mt-4"]
=== 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.

[NOTE]
====
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.
====

.MP4 Videos
gallery::jg_video_html5[role="mt-4 mb-4"]

[role="mb-4"]
[NOTE]
====
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*.
====


[role="mt-5"]
=== YouTube Video

[role="mb-4"]
The community at link:{url-youtube--home}[YouTube, {browser-window--new}] 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.

.Carpool Karaoke
gallery::jg_video_online_youtube_james_and_adele[role="mb-5"]

// [role="mt-4"]
// === TikToc Video
//
// Bla ...
//
// .TikToc Videos
// gallery::jg_video_online_tiktoc[role="mb-5"]

[role="mt-4"]
=== Vimeo Video

[role="mb-4"]
link:{url-vimeo--home}[Vimeo, {browser-window--new}] 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.

[NOTE]
====
A great plus using Vimeo is that *no advertising* is used on that
platform.
====

[role="mt-4 mb-4"]
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.

.Fashion
gallery::jg_video_online_vimeo[role="mb-5"]


/////
[role="mt-5"]
=== DailyMotion Video Galleries

link:{url-dailymotion--home}[Dailymotion, {browser-window--new}] is a French
video-sharing technology platform primarily owned by
link:{url-vivendi--home}[Vivendi, {browser-window--new}]. The platform is
available worldwide in 183 languages and 43 localised versions featuring local
home pages and local content.

[role="mt-4 mb-4"]
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.

[role="mt-4 mb-4"]
Dailymotion allows users to search videos by *tags*, topic *channels*, or
user-created *groups*. Users can upload videos of up to 2 gigabytes and a
length of 60 minutes. If a user is a MotionMaker or MotionPartner, a program
for particularly creative users or partners, they can upload videos of
unlimited length.

.Asciidoc Markup
[source, apib, role="noclip mt-4 mb-4"]
----
gallery::jg_video_online_dailymotion[]
----

.SELF Magazine
gallery::jg_video_online_dailymotion[role="mt-4 mb-5"]

[NOTE]
====
Like YouTube, DailyMotion is a commercial platform using *advertising*
on all video content. On every video, an ad clip is presented of 15 to
30 seconds in length.
====
/////

[role="mt-5"]
== 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.

[role="mb-7"]
Find out how it works and go for:
link:{url-roundtrip--typography}[Typography], then.