mp4嵌入在html5中的跨平台语法 [英] cross-platform syntax for mp4 embedded in html5

问题描述

以下代码在 firefox 中正确嵌入视频，但在 internet explorer 或机器人。我的所有浏览器设置为自动更新，所以它们都始终运行最新版本。

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.  

如何更改以下代码，让所有这三种浏览器显示第一个

这是文件共享站点上视频文件的链接。

这是处理视频的 ffmeg 代码：

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

感谢 offbeatmammal 获得我这么远
这是在网页浏览器中嵌入视频的 html5 代码：

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>

推荐答案

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

Android browsers require some special handling to support MPEG-4/H.264 video format:

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

您还可以将视频元素的预加载属性设置为自动，以便在页面加载后通过javascript预加载视频：

You can also set the preload property of the video element to "auto" to preload the video via javascript once the page loads:

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

这篇关于mp4嵌入在html5中的跨平台语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！