0

I'm working on a video library and i need to play videos from different sources like youtube.

When I inspect element on a youtube video, the url looks like something.

blob:https://www.youtube.com/b3038e77-e79c-4e9f-b574-6f4e5d686b4c

But when I try to use it in html 5 video, it is giving me various errors. I tried many methods but none of 'em are working. I'm getting diff errors like,

  • Not allowed to load local resource: blob
  • Uncaught TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement': Failed to
  • convert value to 'MediaStream'. Uncaught TypeError: video.play is not a function

My question, it is even possible to play video from third party sources. If yes, can you provide me any working example?

Pirate
  • 2,886
  • 4
  • 24
  • 42
  • Save the blob to file and check in a hex editor if the bytes are actually of a video file. – VC.One Feb 02 '22 at 07:47
  • how to save the blob to file? – Pirate Feb 02 '22 at 07:52
  • Try [javascript save blob to file](https://www.google.co.uk/search?q=javascript+save+blob+to+file). The second link is good: [JavaScript: Save a blob to disc](https://gist.github.com/philipstanislaus/c7de1f43b52531001412) – VC.One Feb 02 '22 at 08:42
  • Paste the double-digit (hex) values into your Question for analysis. – VC.One Feb 02 '22 at 23:16
  • from where i'll get the double digit hex values? i only have url. – Pirate Feb 03 '22 at 04:50
  • I don't know what your O.S is but if you use Windows you can download [HxD hex editor](https://mh-nexus.de/en/downloads.php?product=HxD20). Use it to open your saved blob file and you will see values of bytes on left side (double digits can be also be letters A to F), the right side shows UTF (text) version of bytes (where those bytes are for text characters) – VC.One Feb 03 '22 at 10:52
  • "Use it to open your saved blob file" -> My question is what do you mean by saved blob file? I only have one url that i have added in the question. – Pirate Feb 03 '22 at 10:55
  • Get a new blob URL and show it here for me to check. When you paste the blob UR in address bar and load, it should download blob data or show a page that can be saved as blob data. – VC.One Feb 03 '22 at 11:24
  • blob:https://www.youtube.com/186ec38a-c50b-48f6-8246-eeba38b9b2eb – Pirate Feb 03 '22 at 11:27
  • I tried your link earlier (same minute after it was posted). That blob isn't leading to anything. What makes you think it's a video? If you check Dev Tools you'll see that MP4 data is loaded, not a blob. Try: [random Youtube test](https://www.youtube.com/watch?v=SBshq1Bx4_k) and you'll see video bytes are at URL: `videoplayback?expire= etc etc`. – VC.One Feb 03 '22 at 11:49
  • To play Youtube on your page **(1)** Maybe consider embedding an **iFrame**, you can have the controls hidden and use your own icons to control the video. See [this example](https://gist.githubusercontent.com/adamsheridan/8297437/raw/9a236dffacc2743d19c81bb21a3a065a66afb597/player.html). You can hide video tag and show iFrame whenever you need to play Youtube vid and then switch back. This way the same "viewing" area can sometimes be video tag or YT player or Vimeo player or Dailymotion player etc... Just hide/show the needed one (using CSS). – VC.One Feb 03 '22 at 22:15
  • **(2)** If you really want it in a ` – VC.One Feb 03 '22 at 22:42
  • do you have a working example for point (2)? – Pirate Feb 04 '22 at 05:38
  • Example: [Youtube video link](https://www.youtube.com/watch?v=xXTH8ly9LlM). **(1)** Find `"itag":18` in the source (that's a 360p MP4 video) and read forwards (using your eye or code) until you see `"url":` and that is the URL but it needs cleaning. For example the Unicode encodings like `\u0026` must be replaced with `&` and also sometimes it wants the HTML URL Entities like `%26` also converted. You need to extract that part into a separate blank page (in your text editor) and practice editing (edit -> test -> edit some more). Compare the layout to the known a known working link (see below) – VC.One Feb 04 '22 at 07:15
  • working video link (expires in one day, and too long to fit in here) : `https://rr1---sn-aigzrnld.googlevideo.com/videoplayback?expire=1643978750&ei=nsv8YbzeCsTyxgLH-IPwBg&ip=86.187.163.149&id=o-AK0FxZBp6cnLNO2ZKUpXdl_heokLbYixLkDmZf3Kg-Nj&itag=243&aitags=133%2C134%2C135%2C136%2C137%2C160%2C242%2C243%2C244%2C247%2C248%2C271%2C278&source=youtube&requiressl=yes&mh=NB&mm=31%2C29&mn=sn-aigzrnld%2Csn-aigl6ney&ms=au%2Crdu&mv=m&mvi=1&pl=24&initcwndbps=906250&vprv=1&mime=video%2Fwebm&ns=v8SewxFdjtG6V1E4FZxIH-kG&gir=yes&clen=1357676&dur=25.792&lmt=1643904373804715&mt=1643956870&fvip=1&keepalive=yes` – VC.One Feb 04 '22 at 07:18
  • `&fexp=24001373%2C24007246&c=WEB&txp=5437434&n=niedDtMi26qPEA&sparams=expire%2Cei%2Cip%2Cid%2Caitags%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cns%2Cgir%2Cclen%2Cdur%2Clmt&sig=AOq0QJ8wRQIhANNJrlDr16R1mIj3YVXbNva-7YWCIlBKdpqCvfjlRsg2AiAtGqzrM0fpSiRJiTpDa4K0JVtoQKvSyGwyBDAvw4-_UQ%3D%3D&lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpl%2Cinitcwndbps&lsig=AG3C_xAwRAIgU7HE7kk_oK9bZhg61PTK_L7lIpWeAtwRpXzvLGbROz4CID3ihN96b-lhbnWLhMK7PrvyXmGsW9uoQ9_jy8SN2WiQ&alr=yes&cpn=wU85bAmtXiNqK905&cver=2.20220203.01.00&range=0-123830&rn=1&rbuf=0` – VC.One Feb 04 '22 at 07:19
  • so basically what you find in webpage is encoded differently to what the browser expects. In the source code you'll see `\u0026ip=86.187.163.149` but from above link / comment you can see its edited to now looks like `&ip=86.187.163.149` (see after `expire=` near starting of link). As you can see later on something called `sparams` exists but this time you now **keep** (not edit) the URL Entities. You'll have to practice with different links and build an "instinct" of how the Youtube URL system works. After a while when link is not working you should be able to notice what is missing. – VC.One Feb 04 '22 at 07:34
  • PS: Reference for [Unicode Entities](https://www.w3schools.com/charsets/ref_utf_basic_latin.asp) and also reference for [URL Encoding Entities](https://www.w3schools.com/tags/ref_urlencode.ASP) for when converting. – VC.One Feb 04 '22 at 07:38
  • I tried the link shared by you, it just returning me the link updating the id every time. – Pirate Feb 04 '22 at 07:55
  • Did you join the two parts of the link together in a text editor before trying in browser (there should be no spaces)? On Google chrome browser I see a video element playing. If you open the Youtube page link itself and use Dev Tools to find `playback=` in **Network** tab you'll get a link that works for you (the **first** one, the following next ones may not work if opened separately in a new tab/window) – VC.One Feb 04 '22 at 08:10
  • I used the both part but still the given url is not working. May be it is only signed for you. – Pirate Feb 04 '22 at 08:16
  • Try joining both parts of this version and open in tab (will explain later) : `https://r1---sn-aigzrnld.googlevideo.com/videoplayback?expire=1643984338&ei=cuH8YdegLczGgAeB2K6oCg&ip=152.228.171.6&id=o-AAEEJZxR17F_y9ue1j-RRZu8fpChun98YpMUUGU-7JUD&itag=18&source=youtube&requiressl=yes&vprv=1&mime=video%2Fmp4&ns=3NbY2CtmShZJXzT_aWi_DLQG&gir=yes&clen=2637459&ratebypass=yes&dur=25.856&lmt=1643898381042930&fexp=24001373%2C24007246&beids=23886220&c=WEB&txp=5430434&n=52nKLfNtbaRFUMM_i` – VC.One Feb 04 '22 at 08:21
  • `&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cns%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRgIhAKQJKzCBXakVNGBSHrYHgweInGjASX5uhhGTCKg772lrAiEAs5gK_14KnNTipghbN7ZxQXWA3mH-aQ545R8CV1niZPg%3D&title=Butterflies+%23Shorts&cms_redirect=yes&mh=NB&mip=86.187.163.149&mm=31&mn=sn-aigzrnld&ms=au&mt=1643962388&mv=m&mvi=1&pl=24&lsparams=mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhANbh_JkHdNheFDq4QqZH7ZNzWp4Y2xSSV9G6sGJeKnMaAiBpTWFc3Gnxk_hL-LaHP_GjlQEzDA1A7VAfHuIg3lV_zA%3D%3D` – VC.One Feb 04 '22 at 08:21
  • this one is working. – Pirate Feb 04 '22 at 08:45
  • **(1)** I forgot to mention that during cleanup process you have to replace the `https://rr1--` server name with a single `https://r1--`. In other words there's is a deliberate mistake by Youtube of having two `rr` in source code but they know their server expects one `r` in the beginning part of URL. There's two other things that might need fixing, but first try the first link again now using single not double "r" in HTTPS path. **(2)** Compare the working link (is 480p to the one in source code, find the itag for 480p & also it might be "DASH" not "MP4" format so that's a different itag). – VC.One Feb 04 '22 at 10:18
  • Fastest way to learn: Open a link in Youtube and get source code into a text editor, Now use a website like [GetVideo.at](https://getvideo.at/en/) to get MP4 links. Stick to one size like 720p and see how their URL looks compared to what you find in the source code of Youtube page (when searching itag for 720p video). Extract the URL from Youtube source and "clean" it up until it has similar setup. Don't re-arrange the link, just fix encodings and look out for the `mime=video/mp4` which must become `mime=video%2Fmp4` in your final extracted link. – VC.One Feb 04 '22 at 10:28
  • okay, but using java script it is not possible right. – Pirate Feb 04 '22 at 13:36
  • Not with Javascript (because of CORS issue) so use something that can work server-side like PHP or Python. I recommend PHP (using `get_file_contents` to get source code into a String variable). Practice how to manually extract/clean link in a text editor then write code to follow same steps. – VC.One Feb 04 '22 at 13:47
  • PS: PHP will get the source code HTML but you can pass the text to Javascript for further processing or just process the text with PHP anyways. In any case you need to finally have a JS var that is the URL to the video then use that in your ` – VC.One Feb 04 '22 at 13:54

1 Answers1

0

It is very difficult to deduce the errors without a code example, but I believe that the problem is between these 2 items

  1. The first error refers to the source type of the resource, in case you must be testing accessing it directly from an .html file. To work around this you can create a simple server to expose these files accessing through a port, e.g.: localhost:8080/test.html. You can do this using a node http-server by following these instructions.
  2. The other 2 errors refer to the type of file being loaded, sites like youtube, netflix use players generally based on HLS or DASH, which use .mpd and .mp4 files (for DASH) and .m3m8 and .ts (for HLS). These files are not natively supported by most browsers. In this case you need to use a javascript player for that. There are opensource solutions for that, for DASH you can use dash.js (here is a link with examples) and for HLS you can use video.js (here is a link with example)

here an explanation about DASH and HLS https://www.dacast.com/pt/blog/mpeg-dash-vs-hls-what-you-should-know/#hls_vs._mpeg-dash

matmahnke
  • 432
  • 3
  • 10