how to play html5 video embedded in webpage on an iPhone?

user_1146785 0
Viewed 6895

(sorry for the big images not sure how to resize in this markdown deriv)

I have some video in a webpage, using html5 video tag. On android, the video will remain inline on the page, allowing me to have other content around it such as subtitles in the HTML.

But on the iPhone when you hit play the video jumps out full-screen, destroying any other features.

Is there any way to prevent this take-over?

On Android, or normal web, we don't have this problem.

FYI tags using are (jade)

  video(width="100%" controls="controls" autoplay="true" id='videoPlayer' class='video-player')
    source(src="#{videoUrl}" type="video/mp4")

Before play

enter image description here

After click to play

enter image description here

html5-video embed iphone
1 Answers

While not originally possible in Safari on iOS using the native HTML <video> tag, Apple finally added support for this a while back by adding support for specifying a playsinline attribute on video elements.

e.g. <video … playsinline />

I appreciate this question is old, but someone had down voted it and it was unanswered.

user_288840
Related