6

我有一个奇怪的问题。我的两个版本的 chrome（普通版和金丝雀版）拒绝循环播放我正在播放的视频。或者好吧，有时他们会循环两次，然后停止。奇怪的是，它在 safari 中工作，所以我知道这不是一些 webkit shizzle 下降。

<video autoplay="autoplay" data-type="bg" id="video" loop="loop">
    <source src="/assets/video/_L88P.mp4" content-type="video/mp4">
</video>

我的设置是一个带有山狮和 mamp 的 mac，chrome 版本是最新的（canary：26.0.1384.0 和常规：24.0.1312.52）。

有谁知道为什么会这样？

4

5 回答 5

13

我还发现如果 MP4 关键帧设置不正确，Chrome 会阻塞。例如，在 After Effects 中的输出中，如果关键帧距离保留为“自动”，则视频无法正确循环播放。

我的怀疑是 Chrome 需要在视频长度内均匀分割的关键帧，而不是在关键帧之间结束。即，如果您的视频是 24 帧，则使您的关键帧距离可整除，例如 4。

After Effects 渲染输出设置

于 2013-04-06T20:44:39.473 回答
8

这个解决了，这是我的解决方案：

视频的分辨率太大。即使比特率很低，chrome 也不想这样做。将其调整为 720p 并且效果很好。

如果您遇到问题，其他建议的解决方案：

  • 设置正确的内容类型，包括编解码器。
  • 确保您使用的浏览器支持您的文件类型。对于活的东西，始终至少使用 .mp4 和 .ogg，并包括 .webm 以确保安全。

  • 将其设置为通过 javascript 循环。这也是一个很好的后备方案，因为浏览器不能使用视频标签上的循环属性（主要示例是 ipad）。下面是我昨天复制的一个网站的一些示例代码（对不起，不记得出处了）

    var myVideo = document.getElementById('video');
if (typeof myVideo.loop == 'boolean') { // loop supported
    myVideo.loop = true;
} else { // loop property not supported
    myVideo.on('ended', function () {
    this.currentTime = 0;
    this.play();
    }, false);
}
myVideo.play();
于 2013-01-16T10:25:49.713 回答
4

仅当您在本地运行您的网站时才会发生这种情况......
我在 Chrome 上遇到了同样的问题，但我在 XAMP 本地服务器中找到了解决方案......

您可以使用任何您想要的本地服务器（如 wamp 等）...但是该站点必须位于服务器根目录中...这样 chrome 就可以理解视频来自服务器而不是来自本地混搭

于 2015-10-23T16:17:22.237 回答
1

我最近自己也遇到了一些问题。事实证明，这与我的网站位于本地主机上有关。当我将站点移动到我的生产服务器并进行远程测试时，一切都按预期工作。

为了强制它在 localhost 上工作，我使用了 Joakim Bananskal 的解决方案，但是播放视频会导致错误，因为它已经在尝试播放它，所以我只需要先使用load().

将其设置为循环似乎也引起了问题，因为视频从未触发过该ended事件。

我对 localhost 的最终解决方案如下：

$("video").each(function () {
    this.loop = false;
    this.onended = function () {
        this.load();
    };
    this.play();
});

使用此 HTML：

<video preload="auto" autoplay>
    <source src="/video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="/video.ogg" type="video/ogg">
    <img src="/backupImage.png" />
</video>
于 2016-07-20T09:49:36.777 回答
0

出于某种原因，我遇到了“结束”事件绑定的问题。

这是我修复它的方法：

  1. 从视频中删除了“循环”属性。

  2. 添加 onended 以调用 replay()

    <video autoplay='true' onended="replay()"></video>

  3. 定义 replay() 如下：

    功能重播（）{
    console.log('视频结束');
    document.getElementsByTagName('video').currentTime = 0;
    document.getElementsByTagName('video')[0].play();
}
于 2015-01-09T08:27:48.007 回答