|
| 1 | +# DevTools: Media Explorer |
| 2 | + |
| 3 | +Authors: |
| 4 | + - *[Chris Heilmann](https://github.com/codepo8)*, PM, Microsoft Edge |
| 5 | + |
| 6 | +## Status of this feature |
| 7 | + |
| 8 | +This is a proposal for a new feature that is not yet in development. |
| 9 | + |
| 10 | +## Proposal |
| 11 | + |
| 12 | +A common use case of the web is to download images and videos displayed in web products, either to consume offline or to re-use and share. Often this media is hard to get as web products don't make it easy to access it or only show a low quality preview and link to the full version. The media explorer tool would cut to the chase and display all the images and video sources in the current document as an easy to navigate, preview and download interface. |
| 13 | + |
| 14 | +### Introduction |
| 15 | + |
| 16 | +There are numerous browser extensions and software packages that allow you to do grab and download media from web pages. Many come with a subscription and as this is a common demand there is also a fair share of malware in this area. As the media of any web site is already downloaded to the user's browser cache and DevTools can analyse the product's source for links to media this feature would make extensions like these obsolete and offer a safer option for users. |
| 17 | + |
| 18 | +All the functionality of the media explorer is available using existing tools in DevTools, but it needs developer skills to use them. |
| 19 | + |
| 20 | +* The Network Tool allows you to access and download media in the current document. |
| 21 | +* The Elements and Console tool to analyse the structure of a document and get a list of all the media in the current document and links to more. |
| 22 | + |
| 23 | +The media explorer tool makes this easier for users not familiar with the Network tool or how web sites are structured. |
| 24 | + |
| 25 | +### Goals |
| 26 | + |
| 27 | +The media explorer helps users to: |
| 28 | + |
| 29 | +* Find, explore and download media in the current web site |
| 30 | +* Get access to the full size media on web sites with preview images |
| 31 | +* Consume videos in a native browser interface instead of players with annoying overlays and interstitials |
| 32 | +* Users on slower and flaky connections to try to download media instead of getting a buffering or time out experience |
| 33 | + |
| 34 | +### Usage |
| 35 | + |
| 36 | +When opening DevTools on a document, the user can switch to the media explorer to see links to all the videos and images in the current document. |
| 37 | + |
| 38 | +![The Media explorer tool inside Devtools]() |
| 39 | + |
| 40 | +Clicking any of these will open a preview of the media with information about size and availability. |
| 41 | + |
| 42 | +![List of all the media found in the current document]() |
| 43 | + |
| 44 | +![Previewing an image in the media explorer]() |
| 45 | + |
| 46 | +Users can download individual files or select more than one and get a zip file of all of them. |
| 47 | + |
| 48 | +![Selecting several media types]() |
| 49 | + |
| 50 | +Alternatively, the Media Explorer could also be used as part of the side bar experience without any need to open developer tools. |
| 51 | + |
| 52 | +![The media explorer as an edge sidebar experience]() |
| 53 | + |
| 54 | +## Feedback |
| 55 | + |
| 56 | +Have feedback? We want to hear it! *[Issue #123](link to issue announcing explainer, which will need to be added after first commit)* tracks community feedback on this explainer. |
0 commit comments