如何在 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

1. 完整视频下载：

内置于 HTML5 video 标签中的是 preload 属性。preload="auto" 告诉浏览器下载整个视频。（YMMV - Chrome 下载“很多”视频，但不是全部）。

添加element.preload = "auto" 是您正在寻找的技巧。

1. 是 display:none 没有隐藏视频？