Question

我有一个视频作为网页的背景，我试图让它循环。这是代码：

<video autoplay='true' loop='true' muted='true'>
  <source src='/admin/wallpapers/linked/4ebc66e899727777b400003c' type='video/mp4'></source>
</video>

即使我已经告诉视频循环，但事实并非如此。我还尝试使用onended属性循环（根据this Mozilla support thread，我也尝试了一点jQuery）。到目前为止，没有任何工作。这是Chrome或我的代码的问题吗？

修改

我检查了工作副本的网络事件和HEAD（http://fhsclock-labs.heroku.com/no-violence）与我正在努力工作的应用程序。不同之处在于工作副本是从Heroku上的静态资产（通过Varnish，显然）提供视频，而我的服务来自GridFS（MongoDB）。

Chrome检测器的“网络”标签显示，在我的应用程序中，视频会被请求三次。一次状态为“待定”，第二次“取消”，最后一次为200 OK。工作副本仅显示两个请求，一个是状态待定，另一个是206部分内容。但是，在视频播放一次后，该请求将更改为“已取消”，并再次请求该视频。在我的应用程序中，这不会发生。

至于Type，在我的应用程序中，两个是“未定义”而另一个是“video / mp4”（应该是它）。在工作应用程序中，所有请求都是“video / mp4”。

此外，我在控制台收到Resource interpreted as Other but transferred with MIME type undefined.警告。

我不太确定从哪里开始。我相信这个问题是服务器端的，因为服务文件就像静态资产一样正常。可能是服务器没有发送正确的内容类型。这可能是GridFS的一个问题。我不知道。

无论如何，来源是here。您可以提供任何洞察力。

Answer 1

啊，我只是偶然发现了这个问题。

事实证明，只有视频文件由了解的服务器提供，才能在Chrome上的<video>元素中循环（或任何类型的搜索） 部分内容请求。即服务器需要遵守包含具有206“部分内容”响应的“Range”标头的请求。如果视频足够小以便通过chrome完全缓冲，并且不再进行服务器往返，则情况甚至如此：如果您的服务器第一次没有遵守chrome的Range请求，则视频将无法循环播放或可搜索

所以是的，GridFS存在一个问题，虽然可以说Chrome应该更宽容。

Answer 2

最简单的解决方法：

$('video').on('ended', function () {
  this.load();
  this.play();
});

视频到达时'ended'事件会触发，video.load()会将视频重置为开头，video.play()会在加载后立即开始播放。

这适用于您无法控制服务器响应的Amazon S3，并且如果视频缺少其长度元数据，也可以解决与video.currentTime无关的Firefox问题。< / p>

没有jQuery的类似javascript：

document.getElementsByTagName('video')[0].onended = function () {
  this.load();
  this.play();
};

Answer 3

过去看起来像是一个问题，至少有两个已关闭的错误，但两者都声明它已被修复：

http://code.google.com/p/chromium/issues/detail?id=39683

http://code.google.com/p/chromium/issues/detail?id=18846

由于Chrome和Safari都使用基于webkit的浏览器，因此您可以使用其中的一些工作： http://blog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how-to-solve-them/

function restartVideo(){
vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won't update, values smaller than 0.1 was causing bug as well.
vid.play();
}

//loop video
vid.addEventListener('ended', restartVideo, false);

Answer 4

我的情况：

我有完全相同的问题，但是单独更改响应消息的标题并没有。没有循环，重播或寻求。另外一个纯粹的停止不起作用，但这可能是我的配置。

<强>答案：

根据一些网站（无法再找到它们），它也可能在视频结束后立即触发load（）方法，并且在下一个应该开始之前触发。这应该重新加载源，导致再次工作的视频/音频元素。

<强> @约翰

请注意，您的答案/链接是正常错误，并没有专注于此问题。使用服务器/网络服务器是导致此问题的原因。虽然这些链接描述的错误是不同的类型。这也是为什么答案不起作用的原因。

我希望它有所帮助，我仍在寻找解决方案。

Answer 5

如果以上答案都没有对您有所帮助，请确保您的检查员没有选中“禁用缓存”选项。由于Chrome从缓存中抓取视频，因此它基本上可以使用一次。刚刚调试了20分钟，然后才意识到这是原因。供参考，所以我知道我不是唯一一个someone else's chromium bug report。

Answer 6

它是超级跛脚但dropbox使用正确的状态代码。所以上传到Dropbox并用dl替换www。

因此，使用Dropbox网址可以正常播放视频。

Answer 7

我遇到了同样的问题，不可避免地通过流内容解决了问题。

例如，这是带有PHP laravel刀片html代码的代码，该代码正在请求流路由：

sendMail:
  handler: lib/controllers/smtp/send.emailSend
  events:
    - sns: ${self:custom.secrets.SNS_TOPIC}

在控制器中，我将流传输视频并将其作为laravel流函数返回：

<video>
    <source src="{{route('getVideoStream',$videoId)}}" type="video/mp4"/>
</video>

VideoStream类是我从GitHub gist找到的流式类：

   public function getVideoStream($videoId){

        $path = $pathOfVideo;

        $headers = [
            'Content-Type' => 'video/mp2t',
            'Content-Length' => File::size($path),
            'Content-Disposition' => 'attachment; filename="start.mp4"'
        ];

        $stream = new VideoStream($path);

        return response()->stream(function () use ($stream) {
            $stream->start();
        });
    }

Answer 8

对于 9 年后访问此页面的任何人，如果上述所有答案都不起作用：我也遇到了这个问题，我认为问题的根源在于我的浏览器或服务器。

我后来注意到互联网上使用循环视频的其他网站对循环视频没有问题。为了进行故障排除，我从其中一个网站下载了一个随机视频，我访问并上传到我自己的服务器上，高兴地发现它可以正常工作，因此问题的根源似乎是我正在使用的视频。

然后我用一个在线视频转换器网站修复了我的视频（不想特别宣传任何内容，但谷歌快速研究中的第一个确实有效），唉，这解决了问题。

我不确定问题的真正原因是什么。我确实假设我的客户交给我的原始视频存在转换或压缩错误。

Answer 9

我知道这与提出的问题并不完全相同，但如果有人在遇到类似问题时遇到此问题，请确保您的资源正确无误。

我正在加载mp4和webm文件，发现该视频未在Chrome中循环播放。这是因为webm文件是列出的第一个source，因此Chrome正在加载webm文件，而不是mp4。

希望能帮助遇到此问题的其他人。

<video autoplay loop>
    <source src="/path-to-vid/video.mp4" type="video/mp4">
    <source src="/path-to-vid/video.webm" type="video/webm">
</video>

HTML5视频不会循环播放

9 个答案: