summaryrefslogtreecommitdiff
path: root/_includes/views
diff options
context:
space:
mode:
authorjeffreytse <jeffreytse.mail@gmail.com>2021-06-27 17:04:20 +0800
committerjeffreytse <jeffreytse.mail@gmail.com>2021-06-27 17:04:20 +0800
commit6d4680a527c4085f9d7a3357afdc0c970dca83c8 (patch)
treebd553e62be54c3a30147f540a38364cb71a37fb0 /_includes/views
parentb33a39b233f16e3c02c0a6ed1e2504340babd276 (diff)
fix: video banner is not working in Safari (#47)
Auto add muted and playsinline properties when this permission issue occurred.
Diffstat (limited to '_includes/views')
-rw-r--r--_includes/views/banner.html17
1 files changed, 8 insertions, 9 deletions
diff --git a/_includes/views/banner.html b/_includes/views/banner.html
index 554a915..1db45a5 100644
--- a/_includes/views/banner.html
+++ b/_includes/views/banner.html
@@ -69,6 +69,7 @@
<video
autoplay=""
poster="{{ banner_image }}"
+ playsinline
>
<source src="{{ banner_video }}">
</video>
@@ -76,19 +77,17 @@
(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);
+ video.play().catch (function() {
+ video.muted = true;
+ video.play();
+ });
}
- window.addEventListener('focus', videoPlay);
-
video.onloadstart = function() {
- video.volume = {{ banner_volume }};
video.currentTime = {{ banner_start_at }};
+ video.volume = {{ banner_volume }};
+ video.muted = (video.volume == 0);
+ videoPlay();
}
video.onended = function() {