After a fair amount of research and prototyping, we were able to construct interactive videos using Captivate 2017 that work on IOS.
Background
1. We are using interactive training videos that branch based on user choices to better engage our clients.
2. We insert smart shapes as buttons to navigate/jump to respective slides after users click or tap the respective buttons. The buttons appear while the live video is playing and are clickable as the presenter speaks.
3. The solution is required to be mobile friendly.
4. Single slide synchronized videos are used.
Issues
1. The IOS Iphone playbar supersedes all custom controls used by Captivate and sends them to the background. This has a twofold effect:
- The interactive portion of the course does not work because the controls are sent to the background.
- Even for regular (non-interactive) videos the user is required to ‘X’ the IOS playbar to resume the course. Which very much interrupts the flow of all courses.
Solution
1. Code javascript to use the video playsinline attribute to suppress the IOS playbar. To do this we used an Execute Javascript action to play the following Javascript on the first slide of the course:
document.addEventListener(‘DOMNodeInserted’, OnNodeInserted, false);
function OnNodeInserted(event) {
if (event.target.nodeName == ‘VIDEO’)
{
event.target.setAttribute(“playsinline”, “”);
}
}
This works like a champ, the IOS playbar will not appear on any video played after the javascript is executed.
Thanks for troubleshooting and sharing.
I am not sure how else I can help you Kumar, as I am not using the controls you describe. It sounds like IOS 11 has hijacked your custom pause and play buttons. You may try removing them and re-adding them back to the video.
The only relevant setting I have heard about that’s new in IOS 11 is to disable the ‘auto play’ feature under the App store, you may try this but I wouldn’t think it would help: https://ios.gadgethacks.com/how-to/disable-auto-playing-videos-ios-11-app-store-0178719/
Hi,
I am also facing with this issue, after updating my iphone 6 to ios 11. previously video was working fine. but now the whole course has been got corrupted on mobile version. there is no control on the slide. because of this new default player of ios11.
I used this Javascript on the first page of the course.
On enter execute javascript
document.addEventListener(‘DOMNodeInserted’, OnNodeInserted, false);
function OnNodeInserted(event)
{
if (event.target.nodeName == ‘VIDEO’)
{
event.target.setAttribute(“playsinline”, “”);
}
}
but it’s not working.
please let me know if i am missing anything here.
Thanks,
Vimal
If you omit the javascript, you should see the default IOS playbar controls. Those controls work for navigation purposes, but will interfere with interactive video. Are you seeing the IOS Playbar without the javascript?
We used the javascript for the explicit purpose of having an interactive video. With this setup:
– Single slide synchronized video
– Navigation is performed by users making choices and clicking smart shape buttons
– No playbars at all; we don’t want the user to fast forward. The navigation is driven by a video pause that forces the user to select a button.
Now if you are using an Event video with the Javascript, the IOS playbar will disappear and the default playbar should be there, however I have seen through testing that it appears to fall of the bottom of the screen in landscape mode on IOS, but it does appear in portrait mode on IOS. This may be an issue, I have not yet worked on this.
If you are saying the course is corrupted and not reflective of the scenarios above, then please be more specific as to how it is broken.
Thanks
Ken
Thanks for your reply Kane.
I want to let you that I am using captivate 9 responsive. And I am using single slide synchronized video. and the video has no default player. I am using my own custom navigation buttons to navigate within the slides. previously it was working fine on mobile devices IOS 10. but in the version of IOS 11. the video controls pops-up automatically and neither it’s own play pause works nor my own custom button works. And video continues to play. and we also have few text boxes and shapes on the slide which are synched with video. But because of this issue, everything got disturbed on the slide.
Please let us know, if you have any idea to fix this issue.
My application is similar. I have custom buttons for navigation. I do not mind the missing playbar because I want the user to navigate the course using the buttons.
The javascript should have suppressed the IOS player, at least it worked for me. Are your custom controls visible but just don’t click? Because that is working for me. The buttons need to be brought in front of the video using ‘arrange’ menu. I am not sure what else to tell you without looking at it.
Thanks Ken,
I am using the navigation button as global and on top. And I am also using custom play and pause button and a replay button. These all are working fine in other slides. and also in video slides in the previous version of ios 10. but now when video pops up, my custom play pause doesn’t work and slide pauses and content on the video slide doesn’t appear.
if you want to test, I can send you the link. but i can’t post the link here.
Thank you.
That’s fantastic. I’m looking forward to trying this out myself.
Great information. Thanks for sharing.
You must be logged in to post a comment.
