我需要一个可以放在 header 上的 javascript，它可以识别 youtube 嵌入或 iframe 播放器，并用链接到 youtube 上的视频的缩略图替换它。

脚本应该识别这样的代码:

并替换为:

看变量就是视频ID。

有可能吗？

gia hạn [大拇指和播放图标的代码)

//FUNC OBJECT
function changeobj() {
    objs = document.getElementsByTagName('object');
    for (i in objs) {
        for (o in objs[i].children) {
            if (objs[i].children[o].getAttribute && objs[i].children[o].getAttribute('name') == 'movie') {
                    vidid = objs[i].children[o].getAttribute('value').split('/')[4].split('?')[0];
                    linkurl = 'http://www.youtube.com/watch?v='+vidid;
                    bgurl = 'http://img.youtube.com/vi/'+vidid+'/0.jpg';
                    imgurl = 'playsh.png';
                    link = document.createElement('a');
                    link.setAttribute('href',linkurl);
                    link.setAttribute('target','_blank');
                    link.style.backgroundImage = 'url('+bgurl+')';
                    link.className += "youvid";
                    img = document.createElement('img');
                    img.src = imgurl;
                    link.appendChild(img);
                    objs[i].innerHTML = '';
                    objs[i].appendChild(link);
                }
            }
        }
    }

//FUNC IFRAME
function changeiframe() {
    objs = document.getElementsByTagName('iframe');
    for (i in objs) {
            if (objs[i].src) {
            vidid = objs[i].src.split('/')[4].split('?')[0];
            linkurl = 'http://www.youtube.com/watch?v='+vidid;
            bgurl = 'http://img.youtube.com/vi/'+vidid+'/0.jpg';
            imgurl = 'playsh.png';
            link = document.createElement('a');
            link.setAttribute('href',linkurl);
            link.setAttribute('target','_blank');
            link.style.backgroundImage = 'url('+bgurl+')';
            link.className += "youvid";
            img = document.createElement('img');
            img.src = imgurl;
            link.appendChild(img);
            objs[i].outerHTML = link.outerHTML;
            }
        }
    }


window.onload = function () {
    changeobj();
    changeiframe();
    }

CSS:

.youvid {
    background-repeat: no-repeat;
    position: relative;
    display: block;
    text-align: center;
    background-position: center;
}

一个错误仍然存在，changeiframe 函数只替换奇数(第 1、3、5...)。

câu trả lời hay nhất

这是我想出来的。它仅在 Google Chrome 中进行了测试。

function changeobj() {
    objs = document.getElementsByTagName('object');
    for (i in objs) {
        for (o in objs[i].children) {
            if (objs[i].children[o].getAttribute('name') == 'movie') {
                    vidid = objs[i].children[o].getAttribute('value').split('/')[4].split('?')[0];
                    linkurl = 'http://www.youtube.com/watch?v='+vidid;
                    imgurl = 'http://img.youtube.com/vi/'+vidid+'/default.jpg';
                    link = document.createElement('a');
                    link.setAttribute('href',linkurl);
                    link.setAttribute('target','_blank');
                    img = document.createElement('img');
                    img.src = imgurl;
                    link.appendChild(img);
                    objs[i].innerHTML = '';
                    objs[i].appendChild(link);
                }
            }
        }
    }

function changeiframe() {
    objs = document.getElementsByClassName('youtube-player');
    for (i in objs) {
        console.log(objs[i]);
        vidid = objs[i].src.split('/')[4].split('?')[0];
        linkurl = 'http://www.youtube.com/watch?v='+vidid;
        imgurl = 'http://img.youtube.com/vi/'+vidid+'/default.jpg';
        link = document.createElement('a');
        link.setAttribute('href',linkurl);
        link.setAttribute('target','_blank');
        img = document.createElement('img');
        img.src = imgurl;
        link.appendChild(img);
        objs[i].outerHTML = link.outerHTML;
        }
    }

window.onload = function () {
    changeobj();
    changeiframe();
    }

是的，我知道。它有一个错误。这就是它不会完成的原因。我正在努力。

biên tập:

我修复了原来的错误:

function changeobj() {
    objs = document.getElementsByTagName('object');
    for (i in objs) {
        for (o in objs[i].children) {
            if (objs[i].children[o].getAttribute && objs[i].children[o].getAttribute('name') == 'movie') {
                    vidid = objs[i].children[o].getAttribute('value').split('/')[4].split('?')[0];
                    linkurl = 'http://www.youtube.com/watch?v='+vidid;
                    imgurl = 'http://img.youtube.com/vi/'+vidid+'/default.jpg';
                    link = document.createElement('a');
                    link.setAttribute('href',linkurl);
                    link.setAttribute('target','_blank');
                    img = document.createElement('img');
                    img.src = imgurl;
                    link.appendChild(img);
                    objs[i].innerHTML = '';
                    objs[i].appendChild(link);
                }
            }
        }
    }

function changeiframe() {
    objs = document.getElementsByClassName('youtube-player');
    for (i in objs) {
            if (objs[i].src) {
            vidid = objs[i].src.split('/')[4].split('?')[0];
            linkurl = 'http://www.youtube.com/watch?v='+vidid;
            imgurl = 'http://img.youtube.com/vi/'+vidid+'/default.jpg';
            link = document.createElement('a');
            link.setAttribute('href',linkurl);
            link.setAttribute('target','_blank');
            img = document.createElement('img');
            img.src = imgurl;
            link.appendChild(img);
            objs[i].outerHTML = link.outerHTML;
            }
        }
    }

window.onload = function () {
    changeobj();
    changeiframe();
    }

还有另一个无法加载任何第 4 部电影的错误，但我相信这足以让您制作自己的版本。

biên tập:@evel - 如果你想放一个播放按钮，你可以把这样的东西放到你的 CSS 中:

.YOUTUBE_VID {
background-image: play.png;
background-repeat: none;
background-postion: center;
}

然后将它的类添加到链接中:

link.className += " .YOUTUBE_VID";

biên tập:我没有使用 for 循环，而是循环函数。这似乎有效:

function changeiframe() {
    objs = document.getElementsByClassName('youtube-player');
        if (!objs[0]){return false;};
        if (objs[0]) {
        vidid = objs[0].src.split('/')[4].split('?')[0];
        linkurl = 'http://www.youtube.com/watch?v='+vidid;
        imgurl = 'http://img.youtube.com/vi/'+vidid+'/default.jpg';
        link = document.createElement('a');
        link.setAttribute('href',linkurl);
        link.setAttribute('target','_blank');
        img = document.createElement('img');
        img.src = imgurl;
        link.appendChild(img);
        objs[0].outerHTML = link.outerHTML;
        }
        changeiframe();
    }

关于javascript - 用缩略图 + 视频链接替换嵌入或 iframe youtube 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4703072/