android - 嵌入在 html5 中的 mp4 的跨平台语法

Question

下面的代码在 firefox 中生成正确嵌入的视频，但无法在 internet explorer 中正确显示或在 android .我将所有浏览器设置为自动更新，因此它们始终运行最新版本。

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.  

如何更改下面的代码以使所有这三个浏览器在页面加载时显示第一帧，并在用户单击第一帧时启动视频？

这里是 a link to the video file on a file sharing site .

这里是 ffmeg视频处理代码:

ffmpeg -y -i SourceFile.mp4 -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart DestFile.mp4

感谢 offbeatmammal让我走到这一步。
这里是 html5在网页浏览器中嵌入视频的代码:

<video width="640" height="480" controls>
    <source src="somefile.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Answer 1

Android 浏览器需要一些特殊处理才能支持 MPEG-4/H.264 视频格式:

http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/

您还可以将视频元素的 preload 属性设置为“auto”，以便在页面加载后通过 javascript 预加载视频:

document.getElementsByTagName("video").preload = "auto";