html - 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.

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.

Share Improve this question asked Jan 23, 2013 at 4:53 hanism 8632 gold badges7 silver badges13 bronze badges

adding webkit-playsinline to the <video> tag doesn't work on mobile safari or chrome on iPhone. Have you figured out how to make this work? – tim peterson Commented Jun 13, 2013 at 15:15

Add a comment |

2 Answers 2

Sorted by: Reset to default 9

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

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', '');

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - use webkit-playsinline in javascript - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)