How to get debug video data playbackQuality from youtube? - javascript

Each youtube video has the ability to get debug data by right-clicking and selecting the desired item in the "Copy data for debugging" menu
The value of the debug_playbackQuality field is important to me
How can I get this data using youtube api or some other way? Or how to get the debug_playbackQuality value right away?
Heard about the player.getPlaybackQuality (): String function but it looks like it works with js, I need php
When working with the youtube api, I need to get the value of the debug_playbackQuality parameter for each video (similar to privacyStatus and embeddable) and then, based on the data, make a decision about further work with the video. I don't know how to check the value of debug_playbackQuality.
Help me figure it out, please.
p.s.
Try to run this video https://www.youtube.com/embed/1fO1HmgBHaE
Oops!
These videos are check for privacyStatus and embeddable!
privacyStatus = public, embeddable = true
Because of this, videos are embedded in the site, but do not work on it.
I found the difference - solution!
These videos have a status equal to "debug_playbackQuality": "unknown"!
The only option not to add them to the site is to check the debug_playbackQuality by unknown status!

Related

Show Google Maps & YouTube videos after Cookies got accepted

I am using this plugin on my WordPress website: https://wordpress.org/plugins/cookie-notice/ and I am pretty satisfied with it because it's easy to use and lightweight.
With the latest GDPR rulings it is now needed to hide Google Maps and YouTube videos or replace them with a placeholder image as long as the visitor doesn't accept the cookie consent. Unfortunately the plugin doesn't have such a functionality.
Has anyone a sample code or an idea on how to embedd Google Maps and YouTube videos like that? All plugins that have this functionality cost around 99 $ a year, which is a bit too much for only one map and one YouTube video on my homepage...
Im not sure how farmiliar you are with Jquery but you could do something like this.
var cookiesAccepted = false;
Add 'media-blocks' class to all media you want to hide.
Set jquery to watch Cookies bar for accept click. When its clicked add a class that shows all your embedded media that you wanted to hide, eg:
$('#cookie-btn').on('click',function(){
var cookiesAccepted = true;
$('.media-blocks').addClass('show');
})
Just a guideline of how I'd do it.

How to remove pause menu video suggestions / related videos (class: ytp-pause-overlay) from Youtube embed

Youtube is showing a menu with video suggestions while my embedded video is paused. The element in the iframe has the class 'ytp-pause-overlay'
How can you remove it without removing controls?
In case you loading your videos using Javascript YouTube Player iframe API you will need to use Player Parameters and set the value of rel to 0.
Example:
player = new YT.Player( 'player', {
height: '390',
width: '100%',
videoId: 'y9QEQHe8ax4',
playerVars: { 'rel':0}
}
);
Update in October 2018
Youtube changed the behavior of rel parameter:
The behavior for the rel parameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.
To be more specific: Prior to the change, if the parameter's value is
set to 0, then the player does not show related videos. After the
change, if the rel parameter is set to 0, the player will show related
videos that are from the same channel as the video that was just
played.
Update in October 2019
I found a workaround in case you are the owner of the videos.
Use the provided code example to require Youtube to load the related videos from your channel only.
In order enforcing Youtube to remove the related videos list.
Simply I created a new channel and uploaded the needed videos as unlisted. You have to make sure that All the videos in the new channel are not listed which means that when Youtube tries to show the related videos from the same channel the list will be empty so Youtube doesn't show related videos menu at all.
To test this solution try an incognito session or another browser because Youtube will show the related videos menu to you if you are logged in with the same account that owns the channel and has access over the unlisted videos
Yes it is possible. You have to use showinfo=0?ecver=2 in your iframe code.
Example:
<iframe src="https://www.youtube.com/embed/pV1jC37ELmQ?rel=0&showinfo=0?ecver=2" width="640" height="360"></iframe>
The solution for me was to add the parameter "rel" with a value of "0" to the end of the url.
According to the developers guide here, the description of the "rel" parameter is:
This parameter indicates whether the player should show related videos when playback of the initial video ends. Supported values are 0 and 1. The default value is 1.
When I set the value to "0", this parameter keeps the suggested videos from being displayed when the video is paused.
An example url would be:https://www.youtube.com/embed/ABCDEFG?rel=0
None of the proposed solutions worked for me, so I ended up adding this to the page:
<style>
.ytp-pause-overlay{
display:none;
}
</style>
After trying all of these tricks (and a few from other posts as well), I still could not get rid of the ytp-pause-overlay. The only thing that DID actually work was restricting the dimensions of the iframe itself (using percentage), while setting the desired dimensions (using px) in an outer div.
Example: <div style="height: 300px; width: 350px"><iframe style="width:90%" src...></iframe></div>
(Please excuse the inline styling)
I messed around with this for a little bit and found this solution worked for me:
my browser is chrome version 73.0.3683.86
my adblock plus is version 3.5
using adblock plus, go to its settings, click on advanced on left side, scroll down to the "My Filter List" area, add the following line:
.ytp-pause-overlay
click save, reload the webpage with the video.
I have also added the following but I do not think it is necessary to solve your exact problem but I am including the info just to be thorough. I believe this just blocks the grid of suggested/related content at the very end of the video.
/yts/swfbin/player-*/endscreen.swf
youtube.com##div.videowall-endscreen
youtube.com##watch-related

