Reading HTML code and locating video formats

[anonprivate]

Hello,

How do I read the HTML coding for a webpage.

In addition, I am interested in locating mpeg streams and their sources.

When I look at the page information, or use the web developer tools, I see very little of the coded information. It appears to be hidden.

Thanks

[jglen490]

Most of the presentation layer is exposed in the related CSS file rather than the main page HTML.

[anonprivate]

Most of the presentation layer is exposed in the related CSS file rather than the main page HTML.

Thank you for responding.

Can I locate the CSS files and read their contents?

[jglen490]

Probably not. That would be on their server and may not be accessible by ordinary users. That's not always the case, but it's up their security policy. If it looks like there's a place in the page's HTML where there's a reference (or comment) to a video file, or whatever you're interested in, but not the actual filename that would be a link to some external file such as CSS. If you really want to dig into the code, the HTML would have a reference to the CSS file in a header somewhere near the top of the file. You might try to search using the various parts of the URL, but that's a lot of digging.

It might just be easier to find some good HTML, Java, Javascript, PHP, CSS, and other programming language books to see how they work together - and then make your own web pages!!

[Goeroeboeroe]

If you use Firefox of Chrome, you can look at the HTML by pressing Control + U. That's the html the browser gets from the server, NOT the html that's used to render the page. That html can be changed (heavily) with for example JavaScript.
To see the html the browser really uses, you can press F12. This opens the developer tools. But if you're not used to html/css/javascript, they can look pretty complicated.
I'm most used to Firefox, so I'll describe Firefox.
If you press on F12, developer tools open.

If you click on the tab 'Inspector', you see the html the browser really uses to render the page, including (most) changes made with JavaScript etc.. That's much more useful then just looking at the source. If you click on the left on some html, you see the css used for that element on the right. But again: if you're not used to developer tools, css, etc., this probably looks pretty complicated.

If you click on the tab 'Stijleditor' (oops, that's Dutch, and since ther's a small chance you don't read Dutch: in English it's 'Style Editor') you'll see on the left a list of used stylesheets (files with css). If you click on one, you see the content on the right. If you click on save, you can save a stylesheet.
So indeed you can read (and even save) css files ('stylesheets'). In very rare cases the server will not send separate html, css, etc., but put everything together on the server. But even then css is still necessarily (and readable), but then every html-element has it's own css written in the tag.

If you click on the tab 'Debugger', you see a list of JavaScript files on the left, on the right you see the source of the selected file.

What you're looking for is probably encrypted in some way, because otherwise it would be very simple for everybody to download a video.
If you look, for example, at the src-attribute (where the video is located etc.) in a video-element on youtube, you'll see some cryptic json (kind of javascript) without any human meaning.
If there's no encryption you can simply see the name of the video in the src-attribute of the video-element: src="location-and-name-of-video".

In the upper left of developer tools there's an square with an arrow. If you click on that, you can select the element you want to inspect closer. If you click on the arrow and after that on the video, you'll see the video-element with src-attribute, etc. in developer tools. But if it's not encrypted, you can also directly right click on the video and download it. So probably this is pretty useless if you're looking for the source of the video.

Page Info in Firefox used to have much more information, but Mozilla removed that, probably as part of their passionate attempt to commit suicide.
If you install the add-on Show Links from https://addons.mozilla.org/en-US/fir...-links/?src=ss by clicking on the icon you get a complete list of links (used to be in page information, sigh). If the link to the source of the video is recognizable as link, you'll see it there. If it's not recognizable, this will not help.

If you really want to find an encrypted source, or a source for a streamed video, or something like that, maybe you're better of asking for help on some specialized video-forum.

[Snowhog]

Goeroeboeroe -

Your answer to anonnprivate’s post is excellent. It provides very useful information, and is clear and concise. Good job!

[anonprivate]

If you use Firefox of Chrome, you can look at the HTML by pressing Control + U. That's the html the browser gets from the server, NOT the html that's used to render the page. That html can be changed (heavily) with for example JavaScript.
To see the html the browser really uses, you can press F12. This opens the developer tools. But if you're not used to html/css/javascript, they can look pretty complicated.
I'm most used to Firefox, so I'll describe Firefox.
If you press on F12, developer tools open.

If you click on the tab 'Inspector', you see the html the browser really uses to render the page, including (most) changes made with JavaScript etc.. That's much more useful then just looking at the source. If you click on the left on some html, you see the css used for that element on the right. But again: if you're not used to developer tools, css, etc., this probably looks pretty complicated.

If you click on the tab 'Stijleditor' (oops, that's Dutch, and since ther's a small chance you don't read Dutch: in English it's 'Style Editor') you'll see on the left a list of used stylesheets (files with css). If you click on one, you see the content on the right. If you click on save, you can save a stylesheet.
So indeed you can read (and even save) css files ('stylesheets'). In very rare cases the server will not send separate html, css, etc., but put everything together on the server. But even then css is still necessarily (and readable), but then every html-element has it's own css written in the tag.

If you click on the tab 'Debugger', you see a list of JavaScript files on the left, on the right you see the source of the selected file.

What you're looking for is probably encrypted in some way, because otherwise it would be very simple for everybody to download a video.
If you look, for example, at the src-attribute (where the video is located etc.) in a video-element on youtube, you'll see some cryptic json (kind of javascript) without any human meaning.
If there's no encryption you can simply see the name of the video in the src-attribute of the video-element: src="location-and-name-of-video".

In the upper left of developer tools there's an square with an arrow. If you click on that, you can select the element you want to inspect closer. If you click on the arrow and after that on the video, you'll see the video-element with src-attribute, etc. in developer tools. But if it's not encrypted, you can also directly right click on the video and download it. So probably this is pretty useless if you're looking for the source of the video.

Page Info in Firefox used to have much more information, but Mozilla removed that, probably as part of their passionate attempt to commit suicide.
If you install the add-on Show Links from https://addons.mozilla.org/en-US/fir...-links/?src=ss by clicking on the icon you get a complete list of links (used to be in page information, sigh). If the link to the source of the video is recognizable as link, you'll see it there. If it's not recognizable, this will not help.

If you really want to find an encrypted source, or a source for a streamed video, or something like that, maybe you're better of asking for help on some specialized video-forum.

Thank you for the very accurate and detailed response to my question. One of the best I have received.

I will use my new insight on the page of interest and see what I can learn.

Best wishes

[anonprivate]

Goeroeboeroe -

Your answer to anonnprivate’s post is excellent. It provides very useful information, and is clear and concise. Good job!

I could not agree more

[Goeroeboeroe]

Glad it's appreciated, hope it helps.

[whatthefunk]

Similar to Goeroeboeroe's post, you could open dev tools, click on the inspector icon and then click on the video you want to check out to see the underlying html. The video source could be in the html, but that all depends.

[anonprivate]

Out of interest, I am looking at members who have read this thread.

I believe that the colour blue means members, red indicates moderators or admins. But GreyGeek is in black. What does the black colour signify?

[GreyGeek]

Either he’s a retired admin OR he’s getting senile so don’t trust his advice OR both! :P


Sent from my iPhone using Tapatalk