这个问题是关于通过 JavaScript 编写 YouTube 主网站、客户端的脚本。
虽然看起来只需点击一下即可轻松完成，但我发现无法在不重新加载的情况下通过新的非上下文视频 ID 更改当前视频。
这似乎与使用的polymer库有关，有很多shadow dom和一些特殊行为。
上下文如下:我正在制作一个供自己使用的书签，它从支持 CORS 调用的 reddit json api 加载视频。
到目前为止，一切顺利，我可以使用这个足够简单的手工脚本将许多视频、图像预览和链接加载到 YouTube 侧边栏中。
调用脚本的书签:
javascript:void%20function(){target=document.getElementsByTagName(%22script%22)[0],inj=document.createElement(%22script%22),inj.src=%22https://webdev23.github.io/reddube/reddube.js%22,target.appendChild(inj)}();
这个小书签正在将一个 js 文件加载到 DOM 中，该文件正在解析 json api 以获得我需要的内容。
这是content of the called file :
var reds = ["/r/videos","/r/unknownvideos","/r/DeepIntoYouTube","/r/newsreels","/r/fullmoviesonyoutube","/r/SF_Videos","/r/classicfilms","/r/Documentaries","/r/artdocumentaries","/r/ShowsonYT","/r/YTPL","/r/NotTimAndEric","/r/youtubehaiku","/r/PlayItAgainSam","/r/ObscureMedia","/r/360video","/r/AccidentalComedy","/r/amibeingdetained","/r/ArtisanVideos","/r/AwfulCommercials","/r/bestofworldstar","/r/cringe","/r/CommercialCuts","/r/contagiouslaughter","/r/cookingvideos","/r/curiousvideos","/r/deepintoyoutube","/r/documentaries","/r/educativevideos","/r/FastWorkers","/r/fightporn","/r/FuckingWithNature","/r/fullmoviesonyoutube","/r/happycrowds/","/r/idiotsfightingthings","/r/lectures","/r/mealtimevideos","/r/motivationvideos","/r/ObscureMedia","/r/playitagainsam","/r/Prematurecelebration","/r/PublicFreakout","/r/Roadcam","/r/streetfights","/r/sweetjustice","/r/TheWayWeWereOnVideo","/r/trailers","/r/UnexpectedThugLife","/r/videoporn","/r/vids","/r/vines","/r/virtualfreakout","/r/woahtube","/r/listentothis/","/r/Tekno/","/r/reggae/","/r/RootsReggae","r/ska","/r/dub","/r/hip_hop","/r/treemusic/","/r/stonerrock/","/r/frenchrap/","/r/trance/","/r/minimal/"]
var rview = ["","/new/","/rising/","/controversial/","/top/"]
related.innerHTML = "<div style='filter: sepia(38%) invert(100%) saturate(100%) brightness(1) grayscale(0%) hue-rotate(360deg) contrast(100%)'><span id='subR' data-ccc='25' style='color:white;background:#141e1b;font-size:1.44em;width:20px'></span><input type='range' value='0' max='64' id ='redR' style='float:right;width:230px' onchange='redList.innerHTML=\"\";redd(this.value)'><br><span onclick='redList.innerHTML=\"\";' style='float:right;margin:3px 0 0 0'><button id='rflt' data-filter='0' onclick='this.dataset.filter=0;redd(redR.value)'>hot</button><button onclick='rflt.dataset.filter=1;redd(redR.value)'>new</button><button onclick='rflt.dataset.filter=2;redd(redR.value)'>rising</button><button onclick='rflt.dataset.filter=3;redd(redR.value)'>controversial</button><button onclick='rflt.dataset.filter=4;redd(redR.value)'>top</button></span><hr /><hr /><hr /><hr /><hr /><tr><br></div><div id='redList'>"
function redd(it){
console.log(it)
console.log(reds[1])
subR.innerHTML = reds[it]
xhr = new XMLHttpRequest
xhr.open("GET","https://www.reddit.com"+reds[it]+rview[rflt.dataset.filter]+".json?limit=200",true)
xhr.send(null)
xhr.onreadystatechange = function() {
if (xhr.readyState === xhr.DONE) {
if(this.status === 200) {
vids = JSON.parse(xhr.responseText)
cc = subR.dataset.ccc
for (var j=0;j<=cc;j++){
try{
var rt = vids['data']['children'][j]['data']['title'],
rl = vids['data']['children'][j]['data']['url'],
rp = vids['data']['children'][j]['data']['secure_media']['oembed']['thumbnail_url'],
rr = vids['data']['children'][j]['data']['permalink']
redList.innerHTML += "<td><a href='"+rl+"'><img style='width:150px;height:auto;max-width:120px' src='"+rp+"'></img></a><span style='max-width:68%;float:right;text-align:center;font-size:1.23em'><a class='yt-simple-endpoint style-scope ytd-compact-video-renderer' style='text-decoration:bold;font-size:1.23em;text-align:left;min-width:260px' href='"+rl+"'>"+rt+"</a><a target='blank' style='text-decoration:bold;color:black;float:right' href='https://www.reddit.com"+rr+"'>⮊</a></span></td><br>"
}catch(e){console.log(e)}
}
}
}
}
}
related.innerHTML += "</tr><button onclick='redList.innerHTML=\"\";redd(redR.value)'>Load more</button>"
redd(0)
window.onscroll = function() {
var d = document.documentElement,
offset = d.scrollTop + window.innerHeight,
height = d.offsetHeight
if (offset >= '2000' && offset <= '2300') {
subR.dataset.ccc = 25
}
if (offset >= '2000' && offset <= '2100') {
subR.dataset.ccc = 50
}
if (offset >= '3400' && offset <= '3500') {
subR.dataset.ccc = 100
}
if (offset >= '5400' && offset <= '5500') {
subR.dataset.ccc = 150
}
if (offset >= '7400' && offset <= '7500') {
subR.dataset.ccc = 200
}
}
在此阶段，单击链接只是重新加载页面。
我尝试了很多事情，更改元素的内容，尝试更改“下一个”推荐视频。
还在 DOM 中创建链接，但不起作用，正在重新加载。
这是一个简单的问题:
假设您正在访问此 YouTube 页面 https://www.youtube.com/watch?v=YgGzAKP_HuM
从控制台，如何加载这个不相关的ID -q7ZVXOU3kM
进入页面，就像点击推荐侧边栏的链接一样？
以下内容不起作用:未连接可见性监视器
xhr = new XMLHttpRequest
xhr.open("GET","https://www.youtube.com/watch?v=-q7ZVXOU3kM",true)
xhr.send(null)
document.body.innerHTML = xhr
2018 年 3 月 18 日:赏金结束:问题未解决!!!
这是一个相当复杂的东西。
每次重新加载时，dom 内容都会不断变化，并且会将推荐的视频 ID 包含到不断变化的脚本中。仅允许此 id 使用 ajax 功能。
此建议在任何重新加载时都会发生变化，但它们会循环回来。
我正在构建一个工具来深入分析差异，我发现了很多有趣的事情，比我正在搜索的更多。
这个话题还没有结束!
重要的不是目的地，而是旅程。
最佳答案
尽管 videoId 为 YgGzAKP_HuM如果您检查 <video>你会看到类似这样的东西:
<video class="video-stream html5-main-video" src="blob:https://www.youtube.com/8e1ef216-1901-ec44-9b76-ea8276e368c6"></video>
您需要了解 youtube 如何创建其 Blob从 videoId 并更改 src如果您想避免重新加载页面，请选择播放器。
但也许对于您的项目，您应该考虑使用 IFrame Player API 。它完全符合您的要求。如果您想留在 youtube.com，您可以用 iframe 替换 youtube 原始播放器。在 DOM 中。
祝你好运!
关于javascript - 无需重新加载页面即可更改 YouTube 视频 ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49138693/