18

YouTubeまたはVimeoのいずれかからURLを取得する関数を（JavaScriptで）作成しました。その特定のビデオのプロバイダーとIDを把握します（デモ：http：//jsfiddle.net/csjwf/）。

function parseVideoURL(url) {

    var provider = url.match(/http:\/\/(:?www.)?(\w*)/)[2],
        id;

    if(provider == "youtube") {

        id = url.match(/http:\/\/(?:www.)?(\w*).com\/.*v=(\w*)/)[2];
    } else if (provider == "vimeo") {

        id = url.match(/http:\/\/(?:www.)?(\w*).com\/(\d*)/)[2];
    } else {
        throw new Error("parseVideoURL() takes a YouTube or Vimeo URL");    
    }
    return {
        provider : provider,
        id : id
    }
}

それは機能しますが、正規表現の初心者として、私はそれを改善する方法を探しています。私が扱っている入力は、通常、次のようになります。

http://vimeo.com/(id)
http://youtube.com/watch?v=(id)&blahblahblah.....

1）現在、3つの別々の試合を行っていますが、1つの表現ですべてを試してみるのは理にかなっていますか？もしそうなら、どのように？

2）既存の試合はもっと簡潔にできますか？それらは不必要に複雑ですか？またはおそらく不十分ですか？

3）解析に失敗するYouTubeまたはVimeoのURLはありますか？私はかなりの数を試しましたが、これまでのところかなりうまくいくようです。

要約すると、私は単に上記の機能を改善する方法を探しています。アドバイスをいただければ幸いです。

4

11 に答える 11

24

これが、ほとんどの更新されたケースをカバーする正規表現での私の試みです。

