feat: add muted autoplay (#92)

zhihu · May 13, 2019 · 7bbc7da · 7bbc7da
1 parent a1926bf
commit 7bbc7da
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 22 deletions.
diff --git a/example/mp4/App.js b/example/mp4/App.js
@@ -33,6 +33,7 @@ const props = {
   cover: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018.jpg',
   duration,
   sources,
+  autoplay: true,
   shouldObserveResize: true,
   src: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
 }

diff --git a/packages/griffith/README-zh-Hans.md b/packages/griffith/README-zh-Hans.md
@@ -30,6 +30,7 @@ render(<Player {...props} />)
 | `initialObjectFit`    | `fill \| \contain \| cover \| none \| scale-down` | `contain` | object-fit 参数                            |
 | `useMSE`              | `boolean`                                         | `false`   | 是否启用 MSE                               |
 | `locale`              | `en \| ja \| zh-Hans \| zh-Hant`                  | `en`      | 界面语言                                   |
+| `autoplay`            | `boolean`                                         | `false`   | 自动播放（自动播放时会静音）               |
 
 `sources` 字段：
 

diff --git a/packages/griffith/README.md b/packages/griffith/README.md
@@ -31,6 +31,7 @@ render(<Player {...props} />)
 | `initialObjectFit`    | `fill \| contain \| cover \| none \| scale-down` | `contain` | object-fit                                                               |
 | `useMSE`              | `boolean`                                        | `false`   | Enable Media Source Extensions™                                          |
 | `locale`              | `en \| ja \| zh-Hans \| zh-Hant`                 | `en`      | UI Locale                                                                |
+| `autoplay`            | `boolean`                                        | `false`   | Muted Autoplay                                                           |
 
 `sources`:
 

diff --git a/packages/griffith/src/components/Player/Player.js b/packages/griffith/src/components/Player/Player.js
@@ -37,6 +37,7 @@ class Player extends Component {
   static defaultProps = {
     standalone: false,
     duration: 0,
+    autoplay: false,
   }
 
   state = {
@@ -87,6 +88,16 @@ class Player extends Component {
       ACTIONS.PLAYER.PAUSE,
       this.handlePauseAction
     )
+
+    const {autoplay} = this.props
+    if (autoplay && this.videoRef.current.root) {
+      if (!this.videoRef.current.root.muted) {
+        // Muted autoplay is always allowed
+        this.handleVideoVolumeChange(0)
+      }
+
+      this.handlePlay('video')
+    }
   }
 
   componentDidUpdate() {

diff --git a/packages/griffith/src/components/PlayerContainer/PlayerContainer.js b/packages/griffith/src/components/PlayerContainer/PlayerContainer.js
@@ -25,6 +25,7 @@ const PlayerContainer = ({
   initialObjectFit = 'contain',
   useMSE,
   locale = 'en',
+  autoplay,
 }) => (
   <ObjectFitProvider initialObjectFit={initialObjectFit}>
     <PositionProvider shouldObserveResize={shouldObserveResize}>
@@ -37,6 +38,7 @@ const PlayerContainer = ({
                   {({currentSrc}) => (
                     <Player
                       useMSE={useMSE}
+                      autoplay={autoplay}
                       standalone={standalone}
                       cover={cover}
                       title={title}

diff --git a/website/package.json b/website/package.json
@@ -13,8 +13,8 @@
     "gatsby-transformer-remark": "^2.3.11",
     "griffith": "1.4.3",
     "normalize.css": "^8.0.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "16.4.2",
+    "react-dom": "16.4.2",
     "react-helmet": "^5.2.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -12033,16 +12033,6 @@ react-dom@16.4.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react-dom@^16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
-  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.13.6"
-
 react-error-overlay@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
@@ -12126,16 +12116,6 @@ react@16.4.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react@^16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
-  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.13.6"
-
 read-chunk@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-3.1.0.tgz#4aab805e68b1b2c72a2fe5aefa8284faf623b1c0"