javascript - 无需重新加载页面即可更改 YouTube 视频 ID

Question

这个问题是关于从 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 功能。

此建议在任何重新加载时都会发生变化，但它们会循环返回。

我正在构建一个工具来深入分析差异，我发现了很多有趣的东西，比我正在搜索的要多得多。

这个话题还没有结束!

重要的不是目的地，而是旅程。

Answer 1

尽管 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 中。

祝你好运!