Chrome 不加载（或重定向）Vimeo 直接视频网址

Question

语境：

所以我为一家公司建立了一个网站，它使用 Vimeo 来托管它所有的视频。我们使用 Vimeo Pro 提供的“直接下载”URL 来播放使用原生 <video> 元素的 MP4 视频。

你可以see the site here。

例如，该站点上的许多图像几乎在所有页面上都显示悬停视频。这些视频就是我所描述的。它不是用播放器控件显示的视频，那些是正确的 Vimeo iFrame 嵌入。

问题：

在网站上浏览了一会儿（导航到大约 4-5 个不同的页面应该会触发它），那些 MP4 视频停止加载，但仅限于 Chrome.我已经在我公司的很多计算机上测试过它，包括办公室和远程。我正在使用 Chrome for Mac，版本 107.0.5304.121。

“停止加载”是什么意思？我的意思是，如果您从网站源代码复制视频 src URL 并在新浏览器中打开它，它永远不会加载……但是如果您在隐身选项卡中使用相同的 URL，它就会加载并播放。您还可以在 DevTools 的网络选项卡中看到它的发生。

据我所知，Vimeo URL 实际上被重定向到 akamaized.net URL，并且该重定向停止工作，可能是由于某种速率限制或 cookie 跟踪？

这是显示问题的视频记录： https://www.dropbox.com/s/fnp0oaoaeb9s54i/New%20Recording%20-%2011_29_2022%2C%2010_32_58%20AM.webm?dl=0

用于显示这些视频的代码如下所示：

<video 
    src="https://player.vimeo.com/progressive_redirect/playback/759618180/rendition/1080p/file.mp4?loc=external&signature=73c3773c3830e6ef73af25b0c88e33c411a79a365497ef56519b5f18a963b523" 
    loop="loop" 
    autoplay="autoplay" 
    playsinline="true" 
    disablepictureinpicture="true" 
    preload="none" 
    muted=""
>
</video>

然后当视频在视图中时使用 IntersectionObserver I load() 视频，悬停时我 play() 视频。

Vimeo 支持说他们“无法重现问题”，鉴于我公司（和客户）中的多人可以看到这一点，我认为 Vimeo 支持是错误的。

尝试的解决方案：

我尝试在每个视频上设置crossorigin="anonymous"，但没有效果。

我实现了 Intersection Observer 和 preload="none" 代码，以便更有效地加载视频。这有助于带宽使用，但没有解决 Vimeo video 未加载/重定向的问题。

路口观察员：

一条评论要求提供 Intersection Observer 代码，所以就在这里。这是一个使用自定义 IntersectionObserver 指令的大型 Vue 组件，因此我对其进行了一些简化。

<figure
        v-intersection-observer.once="{ rootMargin: '50% 0% 50% 0%' }"
        :class="classes"
        @has-entered="onEntered" // Above directive emits this
        @mouseover.native="play()"
        @mouseleave.native="pause()"
    >
    <video
            ref="video"
            :src="videoUrl"
            :loop="true"
            :autoplay="true"
            :muted="true"
            :playsinline="true"
            disablepictureinpicture="true"
            preload="none"
            crossorigin="anonymous"
            @error="onError('video')"
        />
</figure>
<script>
export default {
    props: {
        videoUrl: {}
    },
    methods: {      
        onEntered() {
            if (this.$refs.video) {
                this.$refs.video.load()
            }
        },
        pause() {
            if (this.$refs.video) {
                this.$refs.video.pause()
            }
        },
        play() {
            if (this.$refs.video && this.$refs.video.paused) {
                return this.$refs.video.play()
            }
        },
    }
}
</script>

Answer 1

这是发生了什么：

• video.play() 开始异步加载视频内容。
• video.pause() 中断视频加载，因为它还没有准备好。
• video.play() 异步大声拒绝。

这是使用promise 实现播放/暂停的正确方法

<video id="video" preload="none" src="https://example.com/file.mp4"></video>
 
<script>
  // Show loading animation.
  var playPromise = video.play();
 
  if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
      // We can now safely pause video...
      video.pause();
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
</script>

另外，请注意这个Chromium Bug