fix: 🐛 fire onMount event before attempting to play video

Author: streamich

src/Media/index.ts

@@ -87,16 +87,20 @@ export class Media<P extends IMediaProps<M>, S extends IMediaState, M extends IM
   };
 
   componentDidMount () {
-    if (this.props.autoPlay && this.el.paused) {
-      this.play();
-    }
+    this.el.setAttribute('playsinline', '');
 
     this.setState({
       volume: this.el.volume,
       muted: this.el.muted,
     });
 
     this.event('onMount')(this);
+
+    // We run this code after `onMount` event to allow user
+    // to set `playsinline` attribute, if needed.
+    if (this.props.autoPlay && this.el.paused) {
+      this.play();
+    }
   }
 
   componentWillUnmount () {
@@ -251,9 +255,9 @@ export class Media<P extends IMediaProps<M>, S extends IMediaState, M extends IM
     const {tag = this.tag, children, render, noJs, onMount, onUnmount, ...rest} = props as any;
 
     return h(tag, {
+      controls: false,
       ...rest,
       ref: this.ref,
-      controls: false,
       onAbort: event('onAbort'),
       onCanPlay: this.onCanPlay,
       onCanPlayThrough: event('onCanPlayThrough'),

src/Video/__story__/story.tsx

@@ -73,4 +73,17 @@ storiesOf('UI/Video', module)
         border: '1px solid tomato'
       }}
     />
+  )
+  .add('autoplay on iOS', () =>
+    <Video
+      src={src}
+      autoPlay
+      onMount={(event, {el}) => {
+        el.setAttribute('playsinline', '');
+      }}
+      style={{
+        width: 400,
+        border: '1px solid tomato'
+      }}
+    />
   );