Chrome 不加載（或重定向）Vimeo 直接視頻網址

Question

語境：

所以我為一家公司建立了一個網站，它使用 Vimeo 來托管它所有的視頻。 我們使用 Vimeo Pro 提供的“直接下載”URL 來使用本機<video>元素播放 MP4 視頻。

您可以在此處查看該站點。

例如，該站點上的許多圖像幾乎在所有頁面上都顯示了 hover 上的視頻。 這些視頻就是我所描述的。 這不是播放器控件顯示的視頻，這些是正確的 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 我load()視頻，並在 hover 上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