Question

据我所知，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()之间的区别是什么？

Answer 1

经过数小时的搜索和测试＆＃34;解决方案＆＃34;这是对我有用的！由Angry Fridges解决（非常感谢）。

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

注意到自动播放和静音，它们都是必需的。

这允许视频在计算机和Android手机上播放。

Answer 2

由于浏览器阻止对window.open()的调用，它不会起作用，因为允许它允许Web开发人员破坏用户首选项而不是自动播放媒体（或打开弹出窗口）。

点击播放和使用此方法之间的区别正是您所说的：点击。这些类型的调用在单击事件中是允许的，但通常不允许。

Answer 3

我得到了它的工作！现在它可以播放HTML5视频内联“autoplay”工作！该死的花了点时间！好的，这就是我所做的：

<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平板电脑本机设备浏览器

Answer 4

我在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");
}

Android 4.0.3注意

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

Answer 5

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

此外，如果您使用Chrome：//标记并启用＆＃34;禁用媒体播放的手势要求，Chrome也会同时使用＃34;选项。

Answer 6

或者您可以初始化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(); })()"); }
});

以上对我来说很好。

Answer 7

我在这里接受了一些建议，尤其是@JenniferG的建议，但是我仍然必须进行调整以获得良好的体验...这里是要点

加载@JenniferG提到的audio标签
使用适当的方法来访问DOM元素，对于React，请使用refs
取消静音，并在播放前设置音量
play()方法返回诺言（at least in 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>

Android HTML5视频 - 点击播放时有效，但不适用于video.play（）

7 个答案: