如何在 iOS 中创建一个隐藏的 HTML5 视频元素？

Question

我正在尝试在 HTML5/js 中创建一个视频元素，这样我就可以将它完全下载到内存中并播放它而无需缓冲。

问题是当我在 iOS 中创建一个视频元素时，当我开始播放它时它总是会全屏显示它的播放器。如果您使用样式为“display:hidden”的视频标签，则可以在 iOS 中播放隐藏的视频。但是，当尝试使用js代码执行此操作时，它不起作用。

function CreateVideoElement(url, callback)

{

    var element = document.createElement('video');

    element.hidden = true;

    element.controls = false;

    element.style.display = "none";

    element.autoplay = false;

    element.playsinline = true;

    element.onloadedmetadata = function() {

        callback();

    };

    element.src = url;

    return element;

}

Answer 1

我的同事找到了解决方案。我所做的是video.playsinline = true;，还有另一个遗留选项需要设置。 webkit-playsinline, 但由于-. 所以最终他发现你需要设置它setAttribute所以有效的解决方案是这样的：        function CreateVideoElement(url, callback)        {            var element = document.createElement('video');            element.controls = false;            element.style.display = "none";            element.autoplay = false;            element.setAttribute('webkit-playsinline', 'webkit-playsinline');            element.setAttribute('playsinline', 'playsinline');            element.onloadedmetadata = function() {                callback();            };            element.src = url;            return element;        }

Answer 2

完整视频下载：内置于 HTML5 video 标签中的是 preload 属性。preload="auto" 告诉浏览器下载整个视频。（YMMV - Chrome 下载“很多”视频，但不是全部）。添加element.preload = "auto" 是您正在寻找的技巧。是 display:none 没有隐藏视频？