I'm new to Javascript and making Chrome Extensions (I have experience with Python/Java), so please be patient with me. I'm trying to make a chrome extension, and one part requires the duration of a youtube video. I know I need to use the Youtube API, specifically - contentDetails.duration - which returns the length of a video.
I've created the manifest.json file and a .js file that contains some basic framework for using the youtube api. My question is, how exactly do I use all the features for the youtube api? Like Do I just set some variable equal to contentDetails.duration like length = contentDetails.duration? Do I need to input some key somewhere (I got the api key already). Do I put this in the .js file after the search(); in function onYouTubeApiLoad()?
Could someone go into the basics of how to use this method? Thank you so much.
The Youtube API you provided is an HTTP API. This means that you have to send an HTTP GET request, and Google's server will reply with a response. The standard way to create HTTP request from Javascript is to use either XMLHTTPRequest or fetch.
You can demo the API here: https://developers.google.com/youtube/v3/docs/videos/list#try-it
Unfortunately, the APIs are rate-limited and require authentication. To get full access, you have to pay Youtube money. This means that users of your extension won't be able to call the Youtube API.
You're better off having users
1. Open the web page containing the video
2. Query the document for the element
3. Read the duration property to get the length in seconds.
To see what I mean, try entering the following in the Javascript console of a youtube video page.
document.querySelector('video').duration
Related
I have a React application. I am trying to live stream on YouTube. What i am trying to achieve is, when i am live on YouTube, i want a certain part of the website to show the live streamed video as embedded. When i am not live, i want this section of the website hidden.
I have tried using the google v3 API but the cost of API calls to search for live videos on the channel is too expensive (i was doing a query to the API and if a video returned i would show the iframe on the site, and if not just hide it). However, with this quota and the usage of the site, this is not a suitable solution.
I also cannot render the content in an iFrame and then just 'getElementById' because then i'd get CORS restrictions. I thought about building some sort of proxy that could just get the HTML from the youtube page and return it to me as a string (by passing the CORS issues), then just checking for an ID to determine if the channel was live or not.
I've tried alot of searching but either im looking for the wrong things or there is limited support for what i'm trying to do. Any other suggestions on how i can achieve this please?
thank you in advance
I'm working on a chrome extension to get some video content from a website. After some debugging of the website I've noticed that when content starts loading, an ajax request is made to a certain URL to get an m3u8 playlist file. I don't know all the chrome APIs available but in the past, I've used the webRequest API to block some specific URLs. My question is, is possible to intercept when a website is made an ajax request to a certain URL using the webRequest API and get that URL to use it later? If yes, can someone give me an example that can help me to write the code, please?
I'd like to use JavaScript to enable PiP on Youtube videos. I am able to do so on html <video>s but it seems impossible to do so on Youtube <iframe>s. Has someone any lead on this?
Users may be able to right click twice (to bring up the html5 menu) and select Picture in Picture, but it seems to be impossible to trigger it programmatically from outside the iframe due to the same origin policy for iframes. I don't imagine that the &origin= parameter in the iframe URL actually changes the headers sent from youtube, it didn't seem to work in my testing.
SecurityError: Blocked a frame with origin from accessing a cross-origin frame
The youtube iframe api gets around this by using postMessage, however there are no messages implemented at the moment to execute video.requestPictureInPicture(). There seems to be a togglePictureInPicture function defined inside the player base.js script but this doesn't seem to be exposed through the message passing API
I always use the next line in the console, on the youtube page:
document.getElementsByTagName('video');
This will show a HTML Collection, open it and right click on the first position of the collection, store it as global variable, this will generate something like temp1. Then you have to write the next line:
temp1.requestPictureInPicture();
And that's it.
You cannot enable PiP programatically using Youtube's iframe embed. The only option is to get the URL directly to Google's streaming servers or stream the video data yourself. Either way you need a stream URL to set as the src for a video element, then call video.requestPictureInPicture() on the video.
https://r4---sn-4g5ednls.googlevideo.com/videoplayback?expire=1627319351&ei=15...
Thats what a stream URL for a video hosted by google looks like. A guy name Levi wrote a library to retrieve this URL for a given Youtube video. But the library makes request to his proxy server yt2html.com in order to retrieve this URL.
I go in more detail on the issues with YT PiP in this blog post.
Here is a test case from the developers: https://beaufortfrancois.github.io/sandbox/media/iframe-video.html with PiP
There are lots of examples in the documentation:
Read more about that topic: https://developers.google.com/youtube/iframe_api_referenceand about PiP-Api: Picture-in-Picture Web API Spec: https://wicg.github.io/picture-in-picture , https://levelup.gitconnected.com/pip-videos-in-a-floating-window-452e775555fe?gi=21f55e7bf6fa
I would like to make a small application to check special offers on some web site. This application should access this site periodically (once every few hours), parse the HTML to find the offer and notify me about the offer somehow.
I would like to develop it in JavaScript as a Chrome extension. Do you know about any examples of such an extension I can learn from?
Chrome extensions have the features available that you're after:
Request permission to the website you want to fetch.
Make a background page with a setInterval that makes an ajax request to the website and checks the contents.
Use notifications to notify the user of an update. After notifying, store the contents locally so you know when the live contents have been updated again.
Instead of making an extension, would it not be better to just subscribe to a particular website's RSS feed? You can download a nifty extension called RSS Live Links to give you updates, and you can subscribe to their offers feed.
im just interested how firefox plugins like DownloadHelper, is able to automatically find .flv URL
There are a bunch of possible approaches and DownloadHelper seems to implement a couple of them. If you extract the .xpi file (which is a ZIP file) and look in the components folder, you'll see a bunch of different handlers for getting videos. I haven't looked at it thoroughly but you'll notice that dhYoutubeProbe.js basically extracts the video ID from the DOM and then plugs that into a standard YouTube URL pattern for fetching FLVs.
dhNetworkProbe seems to implement a more sneaky and interesting approach - it monitors the browser cache and/or HTTP requests for transfers of media files to get the underlying file's URL.
You could also look at how Firebug or similar monitor HTTP requests and responses. Playing an FLV via Flash player logs to Firebug like any other (non-streaming) request.