Preview Image Not Showing on Mobile Devices
For some reason the preview image I have configured in the JWPlayer (v5.10) .setup() method is not displaying on mobile devices. Instead, all I see is a black background.
Please see this link: http://colabs.complex.com/users/brians/scrollandroll/test-area/snr_image-example.html
The JWPlayer video is embedded in an iframe as part of an .html file. I have used this setup in the past without encountering this issue. I am testing on iOS 7 and Android 4.0.
When clicking the black area, the video plays as intended (I have used the bunny.mp4 video file as an example). I tried an alternative that has worked for issues with stalled buffering in the past: display a thumbnail as an <img> element and hide the JWPlayer element. When clicking the <img>, swap the display for the image and video (so video is displayed, image is hidden) and begin playback with a .play() call. While this technically allows the preview image to be visible and the video can play, it requires that the user click the image, wait to see a buffering animation, pause the video as it will never fully buffer, and then resume the video. Only at this point will playback begin. Obviously, this is not going to work, as even though the original situation showed a black screen, simply clicking the JWPlayer element once was enough to begin playback. All I need is for the preview image to be visible on mobile devices. It is visible and works as intended on desktop.
This particular installation of a JWPlayer embed is very complicated, with many moving parts and strange ways of rendering the HTML, which may contribute to the issue at hand. However, it's entirely necessary for my purposes, and my experience with JWPlayer development tells me this should be something that can be fixed without having to alter the way the video is embedded/rendered.