j1-template 2024.3.15 → 2024.3.16

data/lib/starter_web/pages/public/tools/previewer/preview_bootstrap_theme.adoc

@@ -85,7 +85,7 @@ resource_options:
 :indicators:                            true
 :indicators_alerts:                     true
 :indicators_badges:                     true
-:scrollbars:                            false
+:scrollbars:                            true
 :progress:                              true
 :progress_basic:                        true
 :progress_contextual_alternatives:      true
@@ -2119,7 +2119,7 @@ browser.
 }
 ----
 
-For the following flavours are implemented.
+The following scrollers are available for the J1 Template.
 
 [subs="attributes"]
 ++++
@@ -2169,10 +2169,9 @@ For the following flavours are implemented.
 </div>
 
 <!-- script>
-<!-- NOTE: $.browser.webkit does NOT exists !!! -->
-if (!$.browser.webkit) {
-  $('.wrapper').html('<p>Sorry! Non webkit browser detected. Scrollbars <b>not</b> displayed :</p>');
-}
+  if (!$.browser.webkit) {
+    $('.wrapper').html('<p>Sorry! Non webkit browser detected. Scrollbars <b>not</b> displayed :</p>');
+  }
 </script -->
 ++++
 endif::[]

data/lib/starter_web/pages/public/tools/previewer/preview_videojs.adoc

