减少HTML5视频的加载时间

时间:2014-01-25 12:06:19

标签: html5 html5-video

直播网站 - http://www.thecompletefinancialplan.com

我使用videojs播放器在我的网站上添加视频。

视频:KeithKolinskyCFP.mp4 - 25.5MB,        KeithKolinskyCFP.webm - 31MB,        KeithKolinskyCFP.ogv - 50MB

我已经等了至少30秒而且还没有开始在mozilla中播放,我的互联网连接并不慢。不知道如何减少该视频的加载时间。

我的代码 -

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" poster="http://www.thecompletefinancialplan.com/images/video.jpg" width="320" height="240" data-setup="{}">
    <source src="http://www.thecompletefinancialplan.com/Keith_video.mp4" type='video/mp4' />
    <source src="http://www.thecompletefinancialplan.com/Keith_video.webm" type='video/webm' />
    <source src="http://www.thecompletefinancialplan.com/Keith_video.ogv" type='video/ogg' />

   <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="320" height="240">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fwww.thecompletefinancialplan.com%2FKeith_video.jpg',{'url':'http%3A%2F%2Fwww.thecompletefinancialplan.com%2FKeith_video.mp4','autoPlay':false}]}" />
    <img alt="Big Buck Bunny" src="http://www.thecompletefinancialplan.com/images/video.jpg" width="320" height="240" title="No video playback capabilities, please download the video below" />
</object>

</video>

1 个答案:

答案 0 :(得分:1)

几秒钟之前我用Chrome 32 for Mac尝试过,它立即加载。 当我尝试用Firefox加载它时,它没有加载。

我在Firefox上加载了很长时间。所以也许“videojs”播放器框架出现了失败。

使用普通的html5视频标签或其他视频播放器框架在测试网站上试用。

我自己在这里测试过:Chrome中的http://lucas-recknagel.de/video.html没有问题,但在Firefox中,标准播放器显示视频类型/ MIME类型的错误。

因此您可能尝试重新导出您的webm文件。

希望有所帮助。