Endcard is a unique plugin designed for the video-js html5 video player that adds clickable links to the end of a video. (More information on endcards can be found here: https://github.com/theonion/videojs-endcard). To implement an endcard, simply include videojs.endcard.js, along with some CSS for customization.
However, there seems to be an issue where endcard sometimes removes the custom controls of videojs and replaces them with default controls in certain scenarios. For example...
- A regular videojs video with standard styling -
- The same video with an endcard demonstration at the end -
Important note:
This issue appears to be specific to mobile devices. Both videos display styled videojs controls on Chrome, Firefox, and Internet Explorer when viewed on a PC.
The problem does not occur consistently on mobiles - Safari and Opera on iPad work fine, but occasionally Chrome on iPad may switch between videojs controls and native controls (in cases where native controls are displayed, the video may fail to load).
In Google Chrome developer tools (PC), video 2 always shows native controls. Occasionally, the controls may appear normal before reverting to native controls upon refreshing the page. Inspecting the HTML reveals the addition of the "vjs-using-native-controls" class to the video div specifically on video 2 (the one with the endcard). This behavior is not observed in the source code produced by Firefox web developer.
I have experimented with both files to identify the root cause, and it seems to stem from the JavaScript snippet at the end of the video 2 file. Removing this code resolves the control styling issues experienced in Chrome on iPad and Chrome developer tools.
Could this be a compatibility issue with Chrome? Regardless, any suggestions on pinpointing the conflict, understanding why it only affects mobile devices, and finding a solution would be greatly appreciated.