Получите миниатюры YouTube или Vimeo в одном кадре с помощью jQuery - PullRequest
Новая
       60

Получите миниатюры YouTube или Vimeo в одном кадре с помощью jQuery

0 голосов
/ 05 марта 2011

Я пытаюсь соединить миниатюру YouTube и миниатюру Vimeo в одном и том же скрипте, но мне не очень легко, потому что я новичок в jQuery.

Я хотел бы спросить, может ли кто-нибудь взглянуть на этот jQuery-скрипт, который отлично работает в любом браузере: http://jquery -howto.blogspot.com / 2009/02 / how-to-get-youtube-video -screenshot.html

Я также видел вопрос: Получить эскизы img из Vimeo? , но нет ничего о том, как это сделать с помощью jQuery.

Я думаю, что это должно быть очень легко сделать для тех, кто уже знает кодировку jQuery, и это будет окончательное решение для тех, кто собирается создать тему Tumblr, которая использует оба видео.

Ответы [ 5 ]

7 голосов
/ 05 марта 2011

Вы делаете это, наблюдая, что миниатюры видео на YouTube имеют четкий шаблон URL, который вы можете создать, проанализировав идентификатор видео.Миниатюры Vimeo могут быть получены аналогичным образом, но с разбором идентификатора видео и последующим использованием simple API для получения ссылки на миниатюру.

Я написал код, чтобы сделать это для этого мета-вопроса ;он не особо чистый, но должен работать: 

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');
    }
}

Функция использует обратный вызов, поскольку вызовы API Vimeo являются асинхронными.

2 голосов
/ 06 мая 2011

Я использовал все, что предложил И Цзян.Я должен был изменить пару строк, чтобы заставить его работать должным образом для меня, изменения отмечены ниже: 

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 нижних изменения были только для того, чтобы исправить написание «успеха».

1 голос
/ 11 октября 2014

Кроме того, Vimeo использует формат https://vimeo.com/n, поэтому установите s необязательным, и идентификатор будет 4-м [3], а не 2-м [1] в массиве split: 

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
    }
}
0 голосов
/ 02 августа 2017

Вот мой пример,

Пример URL YouTube: https://www.youtube.com/watch?v=DNWo43u6Kqo

Пример URL 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>
0 голосов
/ 06 февраля 2014

Я думаю, что теперь на vimeo.com идентификатор всегда является последним значением ... 

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

Не нужно регулярное выражение 3.

...