Alexa skill to control logitech squeezebox - request to modify code

I've been trying to set up an alexa application called muzak - https://github.com/lordpengwin/muzak - which allows control of logitech squeezeboxes using Echo.
The code works fine, but the play function is set to select random tracks which is not that helpful.
I'd like to be able to use the play function to simply play (or toggle/pause) whatever is on the current playlist.
It can't be that much of a change required to the code to allow this, presumably changing the randomPlay piece in line 254 of the muzak.js https://github.com/lordpengwin/muzak/blob/master/muzak.js file. I've tried changing this to play, pause, toggle etc. but none of those seem to work.
Grateful for any suggestions on how the code could be updated to allow current playlist to be played.
Thanks.
Haven't had a chance to test this out yet, but...
It's probably play(callback) and pause(callback) you want to use. Should be pretty simple - remember to remove that first parameter though, as it's not needed for these functions.
See the example of play(callback).

YouTube stream show subtitles below player

I am have been playing around with a lot of options. popcorn.js, mediaelement.js, jwplayer and I can not find a combination that works. I'm working on a learning website and I need to display the subtitles of the video below the player. I can get it to work all good when the video is hosted on the server and it has a file link. I was using MediaElement.js because all the videos I need are on YouTube so it needs to stream from there.
I have tried a few different combinations and popcorn was originally going to work. When I started playing with it I found their YouTube streaming no longer works. I've followed their examples but its a no-go. Also with popcorn I couldn't get to work with any other subtitle file other than TTML (even though they support the others) and I need one that can have html inside of it.
My latest endeavor got me using the script from here: http://www.storiesinflight.com/js_videosub/#code
This lets me use .srt which is good, but I can't get it to let me stream YouTube with any other JavaScript players so I'm back to where I started.
I have seen a post about going through one of the transcoding websites and using the .mp4 link, but I don't want to rely on a middleman. If that site shuts down then my site will also be screwed. I doubt YouTube is going anywhere anytime soon.
There's a surefire way to do this and that's to create your subtitles in notepad and then upload them to youtube
Then Go to your Account Settings page in Youtube
Select Playback from the left-hand menu
Select/check 'Always show captions'
You should Check Show automatic captions by speech recognition (when available) to enable automatic captions for videos that don't already have captions provided)
Save! and you're done
No javascript required

HTTP Live Streaming: how to listen for timed metadata embedded as ID3 tags using Javascript in iOS8?

We have a video streaming platform where users can broadcast a live video stream and synchronise it with a set of presentation slides. To display the broadcast on iOS we are using HTTP Live Streaming. In order to show the slide at the correct time in the stream on iOS we were listening for the qt_timedmetadataupdated event provided by Apple's Quicktime Javascript API. This method is described here:
http://www.wowza.com/forums/content.php?355-How-to-debug-timed-data-events-%28ID3-tags%29-from-Apple-HLS-streams-in-iOS-devices
However, in iOS8 this method no longer works so we are trying to find an alternative solution.
Does anyone have an idea as to how we could do this?
The only bit of progress I've managed to make is checking for an "in-band metadata text track" as described here:
https://github.com/videojs/videojs-contrib-hls#in-band-metadata
I've set up an example test page below using flowplayer and the flashls plugin:
http://jsbin.com/vohicoxegi/1/edit?html,js,output
In the code I've created an interval that checks every 500ms whether a text track exists whose kind property is metadata. I've noticed that when a bit of timed metadata is injected into the stream then one of these text tracks is created. But the problem is that there is no way for me to access the data that is in the timed metadata which I need to synchronise the (previously mentioned) slides correctly.
Please note that I'm only concerned with live streaming. Playing an existing media file is not a problem.
Iron Mike's solution was nearly correct. When a track event comes through you have to set its mode property to hidden otherwise the cuechange events won't fire. Here's a full example:
$(videoElement)[0].textTracks.addEventListener('addtrack', function(addTrackEvent) {
var track = addTrackEvent.track;
track.mode = 'hidden';
track.addEventListener('cuechange', function(cueChangeEvent) {
// do what you want with the cueChangeEvent
});
});
I think the text tracks are the way to go. I used qt_timedmetadataupdated before as well and got this working nicely on ios8 like this:
$(videoElement).textTracks.addEventListener('addTrack', function(addTrackEvent) {
var track = addTrackEvent.track;
track.addEventListener('cuechange', function(cueChangeEvent) {
and so on...
})
})

Categories

Resources