5

I am not able to find tag in the source code of html5 version of youtube.

Q.1). Any idea on how it is playing HTML5 video without video element?

one option is that it is adding video element from JS, but I am not able to find out video element even in DOM of web-inspector.

Q.2). How to find video element in web-inspector or in firebug?

PS: I am novice in web-development.

SunnyShah
  • 28,934
  • 30
  • 90
  • 137

3 Answers3

6

It's definitely there. I picked a video at random, and:

<video 
    class="video-stream" x-webkit-airplay="allow" data-youtube-id="iF83wwij828" 
    poster="http://i2.ytimg.com/vi/iF83wwij828/hqdefault.jpg" 
    src="http://v14.lscache3.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hQRVVRV19FSkNOMF9NS0FD&amp;itag=43&amp;ip=0.0.0.0&amp;signature=60D26B708E92E1636CA3B34A389B1A4406DF290F.BD57D8B601A61EFF68CEF6726754DAD6D9C7C2A9&amp;sver=3&amp;ratebypass=yes&amp;expire=1310569200&amp;key=yt1&amp;ipbits=0&amp;id=885f37c308a3f36f">
</video>

My browser: Chrome 12.0.742.100 on Mac OS X, with Developer Tools -> Elements tab -> Search for "<video"

Developer Tools will show what's rendered to the end-user, unlike "view source".

Alternatively, have a look inside the JavaScript file called watch. I found this around line 1464:

'PLAYER_CONFIG':
    {"url": "http:\/\/s.ytimg.com\/yt\/swfbin\/watch_as3-vfl7OZAr4.swf",
     "min_version": "8.0.0", 
    "args": {"rv.2.thumbnailUrl": "http:\/\/i4.ytimg.com\/vi\/_jjXCm3W4hA\/default.jpg",
    "rv.7.length_seconds": 374, 
    "rv.0.url": "http:\/\/www.youtube.com\/watch?v=fvVJ7U-TekE", 
    "rv.0.view_count": 14234, 
    "enablecsi": "1", 
    "rv.2.title": "Alan Grayson (HD): \"Which Foreigners Got the Fed's $500,000,000,000?\"  Bernanke: \"I Don't Know.\"", 
    "rv.4.rating": "", "rv.3.view_count": 8109, "is_doubleclick_tracked": "1",
    "rv.4.thumbnailUrl": "http:\/\/i1.ytimg.com\/vi\/PlaFDyjCeVQ\/default.jpg", 
    "fmt_url_map": "34|http:\/\/o-o.preferred.lhr14s07.v21.lscache6.c.youtube.com\/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Calgorithm%2Cburst%2Cfactor%2Coc%3AU0hQRVVSVF9FSkNOMF9NTFhF\u0026algorithm=throttle-...

I guess if you match for fmt_url_map, you'll find it.

opyate
  • 5,388
  • 1
  • 37
  • 64
  • Well I am not able to find it on Chrome 12.0.742.112, I clicked on view source, I have copy-pasted source code over here, http://pastebin.com/hD0KDE6e – SunnyShah Jul 13 '11 at 10:02
  • Well, It is same video of which link you have provided. – SunnyShah Jul 13 '11 at 10:02
  • Updated. View Source won't work, so you're right about the JS. – opyate Jul 13 '11 at 10:25
  • Url includes your ip address, youtube wont stream (at least some videos) if your ip address doesn't match the one in the url. – Jens Jul 25 '12 at 21:18
  • Previous answers don't work. Format is now a GUID type url - not sure how to decode to anything else. No playback: Example: https://www.youtube.com/8f98e2f0-355c-40f4-b36d-3021883efefe – B. Shea Jun 17 '15 at 17:02
  • 1
    @bshea this is the object url referring to blob in local memory. it is created on page load and URL is one time usable. so you can't reuse it in video src or new tab [more details](http://stackoverflow.com/questions/30864573/what-is-blob-url-why-it-is-used-explain#answer-30881444) ..... – Lal Sep 08 '16 at 12:22
1

I found an even easier way to get the URL.

  1. Go to http://en.fetchfile.net/ (or any other site that lets you download videos from youtube and similar sites)
  2. Paste the youtube video link (from the browser address bar)
  3. It shows you links to download the video which is actually the video link. See screenshot below. You can right click on the 'Download video' button and 'copy link address'. You now have the actual video URL from the server.

enter image description here

This also works a lot of other sites using HTML5 video where the video link is not available in view source.

Pankaj C.
  • 139
  • 1
  • 6
0

You won't see it when you use view source in firefox as it is generated with some javascript. Easiest is to install Firebug and select inspect element and then click on the video and you'll see the video tag

JaapH
  • 391
  • 2
  • 6