hernik/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: video banner is not working in Safari (#47)

Browse source 
Auto add muted and playsinline properties when this permission
issue occurred.
This commit is contained in:
jeffreytse 2021-06-27 17:04:20 +08:00
parent b33a39b233
commit 6d4680a527
1 changed files with 8 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
_includes/views/banner.html
View file

@ -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() {