I am trying to figure out how to make a video play inside the webpage and not open the iOS native player. I am creating the page in Adobe Animate HTML5 canvas. I understand that I want to use playsinline but I know very little about code and am having trouble implementing it. My understanding that this is possible is based on this website:
https://webkit.org/blog/6784/new-video-policies-for-ios/
I have been working on this for days and Adobe's forums haven't been able to help. I even tried publishing the .html/.js files and then opening them in dreamweaver and looking for places to add the playsinline code manually but nothing seems to work. I've also read through these forum posts but I don't really understand them: use webkit-playsinline in javascript
HTML5 inline video on iPhone vs iPad/Browser
"webkit-playsinline" video tag attribute
Here is the relevant code from Frame 1 of my Adobe Animate file. I am just wondering where to paste the playsinline code, or if I have to do it another way:
this.stop();
var nextBtnVAR = this.nextBtn;
var timelineVAR = this;
this.playBtn.addEventListener("click", playVideoFUNC.bind(this));
function playVideoFUNC()
{
$("#video1")[0].src = "videos/2.mp4";
$("#video1")[0].play();
this.pauseBtn.visible = true;
}
this.pauseBtn.addEventListener("click", pauseVideoFUNC.bind(this));
function pauseVideoFUNC()
{
$("#video1")[0].pause();
this.pauseBtn.visible = false;
}
this.nextBtn.addEventListener("click", nextFrameFUNC.bind(this));
function nextFrameFUNC()
{
this.gotoAndStop(2);
}
this.video1.on("added", function()
{
$("#video1")[0].addEventListener('ended', timelineVAR.endedHandler);
}
);
this.endedHandler = function(e)
{
timelineVAR.gotoAndStop(1);
};