feat(media): support audio and video tag with multi sources (cotes202…

…0#1618)

_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

_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 %}
+
+<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>

_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 %}
 
 <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>

_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;