fix: autoplay videos to avoid issues in iOS

package.json

@@ -9,10 +9,10 @@
     "test": "jest",
     "clean": "rm -rf lib",
     "build": "babel src -d lib --copy-files --ignore **/*.stories.js,**/*.spec.js",
-    "prebuild": "npm run clean",
-    "prepublish": "NODE_ENV=production npm run build",
+    "prebuild": "yarn run clean",
+    "prepublish": "NODE_ENV=production yarn run build",
     "precommit": "lint-staged",
-    "start": "npm run storybook",
+    "start": "yarn run storybook",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "travis-deploy-once": "travis-deploy-once",

src/video-recorder.js

@@ -79,7 +79,9 @@ const getVideoInfo = videoBlob =>
     const videoTag = document.createElement('video')
     videoTag.preload = 'metadata'
     videoTag.muted = true
+    videoTag.defaultMuted = true
     videoTag.playsInline = true
+    videoTag.autoplay = true
 
     videoTag.addEventListener('loadeddata', function () {
       const duration = videoTag.duration * 1000
@@ -94,7 +96,6 @@ const getVideoInfo = videoBlob =>
     })
 
     videoTag.src = window.URL.createObjectURL(videoBlob)
-    videoTag.play()
   })
 
 export default class VideoRecorder extends Component {
@@ -474,6 +475,7 @@ export default class VideoRecorder extends Component {
             loop
             muted={isReplayVideoMuted}
             playsInline
+            autoPlay
             onClick={() =>
               this.setState({ isReplayVideoMuted: !isReplayVideoMuted })
             }