function parseVideo(url) {
    // - Supported YouTube URL formats:
    //   - http://www.youtube.com/watch?v=My2FRPA3Gf8
    //   - http://youtu.be/My2FRPA3Gf8
    //   - https://youtube.googleapis.com/v/My2FRPA3Gf8
    // - Supported Vimeo URL formats:
    //   - http://vimeo.com/25451551
    //   - http://player.vimeo.com/video/25451551
    // - Also supports relative URLs:
    //   - //player.vimeo.com/video/25451551

    url.match(/(https?\/\/)(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
    var type = null;
    if (RegExp.$3.indexOf('youtu') > -1) {
        type = 'youtube';
    } else if (RegExp.$3.indexOf('vimeo') > -1) {
        type = 'vimeo';
    }

    return {
        type: type,
        id: RegExp.$6
    };
}
于 2014-03-31T14:14:05.987 に答える
15

正規表現は素晴らしく簡潔ですが、すぐに複雑になる可能性があります。

http://jsfiddle.net/8nagx2sk/

function parseYouTube(str) {
    // link : //youtube.com/watch?v=Bo_deCOd1HU
    // share : //youtu.be/Bo_deCOd1HU
    // embed : //youtube.com/embed/Bo_deCOd1HU

    var re = /\/\/(?:www\.)?youtu(?:\.be|be\.com)\/(?:watch\?v=|embed\/)?([a-z0-9_\-]+)/i; 
    var matches = re.exec(str);
    return matches && matches[1];
}

function parseVimeo(str) {
    // embed & link: http://vimeo.com/86164897

    var re = /\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i;
    var matches = re.exec(str);
    return matches && matches[1];
}

単純なコードの方が、他の開発者にとって優れている場合があります。

https://jsfiddle.net/vkg02mhp/1/

// protocol and www nuetral
function getVideoId(str, prefixes) {
  const cleaned = str.replace(/^(https?:)?\/\/(www\.)?/, '');
  for(const prefix of prefixes) {
    if (cleaned.startsWith(prefix))
      return cleaned.substr(prefix.length)
  }
  return undefined;
}

function getYouTubeId(url) {
  return getVideoId(url, [
    'youtube.com/watch?v=',
    'youtu.be/',
    'youtube.com/embed/'
  ]);
}

function getVimeoId(url) {
  return getVideoId(url, [
    'vimeo.com/'
  ]);
}

どちらを更新しますか？

于 2014-02-12T18:07:27.743 に答える
11

あなたの質問3）についてはよくわかりませんが、URLフォームでの誘導が正しい場合は、次のように正規表現を1つに組み合わせることができます。

/http:\/\/(?:www.)?(?:(vimeo).com\/(.*)|(youtube).com\/watch\?v=(.*?)&)/

さまざまな位置で試合が行われます（vimeoの場合は1番目と2番目の試合、youtubeの場合は3番目と4番目の試合）ので、それを処理する必要があります。

または、vimeoのIDに数字のみが含まれていることが確実な場合は、次の操作を実行できます。

/http:\/\/(?:www.)?(vimeo|youtube).com\/(?:watch\?v=)?(.*?)(?:\z|&)/

プロバイダーとIDは、それぞれ1番目と2番目の一致の下に表示されます。

于 2011-04-10T17:15:15.987 に答える
7

これが私の正規表現です

http://jsfiddle.net/csjwf/1/

于 2011-04-10T17:41:41.853 に答える
7

Vimeoの場合、VimeoはURLパターンを時々変更/更新する傾向があるため、正規表現に依存しないでください。2017年10月2日の時点で、VimeoがサポートするURLスキームは全部で6つあります。

https://vimeo.com/*
https://vimeo.com/*/*/video/*
https://vimeo.com/album/*/video/*
https://vimeo.com/channels/*/*
https://vimeo.com/groups/*/videos/*
https://vimeo.com/ondemand/*/*

代わりに、APIを使用してvimeoURLを検証します。これがこのoEmbed（doc）APIで、URLを取得し、その有効性をチェックして、一連のビデオ情報を含むオブジェクトを返します（開発ページを確認してください）。意図されていませんが、これを使用して、特定のURLがVimeoからのものであるかどうかを簡単に検証できます。

したがって、ajaxを使用すると、次のようになります。

var VIMEO_BASE_URL = "https://vimeo.com/api/oembed.json?url=";
var yourTestUrl = "https://vimeo.com/23374724";


$.ajax({
  url: VIMEO_BASE_URL + yourTestUrl,
  type: 'GET',
  success: function(data) {
    if (data != null && data.video_id > 0)
      // Valid Vimeo url
    else
      // not a valid Vimeo url
  },
  error: function(data) {
    // not a valid Vimeo url
  }
});
于 2017-10-02T12:33:19.983 に答える
6

さわの答えについて：

2番目の正規表現に関する少しの更新：

/http:\/\/(?:www\.)?(vimeo|youtube)\.com\/(?:watch\?v=)?(.*?)(?:\z|$|&)/

（ドットをエスケープすると、タイプwww_vimeo_com /…および$が追加されたURLと一致しなくなります…）

埋め込みURLを一致させるための同じアイデアがあります：

/http:\/\/(?:www\.|player\.)?(vimeo|youtube)\.com\/(?:embed\/|video\/)?(.*?)(?:\z|$|\?)/
于 2011-12-19T18:52:25.090 に答える
2

FWIW、私はアプリでYouTubeとVimeoの両方のURLを検証および解析するために以下を使用しました。かっこを追加して、探している特定のものを解析できると確信しています...

/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$|^(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*$/

|^^これは、 （または）を使用してそれらを結合する2つの別々の式の組み合わせです。元の2つの式を別々に示します。

/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/

/^(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*$/

私は専門家ではありませんが、Rubularによるとうまくいくようです。うまくいけば、これは将来誰かを助けるでしょう。

于 2020-08-18T20:20:56.683 に答える
1

3）正規表現がhttpsURLと一致しません。テストはしていませんが、「http：//」の部分は「http（s）？：//」になると思います。これにより、プロバイダーとIDの一致する位置が変更されることに注意してください。

于 2014-04-04T12:50:14.747 に答える
1

念のためここにphpバージョンがあります

/*
* parseVideo
* @param (string) $url 
* mi-ca.ch 27.05.2016
* parse vimeo & youtube id
* format url for iframe embed 
* https://regex101.com/r/lA0fP4/1
*/

function parseVideo($url) {
  $re = "/(http:|https:|)\\/\\/(player.|www.)?(vimeo\\.com|youtu(be\\.com|\\.be|be\\.googleapis\\.com))\\/(video\\/|embed\\/|watch\\?v=|v\\/)?([A-Za-z0-9._%-]*)(\\&\\S+)?/"; 
preg_match($re, $url, $matches);

if(strrpos($matches[3],'youtu')>-1){
    $type='youtube';
    $src='https://www.youtube.com/embed/'.$matches[6];
}else if(strrpos($matches[3],'vimeo')>-1){
    $type="vimeo";
    $src='https://player.vimeo.com/video/'.$matches[6];
}else{
    return false;
}


return array(
         'type' =>  $type // return youtube or vimeo
        ,'id'   =>  $matches[6] // return the video id
        ,'src'  =>  $src // return the src for iframe embed
        );
}
于 2016-04-27T11:40:30.170 に答える
1

ドロップボックスビデオの追加を有効にするタスクがありました。したがって、同じ入力でhrefを取得し、それを確認して、再生可能なリンクに変換します。このリンクをに挿入できます。

const getPlayableUrl = (url) => {
    // Check youtube and vimeo
    let firstCheck = url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);

    if (firstCheck) {
        if (RegExp.$3.indexOf('youtu') > -1) {
            return "//www.youtube.com/embed/" + RegExp.$6;
        } else if (RegExp.$3.indexOf('vimeo') > -1) {
            return 'https://player.vimeo.com/video/' + RegExp.$6
        }
    } else {
        // Check dropbox
        let candidate = ''
        if (url.indexOf('.mp4') !== -1) {
            candidate = url.slice(0, url.indexOf('.mp4') + 4)
        } else if (url.indexOf('.m4v') !== -1) {
            candidate = url.slice(0, url.indexOf('.m4v') + 4)
        } else if (url.indexOf('.webm') !== -1) {
            candidate = url.slice(0, url.indexOf('.webm') + 5)
        }

        let secondCheck = candidate.match(/(http:|https:|)\/\/(player.|www.)?(dropbox\.com)\/(s\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*\/)?(.*)/);
        if (secondCheck) {
            return 'https://dropbox.com/' + RegExp.$4 + RegExp.$5 + RegExp.$6 + '?raw=1'
        } else {
            throw Error("Not supported video resource.");
        }
    }
}
于 2020-04-16T12:30:59.000 に答える
0

以前の回答に基づいていますが、正規表現をさらに増やす必要がありました。

2011年には機能したかもしれませんが、2019年には構文が少し変更されました。だからこれはリフレッシュです。

正規表現を使用すると、URLがYoutubeまたはVimeoである天気を検出できます。videoIDを簡単に取得できるようにキャプチャグループを追加しました。

大文字と小文字を区別しない設定で実行した場合は、（？i）を削除してください。

(?:(?i)(?:https:|http:)?\/\/)?(?:(?i)(?:www\.youtube\.com\/(?:embed\/|watch\?v=)|youtu\.be\/|youtube\.googleapis\.com\/v\/)(?<YoutubeID>[a-z0-9-_]{11,12})|(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(?<VimeoID>[0-9]+))

https://regex101.com/r/PVdjg0/2

于 2019-06-28T11:58:26.737 に答える