Question

这个问题是关于脚本主要的YouTube网站，客户端来自javascript。

虽然单击时看起来很简单，但我发现无法通过新的非上下文视频ID更改当前视频而无需重新加载。

这似乎与正在使用的polymer库有关，有很多阴影dom和一些特殊行为。

以下是上下文：我正在使用一个加载来自 reddit json api 的视频的书签，它支持CORS调用。

到目前为止，我可以使用这个简单的手工脚本将许多视频，图片预览和链接加载到youtube侧边栏。

调用脚本的Bookmarklet：

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)}();

这个bookmarklet正在将一个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

  }
}

在此阶段，点击链接只是重新加载页面。

我尝试了很多东西，改变元素的内容，尝试改变＆＃34; next＆＃34;推荐视频。

同样在DOM中创建一个链接，它正在重新加载。

这是一个简单的问题：

让我们说你在这个页面https://www.youtube.com/watch?v=YgGzAKP_HuM

从控制台，如何加载此非相关ID -q7ZVXOU3kM 进入页面，就像链接点击推荐侧栏一样？

以下内容不起作用：Visibility monitor is not attached

 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

如果你检查YgGzAKP_HuM，那么videoId为<video>，你会看到类似的内容：

<video class="video-stream html5-main-video" src="blob:https://www.youtube.com/8e1ef216-1901-ec44-9b76-ea8276e368c6"></video>

如果你想避免重新加载页面，你需要找到youtube如何从videoId创建Blob并更改播放器的src。

但也许对于您的项目，您应该考虑使用IFrame Player API。它完全符合你的要求。如果你想留在youtube.com，你可以用DOM中的iframe替换youtube原创播放器。

祝你好运！

Answer 2

看来youtube上的播放器没有（公共）api：/ 但有一个iframe youtube播放器 - 你可以打电话

player.loadVideoById("Vw4KVoEVcr0", 0, "default");

有关详细信息，请参阅https://developers.google.com/youtube/iframe_api_reference#loadVideoById

这是我在行动中看到的一个快速示例：http://jsfiddle.net/QtBlueWaffle/8bpQ8/1/

如果你真的想直接修改youtube，你可能需要在混淆的代码中挖掘：/我试图找到它......但它被混淆了，所以你不能轻易找到它。即使你发现它也会像_yt_player.h.xx.xy.h()那样。此外，无论何时生成新的（甚至可能是国家的情况都不同......），您的代码可能会中断。

此外，它似乎与聚合物无关，因为有一个播放器元素，但它没有改变视频的功能。显然，它只是放置播放器......控件仍然驻留在js函数中。

抱歉没有更好的消息 - 也许别人知道的更多。

Answer 3

尝试查找隐藏的YouTube API非常困难，而且Google对YouTube所做的下一次调整可能会破坏您的书签，并且您可以回到起步的位置。我认为你应该采取另一种方式。 Google提供了一个API，可在此处创建，删除和操作YouTube播放列表：https://developers.google.com/youtube/v3/docs/playlists。

如果您之前从未使用过YouTube API，请参阅此处：https://developers.google.com/youtube/v3/getting-started

然后，（最后！）你可以编写一些JavaScript，根据你的命令从reddit创建YouTube播放列表。

更改YouTube视频ID，无需重新加载页面

3 个答案: