【问题标题】:HTML5 Video not showing up in Chrome before scroll滚动前 HTML5 视频未在 Chrome 中显示
【发布时间】:2014-07-02 09:37:16
【问题描述】:

我在使用 HTML5 视频和 Google Chrome 时遇到问题。

当我加载我的页面时。我看不到视频。没有海报图片,没有视频帧。 视频元素确实存在。

现在,如果我稍微滚动一下,视频就会显示并播放。 就像“请滚动以渲染和播放视频”..

这是我的代码:

<video id="videocontainer" loop autoplay preload="auto" poster="http://homepage.de/video/poster.jpg">
    <source src="http://homepage.de/video/BigWeb.mp4" type="video/mp4" />
    <source src="http://homepage.de/video/BigWeb.webm" type="video/webm" />
    <source src="http://homepage.de/video/BigWeb.ogv" type="video/ogg" />
    <object id="videocontainer-object">
        <param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param>
        <param name="flashvars" value="http://homepage.de/video/BigWeb.mp4&playButtonOverlay=false&loop=true&autoPlay=true&controlBarMode=none"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed id="videocontainer-embed" src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="720" flashvars="src=http://homepage.de/video/BigWeb.mp4&controlBarMode=none&playButtonOverlay=false&loop=true&autoPlay=true"></embed>
    </object>
</video>

编辑:我在小提琴上编造了一些东西。 http://jsbin.com/japewido/1/watch 当我使用“控件”时,谷歌浏览器一切正常。没有控制。视频没有开始。没有海报图片。只是一个空白的视频元素。

编辑第 2 次:查看当前 google chrome 的版本 (34) 后,我看到我使用的是 google chrome 26(自动更新程序不起作用)。我安装了当前版本,它现在可以工作了......(我想要我的时间回来^^)

【问题讨论】:

  • 你能用最小的fiddle重现你的问题吗?
  • 如果等待的时间足够长,则不必滚动。看起来浏览器将滚动作为提示它应该立即启动视频并且可能会减少缓冲区(如果视频在缓存中,它对我来说是立即的)。我不知道它是否属于错误。
  • @dystroy Mhh waitig 对我不起作用。它没有出现。我必须与页面交互。滚动或鼠标悬停在链接上。
  • @dystroy 我删除了海报图片,这似乎有帮助。视频马上开始了吗?

标签: html google-chrome video html5-video


【解决方案1】:
<script> 
var myVideo=document.getElementById("videocontainer"); 
myVideo.load();
</script>

试试这个

【讨论】:

  • 我以前试过这个,“问题”是一个非常旧的 chrome 版本(26)。使用最新版本一切正常。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-10-21
  • 1970-01-01
  • 2012-12-30
  • 1970-01-01
  • 2012-09-06
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多