HTML5 browser player on youtube video - javascript

I would love to know if anyone got some experience on Youtube API's?
Cause i've been wondering if it's possible to embed an youtube video with HTML5 parameters, changing the player to the Browser default player!
Thanks for the support!

While this is technically possible (see for example the YouTube downloader browser plugins that generate a proper link/URL for you), it most probably violates the YouTube API Terms of Service:
II. Prohibitions
Your API Client will not, and You will not encourage or create functionality for Your users or other third parties to:
...
access any portion of any YouTube audiovisual content by any means other than use of a YouTube player or other video player expressly authorized by YouTube;
https://developers.google.com/youtube/terms

Related

I want to a create an audio visualizer for youtube videos, but cross-origin requests won't allow access to embedded iframe

My objective is to create an audio visualizer that responds to the playback of a Youtube video. Unfortunately, YouTube uses an iframe, which seems to mean that accessing the media stream is impossible due to cross-origin requests (at least, I haven't been able to get it to work).
Is there a front-end solution? Is there any way to hook into the browser audio, or accomplish this in some other way without accessing the iframe's inner DOM elements?
What about using a library to download the video/audio and store it in local browser cache? Is it possible to sync with the embedded playback by getting a timestamp from Youtube's api and read a local copy for the audio processing? I've been trying all day to select the video element and create an audio context, but I don't know if there are any options to explore.
There is a similar question about 7 years ago: Is there anyway to visualize youtube audio from an iframe using the web audio api?
But the only solution required using something called "youtube-audio-stream" which is some kind of local app to stream youtube audio. At least, I haven't been able to get it to work with codepen, jsfiddle or codesandbox. I'd like it to be used alongside or transparently with the embedded youtube player and I'm not exactly sure if that is the direction I should be looking.
Maybe start with here:
Detect if audio is playing in browser Javascript
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
I am not sure if that would be the solution to your requirement, but worth a try.

Cant play videos faster than 2x with youtube iframe api

Youtube iframe API doesn't allow player.setPlaybackRate() to be set higher than 2 is there any other way to speed it up more than 2x?
Yes, you can try this script https://greasyfork.org/it/scripts/421610-youtube-speed-up/code
It overwrites _yt_player.xx.yy.zz.kk.getAvailablePlaybackRates() to return an array [0.25 ... 4].
The supported playback speeds are listed by player.getAvailablePlaybackRates() on the Youtube iframe API.
Youtube itself defines what playback speeds it supports. You'll want to implement your own video player (i.e. download the video from YouTube server-side and serve it to your client via a different video player) if you want to change this further.

how to embed videos from JW Player to another site?

I have this news:
http://www.lanacion.com.ar/1923707-google-presento-su-guia-de-los-juegos-olimpicos-rio-2016
In the body, it has 2 videos embed with JW Player. It hasn't the video's url, only the video id. Is there any way to get the video url or embed the player?
If you see more slowly, in the page source there isn't any JS code related to the player either, even the url's JS library, only the CSS stylesheet..
I was trying to import JS library but i can't because i don't know the player ID..
In the docs, all the examples explain how to embed a video, but in my case i don't have the video url and it's just i looking for.
If you want to find the URL that is being played, watch the requests that are happening in the browser's Network monitor (part of developer tools). That will show you a URL.
It may not be much use though if the content is protected - they may do something like put a timestamp/IP hash on the URL or adopt some other scheme to avoid you linking directly to in.
In this case, for the first video, I was able to see the URL for the stream http://content.jwplatform.com/manifests/oYFEN0e0.m3u8, and link to it in HTML (only tested in Safari, which I know handles HLS files):
<video controls autoplay src="http://content.jwplatform.com/manifests/oYFEN0e0.m3u8"></video>

generating audio waveform from youtube video

does anyone know if is it possible to render an audio waveform from a video playing in a youtube player using Javascript?
Thank you!
On the client side, it's not possible to isolate the audio from the video data.
You would need to get the raw audio data to be able to then process it with the WebAudio API (e.g. display it).
There are some server-side solutions (extracting audio from video, sending it back etc.), but that's not legal, as it's written in the TOS of youtube:
(https://developers.google.com/youtube/terms?hl=fr)
You are not allowed to:
separate, isolate, or modify the audio or video components of any YouTube >audiovisual content made available through the YouTube API;
promote separately the audio or video components of any YouTube audiovisual >content made available through the YouTube API;
See this questions for more details:
Is there a Youtube API that gives only audio?

Detecting Disabled Youtube Video

Given an Youtube video id how can I determine from JavaScript whether the video has embedding disabled?
yt:noembed
The tag specifies that a video may not be embedded on other websites. This tag may be included in a request to upload or update a video's metadata. By default, videos can be embedded on other sites unless they are private videos. If a request does not include either the tag or the tag, a video will be embeddable on other websites.
Possibly of Interest:
Dealing with YouTube Videos that You can't Embed
You'd have to use a server-side script for this, and use some AJAX to call it.
FYI you can get GData responses in JSON format, so you could use javascript to check the embed status before you show the embed player.
If you prefer, you can hook into the onError callback in the player, but that's probably not as nice of a user experience as checking first.
If you’d like to only search for videos that are embeddable, add format=5 to your query.

Categories