对于MP4跨平台的语法嵌入HTML5 [英] cross-platform syntax for mp4 embedded in html5

问题描述

下code产生的火狐正确的嵌入式视频，但不会在的Internet Explorer 或机器人。我有我所有的浏览器设置为自动更新，所以他们都始终运行最新版本。

 在'互联网explorer`中，code以下留下了大片空白，其中
视频应该的。用户必须将鼠标悬停在之前的大片空白
控制变得可见。在`android`中，code以下产生不可用/不可点击区域，以及
用户有可能极大地放大焦点，以获得小的启动按钮成为
大到点击开始播放视频。然而，在`firefox`中，code下图为视频的第一帧，
您可以点击启动视频。
 

如何更改低于code来获得这三个浏览器显示第一帧时，页面加载，并为视频是启动能够在第一帧上的用户点击？

下面是在文件共享网站一个链接到视频文件。

下面是 ffmeg code用于处理视频：

 的ffmpeg -y -i SourceFile.mp4 -s 1280×720 -c：v libx264 -b 3M -strict -2 -movflags的fastStart DestFile.mp4
 

感谢 offbeatmammal 为我安排这么远。
这里是 HTML5 code在Web页面浏览器中嵌入视频：

 ＆lt;视频WIDTH =640HEIGHT =480控制＆GT;
    ＆lt;信源SRC =somefile.mp4TYPE =视频/ MP4＆GT;
    你的浏览器不支持视频标签。
＆LT; /视频＆GT;
 




解决方案

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

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

您还可以设置视频元素的preLOAD属性通过javascript自动，以preLOAD视频一旦在页面加载：

  document.getElementsByTagName（视频）preLOAD =自动。
 

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>

解决方案

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/

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屋！