抓取YouTube视频ID和缩略图

Posted 2021-02-23

This script will grab the YouTube video ID using regex so that many different types of YouTube urls. This will also output the id and thumbnail to view.

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>