Chrome中Vimeo直接视频URL无法加载/跳转的技术问题

我为某公司搭建的网站使用Vimeo托管视频，通过Vimeo Pro的「直接下载」URL，用原生<video>元素播放MP4视频。网站内大量hover触发显示的视频均采用这种方式（区别于带控件的标准Vimeo iframe嵌入）。

核心问题：仅在Chrome浏览器（Mac版107.0.5304.121）中，浏览网站约4-5个页面后，这些MP4视频会停止加载。具体表现为：

• 复制视频srcURL到新标签页无法加载，但隐身标签页中同一URL可正常播放
• DevTools的Network标签可见Vimeo的URL重定向（到akamaized.net）失效
• 推测是速率限制或Cookie追踪导致，但Vimeo支持团队无法复现该问题，我司及客户多人均能观测到

视频元素代码：

<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>

Intersection Observer相关Vue组件代码（简化版）：

<figure
        v-intersection-observer.once="{ rootMargin: '50% 0% 50% 0%' }"
        :class="classes"
        @has-entered="onEntered"
        @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>

已尝试无效方案：

• 为视频添加crossorigin="anonymous"属性
• 用Intersection Observer+preload="none"优化加载，仅降低带宽消耗，未解决重定向失效问题

1. 处理Vimeo签名URL的时效性 #

Vimeo带signature参数的直接下载URL通常有时效性限制，多次请求或超时后会失效。当前直接复用固定签名URL的方式，会导致用户浏览多个页面后URL过期，引发重定向失败。

解决思路：

• 后端动态获取临时播放URL：每次页面加载或视频即将进入视口时，通过后端调用Vimeo API（如GET /videos/{video_id}/files）获取最新的直接下载URL，再传给前端<video>元素。
• 避免前端直接复用固定的签名URL，确保每次请求的URL都是最新有效链接。

2. 排查Chrome的Cookie/缓存限制 #

隐身标签页能正常加载，说明问题和Chrome常规会话的缓存、Cookie有关：

• 清除Vimeo相关Cookie：手动清除player.vimeo.com和akamaized.net的Cookie，测试是否恢复正常。若有效，说明是Cookie累积导致的访问限制。
• 强制禁用视频请求缓存：调用video.load()时，给URL添加随机查询参数（如?t=${Date.now()}），避免浏览器缓存旧的重定向响应。修改onEntered方法：

onEntered() {
    if (this.$refs.video) {
        const [originalUrl, paramsStr] = this.videoUrl.split('?');
        const params = new URLSearchParams(paramsStr || '');
        params.set('t', Date.now());
        this.$refs.video.src = `${originalUrl}?${params.toString()}`;
        this.$refs.video.load();
    }
}

注意：若Vimeo的签名URL不允许额外参数，此方法无效，需改用后端动态获取URL。

3. 调整加载策略，避免触发速率限制 #

Vimeo Pro的直接下载可能存在请求速率限制，短时间内加载多个视频会触发限制：

• 缩小Intersection Observer的rootMargin范围，减少预加载的视频数量。
• 实现视频懒加载队列：当多个视频进入视口时，依次加载而非同时调用load()。
• 页面切换时，销毁当前页面的视频实例，释放资源并取消未完成的请求，避免累积请求数触达限制。

4. 改用Vimeo HLS流替代直接MP4 URL #

若直接MP4的重定向问题无法解决，可尝试使用Vimeo提供的HLS流（.m3u8），结合hls.js库播放：

• 通过Vimeo API获取HLS流URL，前端用hls.js加载播放，替代原生<video>的MP4直接播放。
• HLS流的请求机制更稳定，Vimeo对HLS的访问限制可能更宽松。

5. 向Vimeo提交详细诊断信息 #

既然Vimeo支持无法复现，提供以下信息帮助他们定位：

• Chrome的Network完整日志（包含请求/响应头、Cookie、重定向状态码）
• 问题触发时的具体时间、IP地址
• 网站的视频请求频率、页面切换时的请求数量统计

内容的提问来源于stack exchange，提问作者Drew Baker