Get thumbnail from youtube video - javascript

I know I can get a URL to thumbnail for a youtube video. For ex: https://i.ytimg.com/vi/J---aiyznGQ/hqdefault.jpg
Also, I know I can get link to the video at any second like this:
https://youtu.be/J---aiyznGQ?t=7
I would like to get a thumbnail for the video at the time specified. Does youtube provide that? Is there a way to generate thumbnail at the time specified programmatically?

I think what you're asking for is a screencap/screenshot of the video at a particular time frame. The simplest thing to do in this case is to use your system's inbuilt screenshot software and then capture your image.
But since you asked programmatically:
You can use Pyscreenshot
or follow this tutorial which uses pyautogui.
Note: You need Python in both the cases above.

Related

Remove All User Controls Facebook Video Embed

I'm aware this question exists, please don't mark this one as a duplicate as things have changed since it was originally posted.
I am looking to embed what's called a "secret" (aka private) Facebook video onto a sales page to serve as a video sales letter. The video needs to play automatically (for as many devices as possible, anyways) and needs to have all video control options removed.
Basically it's click to play, click to pause, and if they know to use the arrows to FF or rewind, then, so be it. But that'll be less than 1% I'm assuming.
In the old solution the person mentioned Facebook having the option data-controls="false".
When trying to use this parameter now the entire video locks up and suggests the user to reload the browser.
Is there a way I can get around this? I'm thinking building out a custom player and seeing if I can set the FB video as the source, but even then it seems like there will be a page name and share option overlay on the video.
Any ideas?

How to add a button on the embedded youtube video?

I want to add a button on the embedded youtube video on my website. So that a user can easily download that video. Now I just need to display a button on youtube video surface ,so that a user can click the button and do some job (about the video). Button will be like this:
Click Here to see
with simple html or javascript. Thank You.
Adding a button on top of your iframe is the simple part of the solution, and you will likely find this solution helpful. to match the styling, I'd recommend a site like http://css3buttongenerator.com/
As for the second part of this question, it is more advanced to write javascript to download a video, and if you'd like to avoid that, a simpler solution would be to redirect a user to a site like this. you could even go through the steps of downloading the video, and get the final link the site provides when it is ready to download.

Detecting "Missing Video" Youtube Image

Greetings from a future caveman,
I load a lot of youtube thumbnails on my page. They load from thumbnail urls I have in my db.
From time to time the video in question is changed or deleted by the author on youtube. This leaves me with 2 problems:
I'm loading the blank picture from youtube
In my db I still have this image url listed.
What would be a solution for figuring out the "missing video" thumnail, NOT displaying it, and updating my db. I need to fire an event by recognizing this image. Note that this is the default "missing" image that can appear different urls. So it's not a simple matter of seeing a particular url.
I also thought of using youtube api but making a bunch of calls every time the page loads seems counterintuitive to me.
I need to detect the image and fire so some of even for JS/jquery to use to update my db via ajax.
Maybe I'm overthinking this so if anybody has another solution to my problem I'm open.
I have read this: Javascript - Detect Youtube Default-Thumbnail
But the solution above does not seem to fit. The first option in the answer is what I'm doing now and it doesn't work - because youtube serves the default image even when you use 1.jpg, or 2 etc.. (which is what I use). Basically the video is gone.
The second option (base 64 encoding, creating canvas element etcc) is not really expanded upon and seems rather like using a chainsaw in place of a scalpel.
Thanks
I discovered that if I'm using
http://img.youtube.com/vi/<video_id>/mqdefault.jpg
,
it will display the trimmed (no black borders at top and bottom) YouTube thumbnail. The dimensions of this are 320 x 180px.
Whereas if there is no available thumbnail, you will get YouTube's fallback thumbnail, but that is actually 120 x 90px.
So here's a much easier way for figuring out if you got an invalid thumbnail (as compared to reading base64 data from the <img> tag).
Hope this helps.

How to detect time on a playing Flash video

I have a video playing on my page. I want to show and hide some div's when the video reaches a certain point. Lets say hide something on 10th second and show it again on 20th second.
I can easily do it in HTML5 with video tag and currentTime attribute but for IE I have to create the same functionality and I think with flash based videos (from YouTube or something like that).
Is there a way to detect the current time of a video playing on my website, embeded from YouTube, Metacafe or any other video sharing site?
I know I could detect it in flash and make it run some JavaScript function but I don't have flash nor have the skills to do it in AS3.
Is it possible to do it from JavaScript level or does any video sharing website out there provides this kind of functionality for their videos?
You could look into using flowplayer, it exposes events for meta data and timing.
You can use ExternalInterface to communicate between flash and js. So inside the flash app, when the video reaches the defined time, you can trigger a call to js function, doing whatever you need with the divs.
Since you will need to receive a stream and you need to detect a specific point in the video I thing you have read this inside flash.

Can HTML embed<> stop mp3s from automatically downloading?

I have lots of mp3s on my site that I want my friends to be able to play only- but I don't want them all downloading as soon as the page opens and would prefer them to only start downloading into the buffer if someone wants to play it- is this possible with the embed tag? I can't seem to find anything on Google so I am wondering if it's something I'll have to do in JavaScript or think of an HTML work around.
cheers
You can use javascript to construct the embeds and insert them into the DOM when a user clicks a button or something similar.
You will want to use the Object tag vs. the Embed tag for one, but that said, don't set the auto-play option and they won't load until requested.
If you want a really simple fix - don't embed the music files just have links to them. Then a user won't have the file download until they click on them (this is what blog.stackoverflow.com does for the podcasts...).
If you have time on your hands you can go for my solution... I created a separate html page for each song and used the embed tag on each. Then I just created links to the pages to open in a new window. I know... hack! But it works well, and the other related links go along with it in the new window for each song.
You could always try out Yahoo Media Player,
You just make link to the mp3s and they can play them at their own pace.
I have seen this used for PodCasts, and Playlists of Mp3s its very handy and free.
http://mediaplayer.yahoo.com/
First link
Second link
Third link
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Simple :)
You can even add album art and manipulate the order the mp3s are added to the playlist thru simple html.
http://yahoomediaplayer.wikia.com/wiki/How_to_link

Categories