我想要得到v=id从YouTube的URL与JavaScript(没有jQuery,纯JavaScript)。
YouTube URL格式示例
http://www.youtube.com/watch?v=u8nQa1cJyX8&a=GxdCwVVULXctT2lYDEPllDR0LRTutYfW
http://www.youtube.com/watch?v=u8nQa1cJyX8
或在URL中包含视频ID的任何其他YouTube格式。
这些格式的结果
u8nQa1cJyX8
我想要得到v=id从YouTube的URL与JavaScript(没有jQuery,纯JavaScript)。
YouTube URL格式示例
http://www.youtube.com/watch?v=u8nQa1cJyX8&a=GxdCwVVULXctT2lYDEPllDR0LRTutYfW
http://www.youtube.com/watch?v=u8nQa1cJyX8
或在URL中包含视频ID的任何其他YouTube格式。
这些格式的结果
u8nQa1cJyX8
当前回答
我创建了一个功能,测试用户输入的Youtube, Soundcloud或Vimeo嵌入ID的,能够创建一个更连续的设计与嵌入式媒体。这个函数检测并返回一个有两个属性的对象:"type"和"id"。Type可以是“youtube”,“vimeo”或“soundcloud”,“id”属性是唯一的媒体id。
在网站上,我使用了一个文本区域转储,用户可以在其中粘贴任何类型的链接或嵌入代码,包括vimeo和youtube的iframe嵌入。
function testUrlForMedia(pastedData) {
var success = false;
var media = {};
if (pastedData.match('http://(www.)?youtube|youtu\.be')) {
if (pastedData.match('embed')) { youtube_id = pastedData.split(/embed\//)[1].split('"')[0]; }
else { youtube_id = pastedData.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0]; }
media.type = "youtube";
media.id = youtube_id;
success = true;
}
else if (pastedData.match('http://(player.)?vimeo\.com')) {
vimeo_id = pastedData.split(/video\/|http:\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
media.type = "vimeo";
media.id = vimeo_id;
success = true;
}
else if (pastedData.match('http://player\.soundcloud\.com')) {
soundcloud_url = unescape(pastedData.split(/value="/)[1].split(/["]/)[0]);
soundcloud_id = soundcloud_url.split(/tracks\//)[1].split(/[&"]/)[0];
media.type = "soundcloud";
media.id = soundcloud_id;
success = true;
}
if (success) { return media; }
else { alert("No valid media id detected"); }
return false;
}
其他回答
你可以点击共享按钮并复制缩短URL。 例如: 这个YouTube视频的网址是https://www.youtube.com/watch?v=3R0fzCw3amM 但如果你点击分享按钮并复制缩短URL,你会得到这个https://youtu.be/3R0fzCw3amM
我对mantish的正则表达式做了一些轻微的更改,以包括来自J W和矩阵的答案的所有测试用例;因为一开始并不是对所有人都有效。可能还需要进一步的修改,但据我所知,这至少涵盖了大部分链接:
- (?): [&] vi ? = |嵌入- | \ / \ d d ? \ | - vi ? \ / | https: / \ / (?: www。)? youtu \。be /) ([^ & \ n ? # +) -
var url = ''; // get it from somewhere
var youtubeRegExp = /(?:[?&]vi?=|\/embed\/|\/\d\d?\/|\/vi?\/|https?:\/\/(?:www\.)?youtu\.be\/)([^&\n?#]+)/;
var match = url.match( youtubeRegExp );
if( match && match[ 1 ].length == 11 ) {
url = match[ 1 ];
} else {
// error
}
进一步测试:
http://regexr.com/3fp84
我有一个正则表达式,支持常用的url,其中还包括YouTube短片
正则表达式模式:
(youtu *。*)\ /(看\ ? v = |嵌入\ / | |短裤 |)(.*?((?=[&#?])|$))
Javascript返回方法:
function getId(url) {
let regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/gm;
return regex.exec(url)[3];
}
支持的URL类型:
http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index
http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/QdK8U-VIH_o
http://www.youtube.com/v/0zM3nApSvMg?fs=1&hl=en_US&rel=0
http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s
http://www.youtube.com/embed/0zM3nApSvMg?rel=0
http://www.youtube.com/watch?v=0zM3nApSvMg
http://youtu.be/0zM3nApSvMg
https://youtube.com/shorts/0dPkkQeRwTI?feature=share
https://youtube.com/shorts/0dPkkQeRwTI
与测试:
https://regex101.com/r/5JhmpW/1
我发现最好的解决方案(从2019年到2021年)是:
function YouTubeGetID(url){
url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
}
我在这里找到的。
/*
* Tested URLs:
var url = 'http://youtube.googleapis.com/v/4e_kz79tjb8?version=3';
url = 'https://www.youtube.com/watch?feature=g-vrec&v=Y1xs_xPb46M';
url = 'http://www.youtube.com/watch?feature=player_embedded&v=Ab25nviakcw#';
url = 'http://youtu.be/Ab25nviakcw';
url = 'http://www.youtube.com/watch?v=Ab25nviakcw';
url = '<iframe width="420" height="315" src="http://www.youtube.com/embed/Ab25nviakcw" frameborder="0" allowfullscreen></iframe>';
url = '<object width="420" height="315"><param name="movie" value="http://www.youtube-nocookie.com/v/Ab25nviakcw?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/Ab25nviakcw?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>';
url = 'http://i1.ytimg.com/vi/Ab25nviakcw/default.jpg';
url = 'https://www.youtube.com/watch?v=BGL22PTIOAM&feature=g-all-xit';
url = 'BGL22PTIOAM';
*/
简化Jacob Relkin的回答,你所需要做的就是:
const extractVideoIdFromYoutubeLink = youtubeLink => {
return youtubeLink.split( 'v=' )[1].split( '&' )[0];
};