Question

我想在没有任何用户手势的情况下自动播放视频。我知道，根据最近的Google和Apple网络视频政策，我们不能在没有用户手势的情况下自动播放具有音频的视频。但是，我看到的网站仍然可以在现代网络浏览器中自动播放视频。

我在stackoverflow上遇到了许多与此问题相关的问题，但没有一个帮助我。

这是我尝试过的。

尝试1。

\documentclass{article}

\usepackage{tocloft}

\setlength{\cftfignumwidth}{3em}

\begin{document}

\listoffigures

\begin{figure}
  \caption[short caption text]{Long caption text}
\end{figure}

\end{document}

尝试2。

<video id="miniVideo" preLoad="yes" autoPlay="autoplay" loop width="100%" height="auto" playsInline>
<source src="/mini/video/cooper.mp4" type="video/mp4" />
<source src="/mini/video/cooper.webm" type="video/webm" />
</video>

尝试3。

<iframe playsInline id="miniVideo" src="/mini/video/cooper.mp4" width="100%" 
 height="400px"
allow="autoplay; fullscreen"></iframe>

我们将非常感谢您的帮助。谢谢

Answer 1

我不确定Safari，但Chrome更改了自动播放政策。看这里：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

为了自动播放，请添加归属于muted标签的video。
例如：

import React, { Component } from 'react';

class Player extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isVideoMuted: true
    };
  }

  handleMuteState = () => {
    this.setState(prevState => ({
      isVideoMuted: !prevState.isVideoMuted
    }));
  }

  render() {
    return (
      <div>
        <video muted={this.state.isVideoMuted} src="./video.mp4" />
        <button onClick={this.handleMuteState}>{this.state.isVideoMuted ? 'Unmute' : 'Mute'}</button >
      </div>
    );
  }
}

export default Player;

React.js：视频自动播放无法在Chrome和Safari浏览器中运行？

1 个答案: