Skip to content

Commit

Permalink
feat(media): support audio and video tag with multi sources (#1618)
Browse files Browse the repository at this point in the history
  • Loading branch information
MrMurdock11 authored Apr 4, 2024
1 parent 5b73ed8 commit 30a6617
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 6 deletions.
18 changes: 18 additions & 0 deletions _data/media.yml
Original file line number Diff line number Diff line change
@@ -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
35 changes: 35 additions & 0 deletions _includes/embed/audio.html
Original file line number Diff line number Diff line change
@@ -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 %}

<p>
<audio class="embed-audio" controls>
{% assign extension = src | split: '.' | last %}
{% assign types = extension | concat: types %}

{% assign ext_size = extension | size %}
{% assign src_size = src | size %}
{% assign slice_size = src_size | minus: ext_size %}

{% assign filepath = src | slice: 0, slice_size %}

{% for type in types %}
{% assign src = filepath | append: type %}
{% assign media_item = site.data.media | find: 'extension', type %}
{% assign mime_type = media_item.mime_type | default: type %}
<source src="{{ src }}" type="audio/{{ mime_type }}">
{% endfor %}

Your browser does not support the audio tag. Here is a
<a href="{{ src | strip }}">link to the audio file</a> instead.
</audio>
{% if title %}
<em>{{ title }}</em>
{% endif %}
</p>
29 changes: 25 additions & 4 deletions _includes/embed/video.html
Original file line number Diff line number Diff line change
@@ -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 %}

Expand Down Expand Up @@ -31,8 +33,27 @@
{% endif %}

<p>
<video class="embed-video file" src="{{ video_url }}" {{ poster }} {{ attributes }}>
Your browser doesn't support HTML video. Here is a <a href="{{ video_url }}">link to the video</a> instead.
<video class="embed-video file" {{ poster }} {{ attributes }}>
{% assign extension = video_url | split: '.' | last %}
{% assign types = extension | concat: types %}

{% assign ext_size = extension | size %}
{% assign src_size = video_url | size %}
{% assign slice_size = src_size | minus: ext_size %}

{% assign filepath = video_url | slice: 0, slice_size %}

{% for type in types %}
{% assign src = filepath | append: type %}
{% assign media_item = site.data.media | find: 'extension', type %}
{% assign mime_type = media_item.mime_type | default: type %}
<source src="{{ src }}" type="video/{{ mime_type }}">
{% endfor %}

Your browser does not support the video tag. Here is a
<a href="{{ video_url | strip }}">link to the video file</a> instead.
</video>
<em>{{ include.title }}</em>
{% if title %}
<em>{{ title }}</em>
{% endif %}
</p>
49 changes: 47 additions & 2 deletions _posts/2019-08-08-write-a-new-post.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
7 changes: 7 additions & 0 deletions _sass/addon/commons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -575,6 +575,13 @@ main {
@extend %img-caption;
}

.embed-audio {
width: 100%;
display: block;

@extend %img-caption;
}

/* --- buttons --- */
.btn-lang {
border: 1px solid !important;
Expand Down

0 comments on commit 30a6617

Please sign in to comment.