@@ -0,0 +1,203 @@
+---
+title:                                  VideoJS
+title_extention:                        Custom Video Players
+tagline:                                Custom Video Players
+
+date:                                   2024-11-10
+#last_modified:                         2024-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
+
+categories:                             [ Previewer ]
+tags:                                   [ Module, Video ]
+
+image:
+  path:                                 /assets/image/icons/videojs/videojs-poster.png
+  width:                                1920
+  height:                               1280
+
+regenerate:                             false
+personalization:                        true
+permalink:                              /pages/public/tools/previewer/videojs/
+
+resources:                              [ videojs ]
+resource_options:
+  - attic:
+      slides:
+        - url:                          /assets/image/icons/videojs/videojs-poster.png
+          alt:                          VideoJS Poster
+---
+
+// 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
+
+// Attributes for section control
+//
+:vjs_plugin_info:                       true
+:native_video:                          false
+:yt_video:                              false
+:vm_video:                              false
+:wt_video:                              true
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+[role="dropcap"]
+The J1 Template support playing audio on web pages by HTML5 Video, the new
+standard of HTML to show videos on webpages. Modern browsers support the
+audio tag `<audio>` for the new HTML5 audio audio standard.
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+
+ifeval::[{vjs_plugin_info} == true]
+[role="mt-5"]
+== VJS Plugins
+
+The J1 Template provides a collection of plugins to enhance VJS players, such
+as by providing useful functions like additional buttons or advanced keyboard
+support to control a player by defined keys (hotkeys).
+
+[role="mt-4"]
+=== hotKeys
+
+The *hotkeys* plugin for Video.js enables *keyboard hotkeys* when the
+*player has focus*.
+
+* `Space bar` toggles play|pause.
+* `Right|Left Arrow keys` seek the video forwards and back.
+* Up and Down Arrow keys increase and decrease the volume.
+* `M key` toggles mute/unmute.
+* `F key` toggles fullscreen off and on. Does not work in Internet Explorer,
+  it seems to be a limitation where scripts cannot request fullscreen without
+  a mouse click:
+* Double-clicking with the mouse toggles fullscreen off and on.
+* `Number keys` from *1-9* skip to a percentage of the video:
+  1 is `10%` and 9 is `90%`.
+
+[role="mt-4"]
+=== skipbuttons
+
+The plugin *skipbuttons* add *VJS seek buttons* to the control bar. These
+buttons allow the user to skip forward or back by a configured number of
+seconds.
+
+
+[role="mt-4"]
+=== zoomButtons
+
+Adds a zoom button to player controlbar.
+
+endif::[]
+
+ifeval::[{build_in_video} == true]
+[role="mt-4"]
+== Built-in Player
+
+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*.
+
+.MP4 Video, Peck Pocketed
+video::/assets/video/html5/peck_pocketed.mp4[poster="/assets/video/poster/html5/peck_pocketed.jpg", opts="" role="mt-4 mb-5"]
+endif::[]
+
+
+[role="mt-5"]
+== VJS Players
+
+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.
+
+ifeval::[{native_video} == true]
+[role="mt-4"]
+=== Native Video
+
+VideoJS provides a flexible and customizable platform for displaying and
+controlling MPEG 4 video content on websites and web applications.
+
+.Rolling Wild · MP4 Video
+videojs::/assets/video//html5/rolling_wild.mp4[poster="/assets/video/poster/html5/rolling_wild.jpg", opts="" role="mt-4 mb-5"]
+endif::[]
+
+
+ifeval::[{yt_video} == true]
+[role="mt-4"]
+=== 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.
+
+.Fortnight (feat. Post Malone, Official Music Video) · Taylor Swift
+// youtube::q3zqJs7JUCQ[start="00:01:00" poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg" role="mt-4 mb-5"]
+youtube::q3zqJs7JUCQ[poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg"]
+endif::[]
+
+ifeval::[{wt_video} == true]
+[role="mt-5"]
+=== Wistia
+
+Wistia is a marketing software and video hosting platform for business-to-business
+marketers. Free or paid plans are available. While Wistia may not be the
+*Big Man on Campus*, like Vimeo, still brings valuable functionality and
+should be considered a viable video platform.
+
+.Platform Intro
+// wistia::29b0fbf547[poster="/assets/video/poster/wistia/wistia-black.jpg" role="mt-4 mb-4"]
+wistia::29b0fbf547[poster="auto" role="mt-4 mb-4"]
+// wistia::29b0fbf547[role="mt-4 mb-4"]
+endif::[]
+
+ifeval::[{vm_video} == true]
+[role="mt-5"]
+== 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.
+
+.Forever 21 - Kick It Old School
+vimeo::179528528[poster="/assets/video/poster/vimeo/kick_it_old_school.jpg" role="mt-4 mb-5"]
+// vimeo::179528528[poster="auto" role="mt-4 mb-5"]
+// vimeo::179528528[role="mt-4 mb-5"]
+
+[role="mb-7"]
+.Video controls
+[CAUTION]
+====
+For the *VJS Vimeo Tech*, native vjs controls (controllbar) are currently
+*NOT* supported. Instead, the controllbar of the Vimeo Player is shown.
+====
+endif::[]

data/lib/starter_web/pages/{tour → public/tour}/play_audio.adoc

@@ -163,11 +163,6 @@ amplitude::free_emancipator_compact[role="mt-3 mb-5"]
 .Royalty Free Music · Disco 80th
 amplitude::free_disco_compact[role="mt-3 mb-5"]
 
-lorem:sentences[5]
-
-.Spontanorama 2024 (compact)
-amplitude::spontanorama_2024_compact[role="mt-4 mb-5"]
-
 
 [role="mt-5"]
 == Large Player
@@ -184,15 +179,13 @@ no need to open other widgets.
 .Emancipator · From Dusk To Dawn
 amplitude::free_emancipator_large[role="mt-4 mb-5"]
 
-lorem:sentences[5]
-
 .Royalty Free Music · Disco 80th
 amplitude::free_disco_large[role="mt-4 mb-5"]
 
-lorem:sentences[5]
+// lorem:sentences[5]
 
-.Spontanorama 2024 (large)
-amplitude::spontanorama_2024_large[role="mt-4 mb-5"]
+// .Spontanorama 2024 (large)
+// amplitude::spontanorama_2024_large[role="mt-4 mb-5"]
 
 
 [role="mt-5"]

data/lib/starter_web/pages/{tour → public/tour}/play_video.adoc

@@ -39,24 +39,8 @@ resource_options:
       collapseDepth:                    3
   - attic:
       slides:
-        # Broadway Underground - still image (animate default)
-        - url:                          /assets/video/headers/present_videos/still/underground-broadway.jpg
-          alt:                          Broadway Underground
-          title:                        Video Player
-          tagline:                      Playback Video
-        # Broadway Underground - FAYETTE ST
-        - url:                          /assets/video/headers/present_videos/underground-broadway.mp4
-          alt:                          Broadway Underground Video
-          title:                        Video Player
-          tagline:                      Playback Video
-          isVideo:                      true
-          loop:                         false
-          duration:                     6000
-        # Broadway Underground - still image (animate random)
-        - url:                          /assets/video/headers/present_videos/still/underground-broadway.jpg
-          alt:                          Broadway Underground
-          title:                        Video Player
-          tagline:                      Playback Video
+        - url:                          /assets/image/modules/attics/lianhao-1920x1280.jpg
+          alt:                          Playback Video
 ---
 
 // Page Initializer
@@ -73,6 +57,17 @@ resource_options:
 :time-de--string:                       Minuten
 :time-de--description:                  Lesezeit
 
+
+// Attribute settings for section control
+//
+:ytp_rhythm:                            true
+:ytp_sky_elements:                      true
+:dm_video:                              false
+:vm_video:                              true
+:masonry:                               true
+:dm_gallery:                            true
+:vm_gallery:                            true
+
 //  Load Liquid procedures
 // -----------------------------------------------------------------------------
 {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
@@ -130,7 +125,7 @@ without loading *external players*.
 
 ++++
 <div class="video-title">
-  <i class="mdib mdib-youtube-tv mdib-24px mr-2"></i>
+  <i class="mdib mdib-video mdib-24px mr-2"></i>
   Peck Pocketed · MP4 Video
 </div>
 ++++
@@ -151,7 +146,7 @@ Playback Technology. With the help of *plugins*, it is possible to present
 better user experience.
 
 [role="mt-4"]
-=== Local Video
+=== Native Video
 
 VideoJS provides a flexible and customizable platform for displaying and
 controlling MPEG 4 video content on websites and web applications.
@@ -171,22 +166,30 @@ history of AGT, only a few *Goldern Buzzers* were given. In 2024, this is
 different - for good reasons. See a compilation on YouTube of the very best
 auditions ever.
 
-.AGT 2024 · Best Auditions
+.Best Auditions · AGT 2024 
 youtube::4VSBJU52UvM[poster="//img.youtube.com/vi/4VSBJU52UvM/maxresdefault.jpg" role="mt-4 mb-5"]
 
-Dog Dancing is presented quite often on stage. Like AGT season 18,
-Adrian Stoica presented his dog Hurricane https://www.youtube.com/watch?v=ENGRnUN1UKQ)[Youtube, {browser-window--new}].
-But see Roni Sagi - an Israeli dog trainer - and her dog Rhythm.
-This is Dog Dancing the next level.
+ifeval::[{ytp_rhythm} == true]
+Dog Dancing is presented quite often on stage. Like AGT season 18, Adrian Stoica
+presented his dog Hurricane https://www.youtube.com/watch?v=ENGRnUN1UKQ)[Youtube, {browser-window--new}].
+But see Roni Sagi - an Israeli dog trainer - and her dog Rhythm. This is Dog
+Traing the next level.
 
-.Roni Sagi & Rhythm · ALL Performances (AGT 2024)
+.Roni Sagi & Rhythm, ALL Performances · AGT 2024 
 youtube::1J2qz6B-PFY[poster="//img.youtube.com/vi/1J2qz6B-PFY/maxresdefault.jpg" role="mt-4 mb-5"]
+endif::[]
+
+ifeval::[{ytp_sky_elements} == true]
+Sky Elements uses the night sky as a canvas on which anything is possible.
+A large group of Drones is painting lights in the sky to reflect the most
+captivating narratives. 
 
-// .Fortnight (feat. Post Malone, Official Music Video) · Taylor Swift
-// youtube::q3zqJs7JUCQ[poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg" role="mt-4 mb-5"]
+.Sky Elements, ALL Performances · AGT 2024 
+youtube::cN8IrZUhPtc[poster="//img.youtube.com/vi/cN8IrZUhPtc/maxresdefault.jpg" role="mt-4 mb-5"]
+endif::[]
 
 
-////
+ifeval::[{dm_video} == true]
 [role="mt-4"]
 === Dailymotion
 
@@ -197,9 +200,9 @@ video.
 
 .Beginner Mat Pilates · SELF Channel
 dailymotion::x87ycik[poster="/assets/video/poster/dailymotion/pilates.jpg" role="mt-4 mb-5"]
-////
-
+endif::[]
 
+ifeval::[{vm_video} == true]
 [role="mt-4"]
 === Vimeo
  
@@ -210,7 +213,7 @@ showcase their videos. Vimeo is known for its emphasis on high-quality
 video and creative expression.
 
 .Kick It Old School · Forever 21
-vimeo::179528528[poster="/assets/video/poster/vimeo/kick_it_old_school.jpg" role="mt-4 mb-5"]
+vimeo::179528528[poster="/assets/video/poster/vimeo/kick_it_old_school.jpg" role="mt-4 mb-4"]
 // vimeo::179528528[poster="auto" role="mt-4 mb-5"]
 // vimeo::179528528[role="mt-4 mb-5"]
 
@@ -220,7 +223,7 @@ vimeo::179528528[poster="/assets/video/poster/vimeo/kick_it_old_school.jpg" role
 For the *VJS Vimeo Tech*, native vjs controls (controllbar) are currently
 *NOT* supported. Instead, the controllbar of the Vimeo Player is shown.
 ====
-
+endif::[]
 
 [role="mt-5"]
 == Galleries of Video
@@ -247,6 +250,7 @@ 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.
 
+ifeval::[{masonry} == true]
 [role="mt-4"]
 === Masonry
 
@@ -254,7 +258,7 @@ 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.
 
 .Mixed Video · Masonry + LightGallery
-masonry::mixed_video_example[role="mt-4 mb-5"]
+masonry::mixed_video_example[role="mt-4 mb-4"]
 
 [role="mb-5"]
 .More about Masonry
@@ -263,14 +267,16 @@ masonry::mixed_video_example[role="mt-4 mb-5"]
 Find more on how the Masonry module can be used on the
 link:{url-j1-masonry-previewer}[Masonry Preview, {browser-window--new}] page.
 ====
+endif::[]
 
 [role="mt-4"]
 [[local-video-2]]
-=== Local video
+=== 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.
 
+[role="mb-5"]
 [NOTE]
 ====
 The current file *size* of local video media files is limited to *50 MegaByte*.
@@ -282,10 +288,10 @@ HD 720p (1280x720 pixel).
 .Local MP4 Video · Justified Gallery + LightGallery
 gallery::jg_video_html5[role="mt-4 mb-5"]
 
+ifeval::[{yt_gallery} == true]
 [role="mt-4"]
 === YouTube
 
-[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 YouTube channels is enormous.
@@ -297,7 +303,7 @@ new studio album *The Tortured Poets Department: The Anthology*, released on
 April 19, 2024.
 
 .Taylor Swift - The Tortured Poets Department · Justified Gallery + LightGallery
-gallery::jg_video_online_taylor_swift[role="mt-5 mb-4"]
+gallery::jg_video_online_taylor_swift[role="mt-4 mb-4"]
 
 [role="mb-5"]
 [TIP]
@@ -305,7 +311,9 @@ gallery::jg_video_online_taylor_swift[role="mt-5 mb-4"]
 An *anthology* is a collection of selected texts or, in a broader sense,
 a thematic compilation of literary or musical works.
 ====
+endif::[]
 
+ifeval::[{vm_gallery} == true]
 [role="mt-4"]
 === Vimeo
 
@@ -331,7 +339,9 @@ without advertising.
 
 .Forever 21 · Justified Gallery + LightGallery
 gallery::jg_video_online_vimeo[role="mb-5"]
+endif::[]
 
+ifeval::[{dm_gallery} == true]
 [role="mt-4"]
 === Dailymotion
 
@@ -346,7 +356,7 @@ every video.
 
 .SELF Chanel · Justified Gallery + LightGallery
 gallery::jg_video_online_dailymotion[role="mt-4 mb-5"]
-
+endif::[]
 
 [role="mt-5"]
 == What next
@@ -368,5 +378,4 @@ something like images. To see how text could be presented is great for modern
 responsive websites.
 
 [role="mb-7"]
-Find out how it works and go for:
-link:{url-tour--typography}[Typography], then.
+Find out how it works and go for link:{url-tour--typography}[Typography], then.