The code below produces a properly embedded video in firefox, but does not display properly in internet explorer or in android. I have all my browsers set to automatically update, so they are all always running the most current versions.
In `internet explorer`, the code below leaves a large blank space where the
video should be. The user has to hover over the large blank space before the
controls become visible.
In `android`, the code below produces an unusable/unclickable area, and the
user has to greatly zoom the focus to get the small start button to become
big enough to click to start the video.
However, in `firefox`, the code below shows the first frame of the video,
which you can click to start the video.
How can I change the code below to get all three of these browsers to show the first frame when the page loads, and for the video to be start-able when the user clicks on the first frame?
Here is a link to the video file on a file sharing site.
Here is the ffmeg code for processing the video:
ffmpeg -y -i SourceFile.mp4 -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart DestFile.mp4
Thanks to offbeatmammal for getting me this far.
Here is the html5 code for embedding the video in a web page browser:
<video width="640" height="480" controls>
<source src="somefile.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
