我需要一个可以放在 header 上的JavaScript,该 header 可以识别youtube嵌入或iframe播放器,并用链接到youtube上的视频的缩略图替换它。
该脚本应标识如下代码:
<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/J4oJWUJpbLY?fs=1&hl=pt_BR&hd=1&color1=0x5d1719&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&hl=pt_BR&hd=1&color1=0x5d1719&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>
看该变量是视频ID。
有可能的?
更新 [带有大大拇指和播放图标的代码)
//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 ...)。
最佳答案
这就是我想出的。它仅在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();
}
关于javascript - 用缩略图+链接到vídeo替换嵌入或iframe youtube视频,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4703072/