j1-template 2024.3.15 → 2024.3.17

data/lib/starter_web/pages/public/amplitude_yt_tester.adoc

@@ -42,6 +42,15 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
+// Attribute settings for section control
+//
+:ytp-api--description:                  false
+:ytp--example:                          false
+:ytp--audio-player:                     true
+:ms-slider-video--example:              false
+
+:manon-melodie--playlist:               //youtube.com/channel/UCEsIlUzfXYT5AZSOVnbFqsQ
+
 // Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
@@ -58,17 +67,13 @@ resource_options:
 // Page content
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 [role="dropcap"]
-The J1 Template support playing video on web pages by HTML5 Video, the new
-standard of HTML to show videos on webpages.
-
-Modern browsers support the video tag `<video>` for the new HTML5 video
-standard. The previous proprietary de facto standard software like
-_Flash Player_, _Quicktime_, or _Silverlight_ is no longer needed as the
-Jekyll theme J1 provides HTML5 Video support for local video content
-and from online sources on the Internet.
+The J1 Template supports the AmpltidueJS module playing audio from (YouTube)
+video. The Template system provides a plugin (Tech) to mimic AmpliudeJS
+players to control the audio.
 
 // Include sub-documents (if any)
 // -----------------------------------------------------------------------------
+ifeval::[{ytp-api--description} == true]
 [role="mt-4"]
 == YouTube Audio
 
@@ -79,10 +84,9 @@ and from online sources on the Internet.
 // https://www.youtube.com/watch?v=ryxAe4B_3Pg
 // https://www.youtube.com/watch?v=wI1Rr29OCJM
 
-You can embed any YouTube video in your web pages and visitors on your
-site will be able to play and pause the video audio with a simple click.
-With this technique, you can also use a YouTube video as background audio
-that runs in a loop.
+You can embed any YouTube video on your web pages, and visitors can play
+and pause the audio with a simple click. This technique can also be used
+to use a YouTube video as background audio that runs in a loop.
 
 [TIP]
 ====
@@ -93,11 +97,11 @@ http://www.labnol.org/internet/youtube-audio-player/26740/[Embed YouTube as an A
 [role="mt-4"]
 === How to Embed YouTube Audio
 
-It takes just one step to embed a YouTube audio. Open any YouTube video
-and make a note of the YouTube Video ID (a string of 11 characters).
+It takes just one step to embed a YouTube audio. Open any YouTube video and
+make a note of the YouTube Video ID (a string of 11 characters).
 
-Next copy-paste the code below anywhere on your website and replace
-VIDEO_ID with actual ID of your YouTube video.
+Next, copy and paste the code below anywhere on your website, replacing
+VIDEO_ID with the actual ID of your YouTube video.
 
 [source, html]
 ----
@@ -106,53 +110,43 @@ VIDEO_ID with actual ID of your YouTube video.
 <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
 ----
 
-There are few other configuration parameters that you can change depending
-on requirements. For instance, if you set data-autoplay to 1, the audio will
-begin playing immediately on page load. Likewise, set data-loop to 1 and the
-audio will play continuously in a never-ending loop until manually stopped.
+The following example is using the YouTube JavaScript API, which renders a
+regular YouTube player with the width and height set to *0 pixels*. When
+the user clicks the audio button, it toggles the existing YouTube player state,
+and the video begins to play or pauses.
 
-This internally renders the YouTube video using the IFRAME player and would
-thus work on both desktop and mobile browsers. The JavaScript files are hosted
-on Github while the images are hosted on Imgur. It is recommended that you
-copy the assets to your own server before deploying on a heavy-traffic website.
+Here’s the annotated version of the source code. It can be extended to embed
+YouTube playlists; the default playback volume can be changed, or you even
+https://www.labnol.org/internet/embed-part-of-youtube-video/27948/[embeda part, {browser-window--new}]
+of the video.
 
 [role="mt-4"]
 === Technical Details
 
-We are using the YouTube JavaScript API that renders a regular YouTube player
-but with the width and height set to *0 pixels*. When the user clicks the
-audio button, it toggles the existing YouTube player state and the video
-begins to play or pauses.
-
-Here’s the annotated version of the source code. It can be extended to embed
-YouTube playlists, the default playback volume can be changed or you even
-https://www.labnol.org/internet/embed-part-of-youtube-video/27948/[embeda part, {browser-window--new}]
-of the video.
+lorem:sentences[5]
+endif::[]
 
-////
+ifeval::[{ytp--example} == true]
 [role="mt-5"]
-=== YT Player
+== YT Player Example
 ++++
-<!-- 1. The <iframe> (and video player) will replace this <div> tag.            -->
+<!-- the <iframe> (video player) will replace this <div> tag                    -->
 <!-- =========================================================================== -->
 <div style="display:flex;justify-content:center;align-items:center;">
   <div id="youtube-audio1" data-video="WxcWO9O4DSM" data-autoplay="0" data-loop="1"></div>
   <div id="youtube-audio2" data-video="zAmDwCz2BOs" data-autoplay="0" data-loop="1"></div>
