jan/revproxy-presentation
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add 'playsinline' to all inline videos, dont mute background videos on mobile

Browse source
This commit is contained in:
Hakim El Hattab 2020-06-16 10:27:09 +02:00
parent cd2a792416
commit 2fccb77405
4 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/reveal.esm.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored
View file

File diff suppressed because one or more lines are too long

6
examples/media.html
View file

@ -33,7 +33,11 @@
<section>
<h2>Video</h2>
<video src="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-autoplay></video>
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-autoplay></video>
</section>
<section data-background-video="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-background-video-muted>
<h2>Background Video</h2>
</section>
<section>

11
js/controllers/slidecontent.js
View file

@ -70,6 +70,11 @@ export default class SlideContent {
sources += 1;
} );
// Enable inline video playback in mobile Safari
if( isMobile && media.tagName === 'VIDEO' ) {
media.setAttribute( 'playsinline', '' );
}
// If we rewrote sources for this video/audio element, we need
// to manually tell it to load from its new origin
if( sources > 0 ) {
@ -111,12 +116,8 @@ export default class SlideContent {
video.muted = true;
}
// Inline video playback works (at least in Mobile Safari) as
// long as the video is muted and the `playsinline` attribute is
// present
// Enable inline playback in mobile Safari
if( isMobile ) {
video.muted = true;
video.autoplay = true;
video.setAttribute( 'playsinline', '' );
}