We use a div with a background image to simulate the poster image so that we can use a single poster implementation for flash and html. It may be desirable on some platforms to use the native poster image, however. On iPhones for instance, the simulated poster image covers up the native play button and can make it difficult to figure out where to touch to initiate playback. By keeping the poster attribute on the underlying video element, you can hide the simulated poster to get a native look-and-feel on that platform.
Disabled is a bit overloaded with visible but unusable controls, so use hidden instead. Re-arrange default styles a bit and use dom helper methods instead of the vjs-objection functions.
Use a new CSS class 'vjs-disabled' to disable display of the volume controls. This allows custom styles the flexibility to use methods other than `display:block` to layout the controls.
If you are quick, you could get videojs to wrap the HTML video element twice on iOS. The video element has to be recreated after moving on iOS but we weren't re-associating it with the player object. When autoSetup swung through, it would re-initialize the video element and create a player within a player.
Hide volume slider and mute toggle when the current tech doesn't support adjusting video volume. Added controls specific test cases. Volume-related controls retest whether to display themselves whenever `loadstart` fires.
The existing poster implementation uses an <img> tag
stretched horizontally with capped max-height. This
works in some cases like pillar-boxing when the poster
is not as wide as the player. However it fails to
letter box when the player is taller than the poster.
This change uses a stretched div with background-image
and backround-size to create a vertically aligned
poster image which stretches in both directions to fit
while maintaining aspect ratio.
For browsers which do not support backgroundSize (IE8)
the original <img> based strategy is used as a fallback.