Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(media): support audio and video tag with multi sources #1618

Merged
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 %}
MrMurdock11 marked this conversation as resolved.
Show resolved Hide resolved
MrMurdock11 marked this conversation as resolved.
Show resolved Hide resolved
{%- 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.
MrMurdock11 marked this conversation as resolved.
Show resolved Hide resolved
> 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`.
MrMurdock11 marked this conversation as resolved.
Show resolved Hide resolved

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.
MrMurdock11 marked this conversation as resolved.
Show resolved Hide resolved
> 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