Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

use webkit-playsinline in javascript

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.

like image 738
hanism Avatar asked Dec 27 '22 11:12

hanism


1 Answers

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

like image 166
Jon Lucas Avatar answered Dec 29 '22 02:12

Jon Lucas