diff --git a/example/mp4/App.js b/example/mp4/App.js
index 80c2ea84..5eb413cf 100644
--- 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
index 6251bc14..6b51a58f 100644
--- a/packages/griffith/README-zh-Hans.md
+++ b/packages/griffith/README-zh-Hans.md
@@ -30,6 +30,7 @@ render()
| `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
index 9a5cb2fb..42098175 100644
--- a/packages/griffith/README.md
+++ b/packages/griffith/README.md
@@ -31,6 +31,7 @@ render()
| `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
index 23500430..596ee452 100644
--- 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
index 88f5e7a0..44af2bfe 100644
--- 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,
}) => (
@@ -37,6 +38,7 @@ const PlayerContainer = ({
{({currentSrc}) => (