javascript - 当我从脚本创建视频时，向视频添加更多属性

Question

通过 JavaScript 创建一个新的 video 标记，并将其添加到我的页面中。

var video = $('<video/>', {
                src: '/DownloadAttachment/87674e75-e0e9-4048-b623-6c25e4dd30fc',
                type: 'video/quicktime',
                controls: true,
                width: '100%'
            });
link.html(video);

结果我有

<video style="width: 100%;" 
       src="/DownloadAttachment/87674e75-e0e9-4048-b623-6c25e4dd30fc" 
       controls="controls" 
       type="video/quicktime">
</video>

这适用于 Windows 和 Android，但问题出在 iOS 上，视频无法播放。我用谷歌搜索了一个但是解决方案是添加一些额外的属性，例如:

<video controls="true" width='100%' height='100%' 
       src='/DownloadAttachment/87674e75-e0e9-4048-b623-6c25e4dd30fc' type='video/mp4' 
       muted playsinline />

如果我在代码中添加 controls: true 渲染器将返回 controls="controls"。我找不到添加 playsinline 的方法。

更新

我添加了 muted 和 playsinline 但结果是相同的。我有一个空白占位符。

我更新了 html，如下所示:

<video style="width: 100%;" preload="auto" 
       controls="controls" playsinlin 
       webkit-playsinline>
    <source src="/Comments/DownloadAttachment/2d236789-1626-4983-b614-c5bfc676d063"
            type="video/mp4">
</video>

但在这种情况下，我看到一个带有播放按钮的白色占位符，但视频是空的，我无法播放它。

我该如何解决这个问题？有没有可以改进 macOS/iOS 的 video 标签的播放器？

Answer 1

您可以尝试attr方法添加以下内容

$(video).attr('playsinline', '');

对于您想要实现的目标，您可能会更幸运地使用

$(video).attr('webkit-playsinline', '');