在 javascript 中使用 webkit-playsinline答案

【问题标题】：use webkit-playsinline in javascript在 javascript 中使用 webkit-playsinline
【发布时间】：2013-01-06 12:25:27
【问题描述】：

如何在 javascript 中而不是在 html5 视频标签中使用 webkit-playsinline？我想像在 javascript 中使用视频标签控制/自动播放属性一样使用它，或者如果你们有任何其他有效的方法？我正在开发一个可以流式传输视频的 PhoneGap iOS 应用。

以下是我尝试过的一些方法，但没有一个有效：

videoPlayer.WebKitPlaysInline = "webkit-playsinline"; videoPlayer.WebKitPlaysInline = "WebKitPlaysInline"; videoPlayer.webkit-playsinline = "webkit-playsinline"; videoPlayer.WebKitPlaysInline = "true"; videoPlayer.WebKitPlaysInline = true; videoPlayer.webkit-playsinline = "true"; videoPlayer.webkit-playsinline = true;

我当前的代码（js）：

function loadPlayer() {
    var videoPlayer = document.createElement('video');
videoPlayer.controls = "controls";
    videoPlayer.autoplay = "autoplay";
    videoPlayer.WebKitPlaysInline = true;
    document.getElementById("vidPlayer").appendChild(videoPlayer);
    nextChannel();
}

我当前的代码（html）：

<body onload="loadPlayer(document.getElementById('vidPlayer'));"><!-- load js function -->

<li><span class="ind_player"><div id="vidPlayer"></div></span></li><!-- video element creat here -->

非常感谢任何帮助。谢谢。

【问题讨论】：

将webkit-playsinline 添加到<video> 标签在移动Safari 或iPhone 上的chrome 上不起作用。你想好如何完成这项工作了吗？

标签： javascript html video

【解决方案1】：

您需要将其附加到视频元素并将其设置为视频的属性

如：

<video class="" poster="" webkit-playsinline>
    <source src="" type="video/ogg" preload="auto">
    <source src="" type="video/mp4" preload="auto">                
</video>

所以你可以这样做（使用 jQuery）：

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

【讨论】：

.attr 仅使用一个参数调用是 getter，您需要指定值以使其成为 setter。只需传递一个空字符串：$('video').attr('webkit-playsinline', '')。 stackoverflow.com/a/13159270/1052033
我们的 UIWebView iOS 应用需要“控件”属性才能允许内联播放。
谢谢！这是一个救生员。特别是如果有人试图通过 TinyMCE 制作自动播放视频，因为它似乎删除了 playinline 参数，并且必须通过 js 添加。

【解决方案2】：

你可以在没有 jQuery 的情况下做到这一点：

var videoElement = document.createElement( 'video' );
videoElement.setAttribute('webkit-playsinline', 'webkit-playsinline');

您必须在您的 iOs 应用程序的 WebView 中激活此功能：

webview.allowsInlineMediaPlayback = true;

【讨论】：

从iOS10开始，属性名称由'webkit-playsinline'改为'playsinline'。