add 'playsinline' attribute (alongside existing 'webkit-playsinline')

[GordanRatkovic]

Is there any particular reason why only webkit-playsinline in set and not playsinline as well?

[cookpete]

I added webkit-playsinline back when I was building this library for a specific use in a web app. I see now that it has matured a bit and webkit have unprefixed it, also that iOS10 will start allowing inline video playback in Safari, which is pretty cool. I think the right solution here would be to add playsinline as an actual prop (or part of fileConfig) and apply the attributes only if true.

In the meantime, you can already add playsinline by just doing:

<ReactPlayer fileConfig={{ attributes: { playsinline: true }}} />

[elverskog]

This didn't work for me using...

<ReactPlayer
fileConfig={{ attributes: { playsinline: true }}}
url={testVar.video}
ref={player => { this.player = player }}
...

As a test, if I go right into "lib/players/FilePlayer.js" and add this.player.setAttribute('playsinline', ''); it adds the tag and allows the inline playback (on iOS safari). Am I missing something? I made sure my version was up to date.

Update: If I add muted as an attribute that works. However neither show up when I inspect the element (in chrome).

[cookpete]

Sorry @elverskog, it turns out that playsinline isn't supported by react yet, so perhaps we just add playsinline as a top level ReactPlayer prop, and apply it to whatever players support it (looks like only fileplayer and youtube support it at the moment).

muted works because it is a supported react attribute.

[ahcock]

it might be too late but
config={{ file: { attributes: { playsInline: true, }, }, }}

with camel case, it works well.

[SpaghettiCoder101]

it might be too late but config={{ file: { attributes: { playsInline: true, }, }, }}

with camel case, it works well.

You saved my life

[devjromero]

it might be too late but config={{ file: { attributes: { playsInline: true, }, }, }}

with camel case, it works well.

You saved my life x2