Captions issues in Ramp in iOS devices

[Dananji]

Description

After the removal of HLS captions filtering in Ramp the captions behavior in iOS devices has the following issues;

• caption selection in the captions menu doesn't clear when another caption is selected even though it shows the correct captions on top of the video
• caption selection in the native player is a bit finicky when there are multiple captions
• captions selection in native player doesn't get carried over to the Video.js instance in iPads

Done Looks Like

• Caption selection is consistent between the native player and the Video.js player
• Caption selection is properly seen in the menu (removes the highlight from the current selection when another caption is selected)

Related Past Issues

• Removing VTT Files From HLS Manifests avalonmediasystem/avalon#5695

[elynema]

This is potentially a video.js issue, but Dananji would like to review if she has a chance. May be able to implement some synchronization between native player and video.js.

[Dananji]

I tested each point on this ticket's description after the changes made in #452.

caption selection in the captions menu doesn't clear when another caption is selected even though it shows the correct captions on top of the video

The caption selections get cleared as expected when selecting a different caption option. i.e. caption selections made in the native iOS player are correctly reflected in the Video.js instance and vice versa

caption selection in the native player is a bit finicky when there are multiple captions

The inconsistency in caption selection between native iOS player and Video.js player was observed only when captions are turned off from the native iOS player for an HLS stream media item.
When captions are turned off from within the native iOS player, the next time a caption is selected from the native player's captions menu does not set the caption selection in the player (shows as the caption is selected in the menu, but the text overlays are shown on top of the video).
Steps to reproduce this:

1. Open native iOS player for an HLS streaming media file with captions in either Chrome or Safari in an iPhone
2. Turn off captions in the native iOS player
3. Observe captions are turned off in Video.js player as expected
4. Open the native iOS player again and select a caption
5. Observe in the Video.js player the caption selection is not reflected

This behavior seems to be identical for the HLS demo item with captions in the Video.js main site.

One workaround this seems to be; selecting the captions in the Video.js player instead of within the native iOS player after Step 3 in the above list, because the caption selections/caption turn on/off actions are properly carried over to the native iOS player.

To compare the existing behavior for turning off/on captions using the native iOS player's menu, I tested an item with multiple captions in avalon-staging and observed that, turning captions off in the native player doesn't turn off captions in Video.js player.

captions selection in native player doesn't get carried over to the Video.js instance in iPads

This happens only in the scenario explained in the previous point, where captions are turned off from within the native iOS player

[joncameron]

I created #473 for native player issues so this one can be closed.