12

我了解 Android 上的 html5 视频无法自动播放。就目前而言，我的视频仅在用户单击播放按钮时才能在设备上运行。

<video width="640px" height="360px" src="media/video/Moments_of_Everyday_Life.mp4" controls id="video"></video>


<script type="text/javascript">
    $(function(){
        var video  = document.getElementById('video');
        video.play();
    });
</script>

它可以在我的桌面上运行。

为什么这行不通？点击播放和使用有什么区别.play()？

4

7 回答 7

2

由于浏览器阻止调用 的相同原因，它不起作用window.open()，因为允许它允许 Web 开发人员颠覆用户偏好而不是自动播放媒体（或打开弹出窗口）。

点击播放和使用这种方法的区别正是你所说的：点击。这些类型的调用在点击事件中是允许的，但一般情况下是不允许的。

于 2013-02-15T14:14:20.750 回答
2

我让它工作了！现在它可以播放带有“自动播放”功能的 HTML5 视频！该死的，这需要时间！好的，这就是我所做的：

<div id=content>
    <video width="1280px" height="720px" src="file:///android_asset/videos/Moments_of_Everyday_Life.mp4"></video>
</div>

注意：有些人说他们在添加海报和/或预加载时可以使用它。我得到了这个工作和没有。

Javascript 自动播放视频：

<script type="text/javascript">
    $(function(){
        function callback () {
            document.querySelector('video').src = document.querySelector('video').src
            document.querySelector('video').play();
        }
        window.addEventListener("load", callback, false);

    });
</script>

我希望这可以帮助任何人，我已经为此苦苦挣扎了一个星期！

只是要清楚：

致力于：

Android 4.0.4 三星 10.1 平板本机设备浏览器

于 2013-02-15T14:45:32.947 回答
2

经过数小时的搜索和测试“解决方案”，这对我有用！由愤怒的冰箱解决（非常感谢）。

<video id="video" class="video" autoplay muted >

注意到autoplay和muted，它们都是必需的。

这允许视频在电脑和安卓手机上播放。

于 2016-12-10T11:57:36.540 回答
1

或者您可以初始化您的 WebView 以轻松完成，如下所示：

webview.setWebViewClient(new WebViewClient() {
    // autoplay when finished loading via javascript injection
    public void onPageFinished(WebView view, String url) { mMessageContentView.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()"); }
});

以上对我来说很好。

于 2013-11-21T04:08:15.957 回答
1

我对 Android 4.0+ 上的 HTML5 视频有以下发现。

为了执行这些测试，我制作了一个沙盒应用程序，其中包含一个保存在 /assets 中的 HTML 页面。

HTML：

<!DOCTYPE html>

<html>
    <head>
        <title>HTML5 Video Test</title>
    </head>

    <body>

        <video preload="metadata"><source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"></video>

        <script> 
          var myvideo = document.getElementsByTagName('video')[0];

          myvideo.addEventListener('loadeddata', function() {
            console.log("** RECEIVED loadeddata **");
            myvideo.play();//this first play is needed for Android 4.1+
          }, false);

          myvideo.addEventListener('canplaythrough', function() {
            console.log("** RECEIVED canplaythrough **");
            myvideo.play();//this second play is needed for Android 4.0 only
          }, false);

        </script>

    </body>
</html>

JAVA：（“/assets/html5video.html”）

private WebView mWebView;
private ProgressBar mProgressBar;

@SuppressLint("NewApi")
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.videotest);

    // progress bar
    mProgressBar = (ProgressBar) findViewById(R.id.videotest_progressbar);
    mProgressBar.setProgress(0);
    mProgressBar.setVisibility(View.VISIBLE);

    // webview
    mWebView = (WebView) findViewById(R.id.videotest_webview);
    mWebView.getSettings().setJavaScriptEnabled(true);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
    {
        //NOTE: this is required only for Android 4.2.2+
        mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
    }

    mWebView.setWebChromeClient(new WebChromeClient() {
        public void onProgressChanged(WebView view, int progress) {
            Log.i(TAG, "Progress = "+progress);
            mProgressBar.setProgress(progress);
        }
    });
    mWebView.setWebViewClient(new WebViewClient() {
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            Toast.makeText(TestActivity.this, "Problem loading webpage", Toast.LENGTH_LONG).show();
            mProgressBar.setVisibility(View.GONE);
        }
        public void onPageFinished(WebView view, String url) {
            mProgressBar.setVisibility(View.GONE);
        }
    });
}

@Override
protected void onResume() {
    super.onResume();
    mWebView.loadUrl("file:///android_asset/html5video.html");
}

安卓 4.0.3 注意

我一直遇到烦人的异常java.lang.Throwable: EventHub.removeMessages(int what = 107) is not supported before the WebViewCore is set up.幸运的是，它并没有影响视频播放。

于 2014-01-16T19:46:25.927 回答
1

我在 kitkat 上发现 Firefox 将允许您以编程方式播放视频。

此外，如果您进入 chrome://flags 并启用“禁用媒体播放的手势要求”选项，Chrome 也会这样做。

于 2015-01-18T16:16:10.807 回答
0

我在这里接受了一些建议，最值得注意的是来自@JenniferG，但是我仍然需要调整以获得良好的体验......这是要点

  • audio像@JenniferG 提到的那样加载标签
  • 使用适当的方法来访问 DOM 元素，对于 React，使用refs
  • 取消静音，并在播放前设置音量
  • play()方法返回一个承诺（至少在 Chrome 中）；用于catch适当地处理错误
  • 注意不要play()在声音正在播放时调用，那样会失败
  • 用户必须与页面交互才能正常播放（请参阅下面的注释）

注意：如果你没有让用户点击某个按钮，你会得到这样的错误

play() 失败，因为用户没有先与文档交互。

总而言之，这是一个示例 React 组件，它应该作为一个不错的起点（它是人为的，但应该说明可能性）

class AudioPlayer extends React.Component
{
    constructor(props) {
        super(props);
        this.audioRef = React.createRef();
        this.state = {
            interacted: false,
            firstSoundPlayed: false,
            secondSoundPlayed: false,
        };
    }

    playAudio = () => {
        const node = this.audioRef.current;
        node.muted = false;
        node.volume = 1.0;
        node
            .play()
            .catch((e) => {
                console.error('caught audio error: ', e.message);
            });
    }

    handleClick = () => {
        this.setState({
            interacted: true,
        });
        setTimeout(() => {
            this.playAudio();
            this.setState({
                firstSoundPlayed: true,
            });
            setTimeout(() => {
                this.playAudio();
                this.setState({
                    secondSoundPlayed: true,
                });
            }, 6000);
        }, 4000);
    }

    renderStartup = () => (
        <p>
            Please give me permission to play sounds...
            <button onClick={this.handleClick}>Grant permission</button>
        </p>
    )

    renderScreen = () => (
        <div>
            <p>I will play a sound as many times as I want now!</p>
            <p>A sound is about to play...</p>
        </div>
    )

    renderSecondSound = () => (
        <div>
            <p>Soon it will play again...</p>
        </div>
    )

    renderSummary = () => (
        <div>
            <p>Hope you found this demo useful...</p>
        </div>
    )

    render = () => {
        const {
            interacted,
            firstSoundPlayed,
            secondSoundPlayed,
        } = this.state;

        return (
        <div>
            <audio
                autoPlay
                muted
                src="https://freesound.org/data/previews/33/33245_65091-lq.mp3"
                ref={this.audioRef}
            />
            {interacted === false ? this.renderStartup() : null}
            {interacted === true && firstSoundPlayed === false ? this.renderScreen() : null}
            {interacted === false || firstSoundPlayed === false || secondSoundPlayed === true ? null : this.renderSecondSound()}
            {secondSoundPlayed === false ? null : this.renderSummary()}
        </div>);
    }
}

ReactDOM.render(
    <AudioPlayer />,
    document.getElementById('react')
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js"></script>

于 2019-07-22T02:26:35.690 回答