webkit-playsinline
dimisdas opened this issue · comments
iOS 10 supports webkit-playsinline. Videos can be played inline and videos with no sound or sound disabled can autoplay. No need to disable video in iOS anymore.
I tried to modify the source to add this, but I didn't get the video to run.
<video autoplay loop muted playsinline>
<source src="image.mp4">
</video>
More info here as well:
https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/iAdJSProgGuide/PlayingVideosinAds/PlayingVideosinAds.html
I tried with the attributes playsinline and webkit-playsinline but no success on my end.
@oproulx the attribute should be correct in that way
as if written on this library that should do that
https://github.com/bfred-it/iphone-inline-video
I'm doing more testing to add this funcionality
more info also here:
https://webkit.org/blog/6784/new-video-policies-for-ios/
http://walterebert.com/blog/html5-video-autoplay-mobile-revisited/
http://stackoverflow.com/questions/30855662/inline-html5-video-on-iphone
For anyone still trying to get this to work, https://webkit.org/blog/6784/new-video-policies-for-ios/ says:
Therefore in addition to adding the playsline attribute:
Line 321:
.prop({
playsInline: true,
// ...You also need to stop Vide from hiding the video before loading, otherwise the playing event will never fire, and that's what Vide uses to un-hide the video:
Line 346:
// Disable visibility, while loading
// visibility: 'hidden',
// opacity: 0
On line 346 I changed opacity to .00001 so it still acts a little decent.
Para quem ainda está tentando fazer isso funcionar, https://webkit.org/blog/6784/new-video-policies-for-ios/ diz:
Portanto, além de adicionar o atributo playline:
Linha 321:
.prop({ playsInline: true, // ...Você também precisa impedir que o Vide oculte o vídeo antes de carregar, caso contrário, o
playingevento nunca será acionado, e é isso que o Vide usa para reexibir o vídeo:Linha 346:
// Disable visibility, while loading // visibility: 'hidden', // opacity: 0
Thank you so much for your help, it worked for me.
For those who don't know where to change, because someone with little knowledge may not know how to use it, just look for the Vide plugin folder and find the file jquery.vide.min.js or jquery.vide.js and search for .prop for identify the row, then search for visibility: 'hidden' to identify the other row.
Hope this helps.