Html android chrome 上的视频是黑色的

Question

我的 html 视频只是 chrome 4.2 上 android 的黑框。

这是我的代码：

<video loop autoplay>
        <source src="url-to-image.webm" type="video/webm">
        <source src="url-to-image.mp4" type="video/mp4">
</video>

它适用于：

Chrome: 桌面和 iOS
Firefox：桌面，iOS，Android
Safari 桌面，iOS

它唯一不起作用的浏览器是 chrome for android。

我也尝试用 javascript (video.play()) 播放视频。如果我长按视频，chrome 会提示 'save video'。我正在使用 apache 来提供文件。

有什么想法吗？那可以是什么？

Answer 1

想通了：

Android chrome 不会像 ios chrome 那样将视频的第一帧显示为海报图像。

Android chrome 不会像 ios chrome 那样显示播放按钮，除非在视频元素上指定

<video controls>
    ...
</video>

我的次优解决方案是通过 JS 激活控件：

    // Turn on controls on mobile chrome
    var isAndroid = navigator.userAgent.indexOf('Android') >= 0;
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

    if (isAndroid && isChrome) {
        var videos = document.querySelectorAll('video');

        [].forEach.call(videos, function(video) {
            video.controls = true;
        });
    }

不幸的是chrome上也没有显示海报图片，所以没有办法让它不是黑盒子。

Html android chrome 上的视频是黑色的

Html video is black on android chrome

html

html5-video