Замените видео YouTube для вставки или iframe на миниатюру + ссылку на видео - PullRequest
Новая
       14

Замените видео YouTube для вставки или iframe на миниатюру + ссылку на видео

2 голосов
/ 16 января 2011

Мне нужен javascript, который можно поместить в заголовок, который распознает встроенный YouTube или проигрыватель iframe и заменяет его на миниатюру, связанную с видео на YouTube.

Скрипт должен идентифицировать код, подобный следующему: 

<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/J4oJWUJpbLY?fs=1&amp;hl=pt_BR&amp;hd=1&amp;color1=0x5d1719&amp;color2=0xcd311b"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/J4oJWUJpbLY?fs=1&amp;hl=pt_BR&amp;hd=1&amp;color1=0x5d1719&amp;color2=0xcd311b" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="560" height="345" src="http://www.youtube.com/embed/J4oJWUJpbLY?hd=1" frameborder="0"></iframe>

и заменить на него: 

<a href="http://www.youtube.com/watch?v=n1VCUF2xqKk" target="_blank"><img src="http://img.youtube.com/vi/n1VCUF2xqKk/default.jpg" alt="" /></a>

Посмотрите, что переменная - это идентификатор видео.

Это возможно?

ОБНОВЛЕНИЕ [Код с большими пальцами и иконка воспроизведения) 

//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-й ...).

1 Ответ

1 голос
/ 16 января 2011

Это то, что я придумал.Он был протестирован только в 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();
    }

Да, я знаю.В этом есть ошибка.Вот почему это не закончится.Я работаю над этим.

РЕДАКТИРОВАТЬ:

Я исправил оригинальные ошибки: 

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-й фильм, но я уверен, что этого будет достаточно для создания собственной версии.

РЕДАКТИРОВАТЬ: @evel - Если вы хотите поставить кнопку воспроизведения, вы можете поставитьчто-то вроде этого в вашем CSS: 

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

И затем добавьте класс по ссылке: 

link.className += " .YOUTUBE_VID";

РЕДАКТИРОВАТЬ: Вместо использования цикла 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();
    }
...