问题描述
我想以一种应可跨浏览器工作的方式嵌入MP4视频(H.264),但如果可以使用HTML5以获得更好的性能,则应使用html5.只要我不提供WebM版本,Firefox就应该退回到Flash.
I want embed MP4 video (H.264) in a way that should work cross browser but uses html5 if available for better performance. Firefox should fall back to Flash as long as I don't provide an WebM version.
问题:
Firefox在开始播放之前先下载整个视频,而Chrome和其他浏览器在仍在下载时播放.
Firefox downloads the whole video before starting to play, while Chrome and other browsers play while still downloading.
这就是我所做的:
<video poster="poster.jpg" preload="auto" autobuffer autoplay loop >
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
要实现Flash后备广告,我使用了jMediaElement:
To implement the Flash fallback i used jMediaElement:
jQuery(function(){
jQuery('video').jmeEmbed();
});
我尝试了一些jMediaElement的替代方法,但是在隐藏控件以及在Flash Player中使用自动播放/循环时遇到了问题.jMediaElement使用JWplayer作为后备,并且所有这些东西在video标签中声明时都可以正常工作.
I tried some alternatives to jMediaElement, but I had problems hiding the controls and using autoplay/loop in the flash player. jMediaElement uses JWplayer as fallback and all these things just work when declared in the video tag.
开发版本当前位于: http://acn.lws-service.de/
该视频应按预期的MIME类型"video/mp4"发送.问题可能与JWplayer/jMediaElement有关-还是视频(编码)本身?
The video is delivered with MIME type "video/mp4" as it is supposed to. The problem might be related to JWplayer/jMediaElement - or could it be the video (encoding) itself?
jMediaElement的替代方案仍然可以使视频自动播放,循环播放和隐藏控件.
An alternative to jMediaElement which still allows the video to autoplay, loop and hide the controls would be appreciated as well.
推荐答案
问题出在您的视频上.您的视频没有原子运动数据,因此必须完全下载才能通过Flash播放(无逐行下载).有一个简单的解决方案.有一个Adobe Air应用程序,应在文件的开头添加您的Moov数据.
The problem is your video. Your video has no atom moov data, so it has to be fully downloaded, to get it played with flash (no progressive download). There is a simple solution. There is an Adobe Air App, which should add your moov data at the start of the file.
You can download it here. You can find more information here.
关于您对标记所做的更改.您应该始终添加一个type属性.关于自动缓冲和预加载.autobuffer确实不是HTML5编译器,因此已更改为preload.FF3.6确实支持自动缓冲,但不支持预加载,幸运的是,如果附加了preload ="/preload ="auto",则jMediaElement会检测到此问题并自动将autobuffer设置为true.但是,如果您使用的是自动播放,则可以自动设置播放器的行为以尽快下载视频.jMediaElement也对循环进行了标准化,因此这里没有问题.您的HTML代码应如下所示:
About the changes you made to your Markup. You should always add a type attribute. About autobuffer and preload. autobuffer is indeed not HTML5 compilant and was changed to preload. FF3.6 does support autobuffer, but not preload, luckily jMediaElement will detect this and will automatically set autobuffer to true, if preload=""/preload="auto" is attached. But in case you are using autoplay, you automatically set the behavior of the player to download the video as soon as possible. loop is also normalized by jMediaElement, so no problem here. Your HTML code should look like this:
<video poster="poster.jpg" autoplay loop >
<source src="video.mp4" type="video/mp4" />
</video>
或更短一点:
<video poster="poster.jpg" src="video.mp4" type="video/mp4" autoplay loop ></video>
这篇关于如何(伪)以交叉浏览器和html5方式流式传输H.264视频?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!