diff --git a/_data/media.yml b/_data/media.yml new file mode 100644 index 0000000..9cd69b4 --- /dev/null +++ b/_data/media.yml @@ -0,0 +1,18 @@ +- extension: mp3 + mime_type: mpeg +- extension: mov + mime_type: quicktime +- extension: avi + mime_type: x-msvideo +- extension: mkv + mime_type: x-matroska +- extension: ogv + mime_type: ogg +- extension: weba + mime_type: webm +- extension: 3gp + mime_type: 3gpp +- extension: 3g2 + mime_type: 3gpp2 +- extension: mid + mime_type: midi diff --git a/_includes/embed/audio.html b/_includes/embed/audio.html new file mode 100644 index 0000000..d618890 --- /dev/null +++ b/_includes/embed/audio.html @@ -0,0 +1,35 @@ +{% assign src = include.src | strip %} +{% assign title = include.title | strip %} +{% assign types = include.types | default: '' | strip | split: '|' %} + +{% unless src contains '://' %} + {%- capture src -%} + {% include img-url.html src=src %} + {%- endcapture -%} +{% endunless %} + +

+ + {% if title %} + {{ title }} + {% endif %} +

diff --git a/_includes/embed/video.html b/_includes/embed/video.html index f038938..72ec4fb 100644 --- a/_includes/embed/video.html +++ b/_includes/embed/video.html @@ -1,9 +1,11 @@ {% assign video_url = include.src %} +{% assign title = include.title %} {% assign poster_url = include.poster %} +{% assign types = include.types | default: '' | strip | split: '|' %} {% unless video_url contains '://' %} {%- capture video_url -%} - {% include img-url.html src=video_url img_path=page.img_path %} + {% include img-url.html src=video_url %} {%- endcapture -%} {% endunless %} @@ -31,8 +33,27 @@ {% endif %}

-

diff --git a/_posts/2019-08-08-write-a-new-post.md b/_posts/2019-08-08-write-a-new-post.md index aab434c..0a451fa 100644 --- a/_posts/2019-08-08-write-a-new-post.md +++ b/_posts/2019-08-08-write-a-new-post.md @@ -472,14 +472,59 @@ You can also specify additional attributes for the embedded video file. Here is - `autoplay=true` - video automatically begins to play back as soon as it can - `loop=true` - automatically seek back to the start upon reaching the end of the video - `muted=true` - audio will be initially silenced +- `types` - specify the extensions of additional video formats separated by `|`. Ensure these files exist in the same directory as your primary video file. Consider an example utilizing all of the above: ```liquid -{% include embed/video.html src='video.mp4' poster='poster.png' title='Demo video' - autoplay=true loop=true muted=true %} +{% + include embed/video.html + src='/path/to/video/video.mp4' + types='ogg|mov' + poster='poster.png' + title='Demo video' + autoplay=true + loop=true + muted=true +%} ``` +> It's not recommended to host video files in `assets` folder as they cannot be cached by PWA and may cause issues. +> Instead, use CDN to host video files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`). +{: .prompt-warning } + +## Audios + +### Audio File + +If you want to embed an audio file directly, use the following syntax: + +```liquid +{% include embed/audio.html src='{URL}' %} +``` + +Where `URL` is an URL to an audio file e.g. `/assets/img/sample/audio.mp3`. + +You can also specify additional attributes for the embedded audio file. Here is a full list of attributes allowed. + +- `title='Text'` - title for an audio that appears below the audio and looks same as for images +- `types` - specify the extensions of additional audio formats separated by `|`. Ensure these files exist in the same directory as your primary audio file. + +Consider an example utilizing all of the above: + +```liquid +{% + include embed/audio.html + src='/path/to/audio/audio.mp3' + types='ogg|wav|aac' + title='Demo audio' +%} +``` + +> It's not recommended to host audio files in `assets` folder as they cannot be cached by PWA and may cause issues. +> Instead, use CDN to host audio files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`). +{: .prompt-warning } + ## Learn More For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/). diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index c921619..678db47 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -575,6 +575,13 @@ main { @extend %img-caption; } +.embed-audio { + width: 100%; + display: block; + + @extend %img-caption; +} + /* --- buttons --- */ .btn-lang { border: 1px solid !important;