How to make video using playsinline for iPhone?

[warpigs666]

Hi. I'm just learning coding, but I see here that in order to prevent a video from automatically playing in quicktime on an iPhone you have to add

<video playsinline>

New <video> Policies for iOS | WebKit

Where do I add this in Animate?

Thanks!

[kglad]

use

$("#video1")[0].play()

to make your video play or click the play button on video component.

[warpigs666]

Ok, that was admittedly a stupid mistake... I'm new to all this!

More updates in a min. There are other problems too.

Thanks tho!

[warpigs666]

Ok so (before we move on to the play/pause functionality which isn't working again...) this doesn't actually solve my playsinline problem. I uploaded the files to my server space and the video file still opens in the ios native player.

To be more specific, the page shows a black video box with a greyed out play button (it doesn't show the video component poster image), then when I click the playBtn I made the posted image flashes on and then the video opens the native iOS player and plays.

[kglad]

i don't know why you want to add more buttons but try this,  http://www.kglad.com/Files/forums/Untitled-1.fla

[warpigs666]

Thanks but this also does not play in the page on iOS. As in it still opens the native iOS media player.

[kglad]

that's an ios issue and it's not worth trying to thwart what apple wants.  whatever work-around you find, if you find one, won't work for very long.

[warpigs666]

Thanks but it sounds like the playsinline fix is going to be long term, is there any way to get it to work with javascript?

New <video> Policies for iOS | WebKit

[kglad]

i don't know anything about the problem, other than what you've posted.

[warpigs666]

Thanks for the help I guess I'm hoping someone else can chime in who's familiar with it.

[warpigs666]

So assuming that the playsinline code worked, were would I add it? I read that I'm supposed to add it in the same place I would add attributes like loop, muted, controls etc, but I normally add those in the HTML tag itself. Where would I add that in Animate..?

[warpigs666]

I'm not sure if this is relevant or not but I found this thread from a couple years ago:

https://stackoverflow.com/questions/45377619/ios-video-playsinline-not-always-playing-inline-in-cord...

[warpigs666]

I'm doing some more reading and I'm wondering if the problem is that I'm trying to use playsinline with javascript? It seems to work fine in an html tag, but I even tried to open up the file you sent me in dreamweaver and edit it to have the playsinline tag and it still opens the native iOS player...

[warpigs666]

bump?

[warpigs666]

And bump again...here's hoping...

[warpigs666]

Bumping this again hoping someone sees it. I've tried posting at stackoverflow and I can't get an answer from anyone. Which is weird because it seems like iOS has been allowing playsinline to play videos in the browser for a long time now. I can't get it to work but maybe I'm just not adding the code at the right place? I opened up the html files that Animate published but I'm not sure where to add the code.

[warpigs666]

Can ANYONE offer advice as to how to attach the playsinline attribute to and HTML video tag in files published from Animate? Nothing I try works. It's really the determining factor in whether or not I use Animate for most of my projects. We have a workflow that requires this.

[warpigs666]

Adobe help plssss

[boyjim]

hi

After 2 weeks of searching I found no response anywhere suggesting exactly where to add this - I finally (by trial and error) found a solution. I included - $('#myVideo').attr('playsinline',''); 

Here's where I placed it - on the click handler for the play video button:

function fl_MouseClickHandler()

{

$('#myVideo').attr('playsinline',''); 

$("#myVideo")[0].play();

}

It works inline on my ios phone now, I hope that helps you 'warpigs666'

[sharonl75871280]

Hey BoyJim, I am trying to get the your snippit to work with some of my code and I cxan't get it to work. 

I have pasted what I have below, is there anything you can see that I am missing, with the code in place the animation will not load at all.

Thanks

var _this = this;
_this.quarryingBtn.on('click'function fl_MouseClickHandler()
{
$('#quarryingVideo').attr('playsinline',''); 
$("#quarryingVideo")[0].play();
_this.gotoAndPlay('page1');

[boyjim]

hi

I sort of abandoned using Animate for my project and re did it entirely in Javascript, I will try and locate my earlier attempts on a back up drive that i may have kept. I apologize. I do remember however that i added that snippet directly on the main timeline. The only indication i have that mine worked is that it was an isolated MouseClickHandler event 'function fl_MouseClickHandler()'.  Yours has a variable and a specific button 'quarryubgBtn' that the click is attached to. Maybe just keep the 'video' events seperate from the btn somehow. Sorry if that doesn't help. I'm really not any more qualified to guess what else it could be.

[sharonl75871280]

Thanks boyjim for your helpful response. 

Still haven't made it work, I'll let you know if I do 🙂

[boyjim]

HI I'm sooo sorry. I couldn't locate anything on my old back-up hard drives. I think I was so frustrated that I just deleted everything. As I mentioned before the only thing I could think of was taking your 'playsinline' attribute outside of the '_this.quarryingBtn.on('click'function fl_MouseClickHandler()' that you have it wrapped in currenlty.

so:

$('#quarryingVideo').attr('playsinline',''); 
$("#quarryingVideo")[0].play();

then:

var _this = this;
_this.quarryingBtn.on('click'function fl_MouseClickHandler()
{_this.gotoAndPlay('page1');

I'm not sure at all if this is a solution, but it's worth a try. Good luck.