add 'playsinline' to all inline videos, dont mute background videos on mobile
parent
cd2a792416
commit
2fccb77405
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||
|
|
|
@ -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', '' );
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue