2

I've been attempting to find a method for playing video inline in mobile safari for awhile now. I know this is possible and has been achieved (see link)-

http://www.raptmedia.com/project/philips-designed-play-drives-mobile-video-engagement

However, I am unable to determine how this is done. I've tried manipulating iframes but this alone doesn't seem to have any impact.

I've included a js player for cross browser compatibility and used it within an iframe, no luck in mobile: 

<div class="vid"> <video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="600px" height="600px"> 
<source src="video.mp4" type='video/mp4'/> <source src="video.webm" type='video/webm'/> 
<source src="video.ogg" type='video/ogg'/> <track kind="captions" srclang="en" label="English" /> 
</video> <script> var myPlayer = _V_("vid01"); ` </script>` </div>
Dr.jacky
  • 3,341
  • 6
  • 53
  • 91
user3771582
  • 21
  • 1
  • I've included a js player for cross browser compatibility and used it within an iframe, no luck in mobile: `
    ` `` `` `
    `     – user3771582 Jun 24 '14 at 21:27

3 Answers3

0

I know this is an old question, but it ranks high in my Google search and I can at least answer the question posed above, so I'll add this in case other people come across it: why does it work on that particular page?

I looked at it, and it doesn't really play inline video. On my iPhone, it preloads a ton of JPG frames and then "plays" them like a movie, while playing an mp3 audio track behind it. So they are just faking it, basically. Still not able to play the video inline on the phone.

mherzig
  • 1,528
  • 14
  • 26
0

The only solution I know is based on the drawImage function of the canvas tag... I spotted the basics here on SO but there's some fun left for the reader :D, in a few words, You hide and play the video and at the right freq You render the current frame into a canvas, some attention is needed for the audio sync. It works better than expected. Here is a basic sample, and here another one where I try to apply some webkit based filters.

Hope it helps, have fun!

Community
  • 1
  • 1
fedeghe
  • 1,243
  • 13
  • 22
0

You can use something like this library to make it work: https://github.com/bfred-it/iphone-inline-video

It basically uses an audio tag to drive the video by seeking to the current time, so you can have the frames updated without having to play the video.

The good news is that iOS 10 will support this, so no more hacks are going to be needed: https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_12

Thiago Pontes
  • 516
  • 5
  • 18