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 <video
autoplay="" autoplay=""
poster="{{ banner_image }}" poster="{{ banner_image }}"
playsinline
> >
<source src="{{ banner_video }}"> <source src="{{ banner_video }}">
</video> </video>
@ -76,19 +77,17 @@
(function() { (function() {
var video = document.querySelector('.page-banner .page-banner-img > video'); var video = document.querySelector('.page-banner .page-banner-img > video');
var videoPlay = function() { var videoPlay = function() {
try { video.play().catch (function() {
video.play(); video.muted = true;
} catch (e) { video.play();
console.error(e); });
}
window.removeEventListener('focus', videoPlay);
} }
window.addEventListener('focus', videoPlay);
video.onloadstart = function() { video.onloadstart = function() {
video.volume = {{ banner_volume }};
video.currentTime = {{ banner_start_at }}; video.currentTime = {{ banner_start_at }};
video.volume = {{ banner_volume }};
video.muted = (video.volume == 0);
videoPlay();
} }
video.onended = function() { video.onended = function() {