jquery - 使用 jQuery 一次性获取 YouTube 或 Vimeo 缩略图

Question

我正在尝试将 YouTube 缩略图和 Vimeo 缩略图放在同一个脚本中，但这对我来说并不容易，因为我是 jQuery 的新手。

我想问是否有人可以看看这个在任何浏览器中都能正常工作的 jQuery 脚本：http: //jquery-howto.blogspot.com/2009/02/how-to-get-youtube-video-screenshot.html

我也看到了这个问题：从 Vimeo 获取 img 缩略图？，但是没有关于如何用 jQuery 来做这件事。

我认为对于已经知道 jQuery 编码的人来说，制作应该很容易，对于将制作同时使用这两个视频的 Tumblr 主题的人来说，这将是最终的解决方案。

score 7 · Accepted Answer

您可以通过观察 YouTube 视频缩略图具有独特的 URL 模式来做到这一点，您可以通过解析视频 ID 来生成该模式。Vimeo 缩略图可以类似地获得，但解析出视频 id，然后使用简单的 API来获取缩略图的链接。

我为此 Meta question编写了一些代码；它不是特别干净，但它应该可以工作：

function processURL(url, success){
    var id;

    if (url.indexOf('youtube.com') > -1) {
        id = url.split('/')[1].split('v=')[1].split('&')[0];
        return processYouTube(id);
    } else if (url.indexOf('youtu.be') > -1) {
        id = url.split('/')[1];
        return processYouTube(id);
    } else if (url.indexOf('vimeo.com') > -1) {
        if (url.match(/^vimeo.com\/[0-9]+/)) {
            id = url.split('/')[1];
        } else if (url.match(/^vimeo.com\/channels\/[\d\w]+#[0-9]+/)) {
            id = url.split('#')[1];
        } else if (url.match(/vimeo.com\/groups\/[\d\w]+\/videos\/[0-9]+/)) {
            id = url.split('/')[4];
        } else {
            throw new Error('Unsupported Vimeo URL');
        }

        $.ajax({
            url: 'http://vimeo.com/api/v2/video/' + id + '.json',
            dataType: 'jsonp',
            success: function(data) {
                sucess(data[0].thumbnail_large);
            }
        });
    } else {
        throw new Error('Unrecognised URL');
    }

    function processYouTube(id) {
        if (!id) {
            throw new Error('Unsupported YouTube URL');
        }

        sucess('http://i2.ytimg.com/vi/' + id + '/hqdefault.jpg');
    }
}

该函数使用回调，因为 Vimeo API 调用是异步的。

score 2 · Accepted Answer

我使用了易江建议的一切。我不得不更改几行以使其正常工作，更改如下：

function processURL(url, success){
var id;

if (url.indexOf('youtube.com') > -1) {
    <!-- CHANGED -->
    id = url.split('v=')[1].split('&')[0];
    return processYouTube(id);
} else if (url.indexOf('youtu.be') > -1) {
    id = url.split('/')[1];
    return processYouTube(id);
} else if (url.indexOf('vimeo.com') > -1) {
    <!-- CHANGED -->
    if (url.match(/http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/)) {
        id = url.split('/')[1];
    } else if (url.match(/^vimeo.com\/channels\/[\d\w]+#[0-9]+/)) {
        id = url.split('#')[1];
    } else if (url.match(/vimeo.com\/groups\/[\d\w]+\/videos\/[0-9]+/)) {
        id = url.split('/')[4];
    } else {
        throw new Error('Unsupported Vimeo URL');
    }

    $.ajax({
        url: 'http://vimeo.com/api/v2/video/' + id + '.json',
        dataType: 'jsonp',
        success: function(data) {
            <!-- CHANGED -->
             success(data[0].thumbnail_large);
        }
    });
} else {
    throw new Error('Unrecognised URL');
}

function processYouTube(id) {
    if (!id) {
        throw new Error('Unsupported YouTube URL');
    }
    <!-- CHANGED -->
    success('http://i2.ytimg.com/vi/' + id + '/hqdefault.jpg');
}
}

底部的 2 个更改只是为了修复“成功”的拼写。

score 1 · Accepted Answer

此外，Vimeo 使用https://vimeo.com/n格式，因此使 s 可选，并且 id 是拆分数组中的第 4 个 [3] 而不是第 2 个 [1]：

function get_video_thumb(url, callback){
    var id = get_video_id(url);

    if (id['type'] == 'y') {
        return processYouTube(id);
    } else if (id['type'] == 'v') {

        $.ajax({
            url: 'http://vimeo.com/api/v2/video/' + id['id'] + '.json',
            dataType: 'jsonp',
            success: function(data) {
                callback({type:'v', id:id['id'], url:data[0].thumbnail_large});
            }
        });
    }

    function processYouTube(id) {
        if (!id) {
            throw new Error('Unsupported YouTube URL');
        }

        callback({type:'y',id:id['id'],url:'http://i2.ytimg.com/vi/'+id['id'] + '/hqdefault.jpg'}); 
    }
}

function get_video_id(url) {
        var id;
        var a;
    if (url.indexOf('youtube.com') > -1) {
        id = url.split('v=')[1].split('&')[0];
        return processYouTube(id);
    } else if (url.indexOf('youtu.be') > -1) {
        id = url.split('/')[1];
        return processYouTube(id);
    } else if (url.indexOf('vimeo.com') > -1) {
    if (url.match(/https?:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/)) {
        id = url.split('/')[3];
    } else if (url.match(/^vimeo.com\/channels\/[\d\w]+#[0-9]+/)) {
        id = url.split('#')[1];
    } else if (url.match(/vimeo.com\/groups\/[\d\w]+\/videos\/[0-9]+/)) {
        id = url.split('/')[4];
    } else {
        throw new Error('Unsupported Vimeo URL');
    }

    } else {
        throw new Error('Unrecognised URL');
    }
        a = {type:'v',id:id};
        return a;
    function processYouTube(id) {
        if (!id) {
            throw new Error('Unsupported YouTube URL');
        }
                a = {type:'y',id:id};
        return(a); // default.jpg OR hqdefault.jpg
    }
}

score 0 · Accepted Answer

我认为现在在 vimeo.com 的 id 始终是最后一个值......

} else if (sourceVideo.indexOf("vimeo.com") >= 0) {
    id = sourceVideo.split('/');
    id = id[id.length-1];
}

不需要 3 正则表达式。

score 0 · Accepted Answer

这是我的例子，

示例 YouTube 网址：https ://www.youtube.com/watch?v=DNWo43u6Kqo

示例 Vimeo 网址：https ://player.vimeo.com/video/30572181

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <title>Video Thumbnails</title>
</head>
<body>
    <div style="width:80%">
        YouTube/Vimeo URL : 
        <input type="text" id="txtVideoLink" value="https://player.vimeo.com/video/30572181" style="width:30%"/>
        <a href="javascript:void(0)" onclick="GetImageFromVideoURL()">Get Video Thumbnail</a>
        <br />
        <br />
        <img src="" id="thumbImg">
    </div>

    <script>
        function GetImageFromVideoURL() {
            var i, image_url, isValidURL, isVValidURL, isEmbValidURL, uniqueIdLength, uniqueID;
            uniqueIdLength = 11;
            image_url = $('#txtVideoLink').val();

            var url;
            if (image_url != null) {
                url = image_url;
            }
            else {
                url = "";
            }

            if (url.search("youtube") != -1) {
                isValidURL = image_url.indexOf("www.youtube.com/watch?v=");
                isVValidURL = image_url.indexOf("www.youtube.com/v/");
                isEmbValidURL = image_url.indexOf("www.youtube.com/embed/");

                if (isValidURL == -1 && isVValidURL == -1 && isEmbValidURL == -1) {
                    alert("Invalid URL");
                    return false;
                }

                if (isValidURL != -1) {
                    i = image_url.indexOf("v=");
                }
                else if (isVValidURL != -1) {
                    i = image_url.indexOf("v/");
                }
                else if (isEmbValidURL != -1) {
                    i = image_url.indexOf("embed/");
                    i = i + 4;
                }
                i = i + 2;

                uniqueID = image_url.substr(i, uniqueIdLength);
                imageURL = 'https://img.youtube.com/vi/' + uniqueID + '/0.jpg';
                $('#thumbImg').attr("src", imageURL);
                return true;
            }
            else if ((url.search("vimeo") != -1)) {
                isVimeoURL = image_url.indexOf("vimeo.com/video");
                isvVimeoURL = image_url.indexOf("www.vimeo.com/video");
                if (isVimeoURL == -1 && isvVimeoURL == -1) {
                    alert("Invalid URL");
                    return false;
                }

                if (isVimeoURL != -1) {
                    i = image_url.indexOf("video/");
                }
                i = i + 6;

                uniqueID = image_url.substr(i, uniqueIdLength);

                $.ajax({
                    type: 'GET',
                    url: 'https://vimeo.com/api/v2/video/' + uniqueID + '.json',
                    jsonp: 'callback',
                    dataType: 'jsonp',
                    success: function (data) {
                        var thumbnail_src = data[0].thumbnail_large;
                        $('#thumbImg').attr("src", thumbnail_src);
                    }
                });
                return true;
            }
            alert("Invalid URL");
            $('#txtVideoLink').val("");
            return false;
        }

    </script>
</body>
</html>

jquery - 使用 jQuery 一次性获取 YouTube 或 Vimeo 缩略图

5 回答 5

Related

Reference