-  <!-- div id="youtube-audio2"></div -->
   <div id="youtube-audio3" data-video="ryxAe4B_3Pg" data-autoplay="0" data-loop="1"></div>
   <div id="youtube-audio4" data-video="wI1Rr29OCJM" data-autoplay="0" data-loop="1"></div>
 </div>
-++++
 
-++++
 <script>
   $(function() {
 
-    // Load the IFrame Player API code asynchronously.
+    // load the IFrame Player API code (asynchronously)
     var techScript;
 
     var tech    = document.createElement('script');
-    tech.src    = "/assets/theme/j1/modules/amplitudejs/js/tech/youtube.js";
+    tech.src    = "/assets/theme/j1/modules/amplitudejs/js/tech/youtube_example.js";
     techScript  = document.getElementsByTagName('script')[0];
 
     techScript.parentNode.insertBefore(tech, techScript);
@@ -160,33 +154,66 @@ of the video.
   });
 </script>
 ++++
-////
+endif::[]
 
+
+ifeval::[{ytp--audio-player} == true]
 [role="mt-5"]
-== Amplitude Player
+== Amplitude YT Player
 
-lorem:sentences[5]
+The example below demonstrates playing only the *Audio* track from YouTube
+Video using an AmplitudJS player. The J1 template uses the video *plugin* ytp
+to extend the native functionality of the AmplitudeJS API to playback YouTube
+files for the audio part.
 
-.Mimi Rutherfurt · Maritim Verlag (YouTube)
-amplitude::mimi_rutherfurt_yt_large[role="mt-4 mb-8"]
+[role="mt-4 mb-5"]
+[TIP]
+====
+Find complete playlist for the example of Manon Mélodie on link:{manon-melodie--playlist}[YouTube, {browser-window--new}].
+====
 
-++++
-<script>
-  $(function() {
+// [role="mt-4"]
+// [[manon_melodie]]
+// === Manon Mélodie
 
-    // Load the IFrame Player API code asynchronously.
-    var techScript;
+// lorem:sentences[3]
 
-    var tech    = document.createElement('script');
-    tech.src    = "/assets/theme/j1/modules/amplitudejs/js/tech/ytp.js";
-    techScript  = document.getElementsByTagName('script')[0];
+// .Manon Mélodie · YouTube 2024
+// amplitude::manon_melodie_yt_large[role="mt-4 mb-5"]
 
-    techScript.parentNode.insertBefore(tech, techScript);
+[role="mt-4"]
+=== Mimi Rutherfurt
 
-  });
-</script>
-++++
-////
+lorem:sentences[3]
+
+.Mimi Rutherfurt · Maritim Verlag
+amplitude::mimi_rutherfurt_yt_large[role="mt-4 mb-5"]
+
+// [role="mt-4"]
+// [[faelle_des_bnd]]
+// === Die größten Fälle des BND
+
+// lorem:sentences[3]
+
+// .Die größten Fälle des BND · Maritim Verlag
+// amplitude::faelle_des_bnd_yt_large[role="mt-4 mb-5"]
+
+endif::[]
+
+[role="mb-8"]
+[CAUTION]
+====
+Playing audio tracks is currently supported only for videos from YouTube (YT).
+The YT plugin *ytp* embeds a YouTube (iframe) player and mimics the AmplitudeJS
+player buttons and controls to manage a *playlist* of video the same as known
+for native audio files.
+
+Note, AmplitudeJS YT Player can only be used with the J1 Template. Currently,
+only AJS players of type *compact* and *large* are supported.
+====
+
+
+ifeval::[{ms-slider-video--example} == true]
 [[ms_video]]
 == MS Slider using YouTube Video
 
@@ -197,7 +224,7 @@ masterslider::ms_00010[role="mt-4 mb-5"]
 
 
 [role="mt-5"]
-== YouTube Video
+=== YouTube Video
 
 YouTube is a popular online video-sharing platform that allows users to
 upload, view, share, and comment on videos. The platform provides services
@@ -208,11 +235,11 @@ youtube::q3zqJs7JUCQ[poster="//img.youtube.com/vi/q3zqJs7JUCQ/maxresdefault.jpg"
 
 
 [role="mt-5"]
-== Local Video
+=== Local Video
 
 VideoJS provides a flexible and customizable platform for displaying and
 controlling MPEG 4 video content on websites and web applications.
 
 .Video over VideoJS
 gallery::jg_video_html5_videojs[role="mt-4 mb-5"]
-////
+endif::[]

data/lib/starter_web/pages/public/manuals/integrations/amplitudejs/amplitudejs-api.adoc

@@ -27,7 +27,7 @@ regenerate:                             false
 personalization:                        true
 permalink:                              /pages/public/manuals/integrations/amplitudejs/amplitudejs_api/
 
-resources:                              [ amplitudejs ]
+resources:                              [ amplitudejs, rouge ]
 resource_options:
   - toccer:
       collapseDepth:                    3