3

I am currently trying to build a audio visualizer in HTML/JS using WebGL. I'm so far using an Audio Element for this, which I spawn, create the analyser, connect to output, etc. I can already drag and drop files and enter a url, but I'd like more... for example YouTube integration (enter a link and it just plays it).

Here comes the difficult part however: Despite YouTube constantly updating I've found this method: How to get direct url for youtube videos

so I am loading an Iframe with the embedded video (because YT doesnt allow their Desktop side loaded in iframes....) and accessing frame.contentWindow - which doesnt work due to the same-origin policy ... -__-

I was just trying to improve my site a little and all the "security" features are starting to get on my nerves. Is there at current a way to do this in plain javascript & html? Additionally php for some backend-stuff WOULD be ok if not avoidable.

Thanks in advance.

ThexBasic
  • 715
  • 1
  • 6
  • 24
  • Have you looked at the API youtube has to offer developers? I use it myself and it's really simple and great to use on your website... – NewToJS Jul 06 '17 at 00:18
  • I don't really see YouTube exposing their video-direct-links by themselfes, but if you say so I would be glad if you could provide me with some clarification what your solution would look like. – ThexBasic Jul 06 '17 at 00:39
  • They have many options with the API. What do you mean by exposing their direct link? Are you trying to download the video or are you wanting to play the video? If you want to play it then you can use youtubes player and combine that with a search API to search youtube for videos and use the video ID's to play in the player. Same ID's you will find in the url... `watch?v=TheVideoId` – NewToJS Jul 06 '17 at 00:43
  • I am using a simple as source player with the analyser. So I would need the "download link" of the video to play it in there using src. And I cant use the YouTube embedded player because I need to access it in order to attach the visualiser. – ThexBasic Jul 06 '17 at 00:46

1 Answers1

1

Try putting https://cors-anywhere.herokuapp.com/ in front of the url. Type the entire URL afterwards, including the http://www.. This is a heroku web app that makes the request for you and should avoid the cross-origin request error.

Are you getting the cross-origin error when your code is hosted on a server? In my experience, this error usually happens when code is being executed on the desktop but disappears when the file is hosted on a server.

Looking at all of the answers for this question may also be beneficial.

Here's a github respository that looks very similar to what you want to make. Might be worth taking a look at.

DanD
  • 141
  • 9
  • Ok this seems to work with loading any site now. However I still can't access the JS content of the iframe as I mentioned due to the cross-origin-thing Chrome does. "Error: Uncaught DOMException: Blocked a frame with origin "http://myserver.me" from accessing a cross-origin frame. at HTMLIFrameElement.frm.onload" – ThexBasic Jul 06 '17 at 00:43
  • To be honest, I'm not super familiar with using iframes (none of the projects I've worked on have required them). However, this [question](https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame) appears like it may be useful. – DanD Jul 06 '17 at 00:47