xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects 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> <section>
<h2>Video</h2> <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>
<section> <section>

11
js/controllers/slidecontent.js
View File

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