如何在Angular 2+中使用Vimeo API实现输入URL加载播放视频功能

实现思路 #

用Vimeo官方提供的Player API完成需求，全程通过API调用生成播放器、加载视频，不需要手动拼接iframe，完全符合作业要求。

具体实现步骤 #

1. 引入依赖 #

直接在页面头部引入Vimeo官方Player SDK脚本，公开可播放的视频不需要额外申请开发者密钥即可使用。

2. 搭建页面结构 #

包含两个必填元素：

• 输入框：设置占位符提示用户输入Vimeo视频URL
• 播放器容器：空的div元素，用来挂载API生成的播放器实例

3. 编写交互逻辑 #

• 编写视频ID提取逻辑：从用户输入的Vimeo URL中提取出唯一的视频ID，常规Vimeo公开链接格式为https://vimeo.com/[视频ID]，通过正则或者字符串拆分即可拿到ID
• 监听输入框的提交事件（比如回车、失焦、点击提交按钮），调用Vimeo Player API初始化播放器，传入视频ID和容器元素即可完成视频加载

完整可运行代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vimeo 视频加载</title>
    <!-- 引入Vimeo Player SDK -->
    <script src="https://player.vimeo.com/api/player.js"></script>
    <style>
        .container { margin: 30px auto; max-width: 800px; }
        #vimeoUrl { width: 100%; padding: 10px; font-size: 16px; margin-bottom: 20px; box-sizing: border-box; }
        #playerContainer { width: 100%; aspect-ratio: 16/9; }
    </style>
</head>
<body>
    <div class="container">
        <!-- 视频URL输入框 -->
        <input type="text" id="vimeoUrl" placeholder="请输入Vimeo视频URL，例如：https://vimeo.com/123456789">
        <!-- 播放器挂载容器 -->
        <div id="playerContainer"></div>
    </div>

    <script>
        const urlInput = document.getElementById('vimeoUrl');
        const playerContainer = document.getElementById('playerContainer');
        let player = null;

        // 从Vimeo URL中提取视频ID
        function getVimeoId(url) {
            const regex = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/[^\/]*\/videos\/|video\/|)(\d+)(?:|\/\?)/;
            const match = url.match(regex);
            return match ? match[1] : null;
        }

        // 监听输入框回车事件
        urlInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                const inputUrl = urlInput.value.trim();
                if (!inputUrl) return;

                const videoId = getVimeoId(inputUrl);
                if (!videoId) {
                    alert('请输入有效的Vimeo视频URL');
                    return;
                }

                // 如果已有播放器实例，先销毁
                if (player) {
                    player.destroy();
                }

                // 调用Vimeo API初始化播放器
                player = new Vimeo.Player(playerContainer, {
                    id: videoId,
                    width: '100%'
                });

                // 可选：加载完成后自动播放
                player.on('loaded', () => {
                    player.play();
                });
            }
        });
    </script>
</body>
</html>

关键说明 #

• 代码中new Vimeo.Player()就是Vimeo官方提供的API调用方式，所有播放器的生成、视频加载逻辑都由API内部完成，没有手动拼接iframe，完全符合作业要求
• 视频ID提取逻辑兼容大部分常见的Vimeo链接格式，包括频道链接、分组链接、普通直链等
• 你可以通过API的配置项自定义播放器的自动播放、循环、控制条显示等属性，也可以通过API调用实现播放、暂停、跳转等控制操作

内容的提问来源于stack exchange，提问作者Rahul Mukherjee