feat: support video banner

This commit is contained in:
jeffreytse 2021-06-26 12:05:19 +08:00
parent 29f69dcc2a
commit 11edca1890
4 changed files with 70 additions and 4 deletions

View file

@ -42,3 +42,27 @@
{%- include functions.html func='get_value' -%}
{% assign banner_subheading_style = return %}
{%- include functions.html func='log' level='debug' msg='Get banner_video value' -%}
{% assign name = 'banner.video' %}
{%- include functions.html func='get_value' -%}
{% assign banner_video = return %}
{%- include functions.html func='log' level='debug' msg='Get banner_loop value' -%}
{% assign name = 'banner.loop' %}
{%- include functions.html func='get_value' default=true -%}
{% assign banner_loop = return %}
{%- include functions.html func='log' level='debug' msg='Get banner_volume value' -%}
{% assign name = 'banner.volume' %}
{%- include functions.html func='get_value' default=0 -%}
{% assign banner_volume = return %}
{%- include functions.html func='log' level='debug' msg='Get banner_start_at value' -%}
{% assign name = 'banner.start_at' %}
{%- include functions.html func='get_value' default=0 -%}
{% assign banner_start_at = return %}
{% if banner_image or banner_video %}
{% assign has_banner = true %}
{% endif %}

View file

@ -15,7 +15,7 @@
{%- include functions.html func='get_banner' -%}
{%- if banner_image -%}
{%- if has_banner -%}
{%- if banner_background -%}
<style>
html .page-banner {
@ -65,8 +65,45 @@
{%- endif -%}
<section class="page-banner">
<div class="page-banner-img">
{%- if banner_video -%}
<video
autoplay=""
poster="{{ banner_image }}"
>
<source src="{{ banner_video }}">
</video>
<script>
(function() {
var video = document.querySelector('.page-banner .page-banner-img > video');
var videoPlay = function() {
try {
video.play();
} catch (e) {
console.error(e);
}
window.removeEventListener('focus', videoPlay);
}
window.addEventListener('focus', videoPlay);
video.onloadstart = function() {
video.volume = {{ banner_volume }};
video.currentTime = {{ banner_start_at }};
}
video.onended = function() {
video.currentTime = {{ banner_start_at }};
video.volume = 0;
{%- if banner_loop -%}
video.play();
{%- endif -%}
}
})();
</script>
{%- else -%}
<div style="background-image: url({{ banner_image }})"></div>
<img class="img-placeholder" src="{{ banner_image }}"></div>
<img class="img-placeholder" src="{{ banner_image }}">
{%- endif -%}
</div>
<div class="wrapper">
<div class="page-banner-inner">

View file

@ -6,7 +6,7 @@
{%- include functions.html func='get_value' default=true -%}
{%- assign header_transparent = return -%}
{%- if banner_image and header_transparent -%}
{%- if has_banner and header_transparent -%}
{%- assign header_transparent_class = "site-header-transparent" -%}
{%- endif -%}

View file

@ -575,6 +575,11 @@ html {
transition: 0.1s all ease-in-out;
}
& > video {
width: 100vw;
object-fit: cover;
}
& > img.img-placeholder {
display: none;
}