Adding playsinline by default

#16
BKWLD · May 30, 2018 · 8dd9ac2 · 8dd9ac2
1 parent 5cd1dbf
commit 8dd9ac2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -235,6 +235,8 @@ Videos may also be rendered using the same `background` settings.  Thus, you can
 
 This creates a Visual component with a 16:9 aspect ratio and immediately loads a low rez poster image.  Once it loads completely, it will fade in.  When the Visual enters the viewport, the `image` image will load in.  When it completes, it will fade in and, if the Visual is still in the viewport, the `video` will load.  Once enough has loaded that it can play without interruption, the video will fade in and begin playing (with looping) until it is scrolled out of the viewport.
 
+This package sets [playsinline](https://webkit.org/blog/6784/new-video-policies-for-ios/) automatically and uses [iphone-inline-video](https://github.com/bfred-it/iphone-inline-video) to add support to iOS 8 and 9.  Note, to autoplay inline on Android, make sure to also set the `muted` attribute.
+
 
 ### Show a fallback on non-autoplaying devices
 

diff --git a/examples/playsinline/index.html b/examples/playsinline/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<div id="app">
+
+	<visual
+		video='/resources/video.mp4'
+		autoplay
+		loop
+		muted
+		class='test-video'>
+	</visual>
+	<p>Note, there is no e2e test for this, but making this example for testing during devleopment.</p>
+
+</div>
+<script src="/_build/app.js"></script>
+<link rel="stylesheet" href="/app.css">
diff --git a/index.vue b/index.vue
@@ -78,6 +78,7 @@
 				:controls='controls'
 				:loop='loop'
 				:muted='muted'
+				playsinline
 				ref='video'
 				preload='auto'
 				:aria-label='alt')

diff --git a/src/video.coffee b/src/video.coffee
@@ -47,7 +47,7 @@ module.exports =
 			return false
 
 		# Test whether the device can autoplay video
-		canAutoplayVideo: -> !navigator.userAgent.match /Mobile|Android|BlackBerry/i
+		canAutoplayVideo: -> !navigator.userAgent.match /BlackBerry/i
 
 		# Turn video sources into an array of URls
 		videoSources: -> switch