html视频在android chrome上是黑色的答案

【问题标题】：Html video is black on android chromehtml视频在android chrome上是黑色的
【发布时间】：2016-05-26 19:32:05
【问题描述】：

我的 html 视频只是 chrome 4.2 for 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 会建议“保存视频”。我正在使用 apache 来提供文件。

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

【问题讨论】：

可能是内容安全策略问题。见content-security-policy.com。我为 android 和 ios 开发了一个移动应用程序。今年 2 月，图像不再显示，因为 android 添加了更严格的内容政策。使用 ios 应用程序不会出现此类问题。
嗨@SimonSchüpbach。我将Header set Content-Security-Policy "default-src 'self';" 添加到我的.htaccess 中。没有成功。还有什么想法吗？ :)
您必须将<meta http-equiv="Content-Security-Policy" content="default-src 'self'; media-src *; >添加到您的html页面的标题部分
如果是别的，试试developer.chrome.com/devtools/docs/remote-debugging
内容安全策略不起作用。现在将使用远程调试器并报告回来。

标签： html html5-video

【解决方案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 上也没有显示海报图像，所以没有办法让它不是一个黑盒子。

【讨论】：