JavaScript 获取YouTube视频ID和缩略图

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 获取YouTube视频ID和缩略图相关的知识，希望对你有一定的参考价值。

HTML:
<div><strong>Insert YouTube url:</strong></div>
<input type="text" id="ytlink" onkeyup="youtube_parser(this.value)">
    <hr>
    <div><strong>Output: YouTube video id:</strong></div>
    <input type="text" id="ytimagelink" value="">
        <div><strong>Output: Thumbnail</strong></div>
        <div id="ytimage"></div>

JAVASCRIPT:
<script>
function youtube_parser(url) {
    var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match && match[1].length == 11) {
        urllink = match[1];
        imagelink = "<img src=\"http:\/\/img.youtube.com\/vi\/"+urllink+"\/hqdefault.jpg\">";
    } else {
        //urllink = "test"
    }
    document.getElementById("ytimagelink").value = urllink;
    document.getElementById("ytimage").innerHTML = imagelink;       
}
</script>

以上是关于JavaScript 获取YouTube视频ID和缩略图的主要内容，如果未能解决你的问题，请参考以下文章

从已知视频 ID 获取 YouTube 视频标题

如何从 url 获取 youtube 视频 ID

如何使用 Ajax 和 JSON 在 javascript 中使用 v3 URL API 获取 Youtube 视频标题

使用 PHP 从 URL 获取 YouTube 视频 ID

有没有办法从通过 JavaScript 嵌入的 YouTube 视频中获取 CHAPTERS？

如何使用 Java 中的正则表达式从 YouTube URL 获取视频 ID