Slide and interactive video not playing on iPhone and iPad

Community Beginner ,
Mar 18, 2021 Mar 18, 2021

Copy link to clipboard

Copied

A few days ago, I posted this issue but got no answer.

The issue is related to the iPhone and iPad only.

Captivate 2019 11.5.5.553

Problem:

I have slide videos and interactive videos in my project. These are working on windows, android devices and even on mac devices. But on iPhone and iPad when the project reached the slide with slide video or interactive video, video starts loading and takes 5-10 seconds to load. (On other systems, the video starts instantly) After the video is loaded, I see a full-screen size black screen with a Play button in the middle. 

The video will not start if I tap the Play button but will start playing if I tap anywhere on the screen away from the play button. This is too annoying because users keep tapping the Play button with no result.

 

I found that this happens if Mobile Gestures (Widows>Mobile Pallete) are turned off in the project. If I turn on the mobile gesture the play button is working as it should be.

 

But turning the Mobile Gestures ON brings in another issue. Now I can scroll the screen Up and Down by sliding the finger on the screen if the content is overflowing the screen.

 

Anyone faced with a similar situation.

I had to keep Mobile Gestures ON to keep the Play button working but need scroll feature also as content overflows a bit on smaller screen size devices. And the scrolling issue affects iPhone more because of screen size.

 

Views

86

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 18, 2021 Mar 18, 2021

Copy link to clipboard

Copied

Correction: Now I can't scroll the screen Up and Down by sliding the finger on the screen if the content is overflowing the screen.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 20, 2021 Mar 20, 2021

Copy link to clipboard

Copied

I narrowed the issue a little bit more. As I said before, on the iPhone and iPad, a play button is displayed with a full black screen on top of the video. As the black screen is a bit transparent, I can see the body of the video through it. I observed that the video starts playing if I click on the black screen portion which is outside the body of the Video. If I click on the potion of the black screen which is covered by the video body then Video does not start. It happens when I keep Mobile Gestures on. It looks, though the play button with a black screen seems on top of the video but in reality, the video body is on top of the black screen with a play button thus making the play button unclickable. I am sure that the black screen with the play button on the iPhone and iPad comes due to restrictions on these devices to autoplay videos.

 

Any idea of how to change the placement order of these two objects or autoplay the slide video on iPhone and iPad?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

Update: After further analysis of the issue using the development tools of Chrome, it is found that the black screen that comes in iPhone and iPad is a div with id=__cpYTPlayIconOverlay with color #000000 (Black) and opacity 0.9 and it is with keyboard-focus turned off. It has a child div that contains a play icon image with the class name autoPlayButton. The play icon image on it is also the same comes from the same adobe directory location /HTML/assets/images/play-icon.png which is at the beginning of each captivate project with a white background. But the div with the class name autoPlayButton that contains this image on the First screen of the project is with keyboard-focus turned on and at iPhone black screen keyboard-focus is turned off. It shows that the blacks screen on the iPhone and iPad comes from captivate not from the device itself.

 

I have no idea how to turn the keyboard-focus turned on though there are solutions on the web to do it. But its beyond my capability to implement those.

 

As a  temporary solution I had changed the location of play icon image 125px from top in cpLibraryAll.css by adding top: 125px !important; at .autoPlayButton, .autpPlayButton:hover { ...... ; top:125px !important;}

As I explained earlier the black screen on iPhone is a bit transparent and I can see the body of the video through it and the video starts only if I Click on the space which is above or below the video body and this area div shows keyboard-focus turned on.

 

The above change just moved the play icon image in that clickable area and now it pretends to work as desired but still it is not the play icon image that is working but the original clickable area above and below the video is working. However, users don't know it. 

 

I will appreciate it if someone can guide me on how to log this bug to adobe.

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 21, 2021 Mar 21, 2021

Copy link to clipboard

Copied

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines