use webkit-playsinline in javascript

Question

How do I use webkit-playsinline in javascript instead of in html5 video tag? I want to use it just like using video tag control/autoplay attribute in javascript or if you guys have any other method that is working? I'm working on a PhoneGap iOS app that stream video.

Below is some approach that I have tried but none are working:

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;

My current code(js):

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

My current code(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 -->

Any helps are much appreciate. Thanks.

adding `webkit-playsinline` to the ` – tim peterson Jun 13 '13 at 15:15 — tim peterson, Jun 13 '13 at 15:15

score 7 · Answer 1 · edited May 23 '17 at 12:01

7

You can do this without jQuery:

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

You have to activate this functionality in your iOs application's WebView :

webview.allowsInlineMediaPlayback = true;

You can check this post for more details:

HTML5 inline video on iPhone vs iPad/Browser

edited May 23 '17 at 12:01

Community

1
1

answered Sep 15 '15 at 14:13

Jon Lucas

81
1
5

4

Starting iOS10, the name of the attribute changed from `'webkit-playsinline'` to `'playsinline'`. – DocForNoc Aug 25 '16 at 13:01

score 4 · Answer 2 · edited Feb 25 '14 at 09:14

4

You need to attach it to the video element and set it as video's attribute

such as :

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

so you could do (with jQuery) :

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

edited Feb 25 '14 at 09:14

Sheelpriy

1,675
17
28

answered Feb 20 '13 at 13:55

Luke Robertson

1,592
16
21

2

`.attr` called with only one parameter is a getter, you need to specify the value to make it a setter. just pass an empty string then: `$('video').attr('webkit-playsinline', '')`. http://stackoverflow.com/a/13159270/1052033 – Antoine Jun 06 '13 at 14:43
1

Our UIWebView iOS app needed the "controls" attribute before it allowed playing inline. – Elliot Coad Mar 25 '14 at 10:21
Thanks! This is a life saver. Especially if one is trying to make autoplay vids via TinyMCE, as it seems to remove playsinline parameter and it must be added via js. – kaarto Jul 02 '19 at 08:59

use webkit-playsinline in javascript

2 Answers2

Linked