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
mimeType: mpeg
- extension: mov
mimeType: quicktime
- extension: avi
mimeType: x-msvideo
- extension: mkv
mimeType: x-matroska
MrMurdock11 marked this conversation as resolved.
Show resolved Hide resolved
- extension: ogv
mimeType: ogg
- extension: weba
mimeType: webm
- extension: 3gp
mimeType: 3gpp
- extension: 3g2
mimeType: 3gpp2
- extension: mid
mimeType: midi
MrMurdock11 marked this conversation as resolved.
Show resolved Hide resolved
43 changes: 43 additions & 0 deletions _includes/embed/audio.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{% 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 parts = src | split: '/' %}
{% assign filename = parts | last %}
{% assign extension = filename | split: '.' | last %}
{% assign basename = filename | split: '.' | pop | join: '.' %}
{% assign path = parts | pop | join: '/' %}

{% assign media_item = site.data.media | find: 'extension', extension %}
{% if media_item %}
<source src="{{ src }}" type="audio/{{ media_item['mimeType'] }}">
{% else %}
<source src="{{ src }}" type="audio/{{ extension }}">
{% endif %}

{% for extra_type in types %}
{% assign filename = basename | append: '.' | append: extra_type %}
{% assign extra_src = path | append: '/' | append: filename %}
{% assign media_item = site.data.media | find: 'extension', extra_type %}
{% if media_item %}
<source src="{{ extra_src }}" type="audio/{{ media_item['mimeType'] }}">
{% else %}
<source src="{{ extra_src }}" type="audio/{{ extra_type }}">
{% endif %}
{% endfor %}
MrMurdock11 marked this conversation as resolved.
Show resolved Hide resolved

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>
37 changes: 33 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,35 @@
{% 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 parts = video_url | split: '/' %}
{% assign filename = parts | last %}
{% assign extension = filename | split: '.' | last %}
{% assign basename = filename | split: '.' | pop | join: '.' %}
cotes2020 marked this conversation as resolved.
Show resolved Hide resolved
{% assign path = parts | pop | join: '/' %}

{% assign media_item = site.data.media | find: 'extension', extension %}
{% if media_item %}
<source src="{{ video_url }}" type="video/{{ media_item['mimeType'] }}">
MrMurdock11 marked this conversation as resolved.
Show resolved Hide resolved
{% else %}
<source src="{{ video_url }}" type="video/{{ extension }}">
{% endif %}

{% for extra_type in types %}
{% assign filename = basename | append: '.' | append: extra_type %}
{% assign extra_src = path | append: '/' | append: filename %}
{% assign media_item = site.data.media | find: 'extension', extra_type %}
{% if media_item %}
<source src="{{ extra_src }}" type="video/{{ media_item['mimeType'] }}">
MrMurdock11 marked this conversation as resolved.
Show resolved Hide resolved
{% else %}
<source src="{{ extra_src }}" type="video/{{ extra_type }}">
{% endif %}
{% 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>
47 changes: 45 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,13 +472,56 @@ 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
{%
MrMurdock11 marked this conversation as resolved.
Show resolved Hide resolved
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

Expand Down
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