Develop Reference

Find out when the Youtube HUD fades out, and fade out an element with it

I am creating a chrome extension that adds a button to the youtube player HUD (to the left of the watch later button). This works fine, but the only problem is that when the HUD autofades after a few seconds of inactivity, this button element doesn't.
I've added the button to the following div using javascript:
<div class="ytp-chrome-top-buttons"> </div>
and my button looks like this:
<button class="customClass" id="customID" title="custom title"><svg class="customClass"></svg></button>
I've looked through the source of the page to try and see how exactly youtube makes the other icons disappear, and whether I can copy a class to my svg to make it disappear, but I haven't been able to find it.
I've looked at using a timer and javascript to make the element disappear, but I figured if the functionality is already there, why complicate it.
As a last resort I will be resorting to using the timer method, but I'd much prefer using CSS classes.
I have had a cursory glance into the Youtube Player API, but to be frank, I'm having a hard time understanding how it works (While I have a few years of programming experience, I only started learning javascript, HTML, and CSS yesterday). I also understand that this API is only for embedded youtube videos?
To clarify, I DO know how to use API's in javascript, just not this particular one. I have used the youtube data API to implement the button's functionality successfully.
Any help is appreciated.
Thanks.

If you examine the element changes, you can see that the class list of the video has changed with the change of the bottom bar. When the bottom bar is hidden, the ytp-autohide class is added. Keeping this in mind, after scanning the class changes with the mutation observer, you will reach the desired result when the ytp-autohide class's existence status changes.
var video = document.querySelector("#movie_player");
var lastState = video.classList.contains('ytp-autohide');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.attributeName == "class"){
var currentState = mutation.target.classList.contains('ytp-autohide');
if(lastState !== currentState) {
lastState = currentState;
if(currentState)
console.log("Hided");
else
console.log("Shown");
}
}
});
});
observer.observe(video, {attributes: true});

how to detect if MUX video embedded in WordPress is streaming or playback of a fixed length video?

I've searched here and found some very old answers but I think this question has not been answered. I'm using the MediaCloud plugin in Wordpress to display videos. When I create a page, I can use a short tag to display a video by including this in my HTML markup:
<div id="my_video">
[mux_video id='2926' autoplay='false' loop='false' muted='false' controls='true' inline='false' preload='metadata']
</div>
Wordpress will query an internal db for media id=2926 and ends up rendering this HTML markup to display the video (url changed for privacy):
<div id="my_video">
<figure>
<video class='mux-player video-js' width=1920 height=1080 poster='https://www.example.com/wp-content/uploads/2021/08/2926--thumb.jpg' controls preload='metadata'>
<source src='https://stream.mux.com/<-LONG-ENCODED-ID-HERE>.m3u8' type='application/x-mpegURL' />
</video>
</figure>
</div>
My configuration of MediaCloud uses videojs to display the video but I've been unable to locate any useful function in the docs which can tell me if the video in question is a livestream or some previously broadcast live stream or uploaded video with a fixed duration (presumably progressive download?). It seems clear that the JS running in the page can tell the difference because a livestream clearly has the LIVE indicator visible and the timeline indicator/scrubber removed whereas an old video will have the timeline indicator/scrubber and displays the fixed length of the video.
I thought at first that I might sniff for the Program Data Time (PDT) and this might be absent for pre-recorded content, but MUX also provides PDT for old livestreams. This code will output the PDT for the currently running video but cannot be used to distinguish livestream from old videos:
const video1 = document.querySelector("#my_video video");
let player1 = videojs(video1);
window.player1 = player1;
player1.on('loadeddata', () => {
let metadataTrack = Array.prototype.find.call(player1.textTracks(), track => track.label === 'segment-metadata');
metadataTrack.on('cuechange', () => {
let pdt = metadataTrack.activeCues[0].value.dateTimeString;
document.getElementById('pdt_1').innerHTML = pdt;
});
});
I also tried checking for the video's duration to see if that might help me distinguish -- was thinking a livestream might have some empty value for duration but that's not the case. So far, it always shows me some positive integer value when I do this:
video1.addEventListener('loadedmetadata', (event) => {
// duration and dimensions of video are now known
let dur = Math.round(video1.duration);
console.log(dur)
});
Is there some simple JS that I can use to return a true/false value indicating whether the video in question is a livestream or whether it's an old video of fixed duration? Someone suggested querying the MUX API but that's not going to work for me in this case and would gum up my page load times.

player.duration() is Infinity for live streams. The live indicator checks that on durationchange events.

How can I disable fullscreen mode in Kaltura's HTML5 media player?

I'm loading Kaltura's video player in a learning management system (essentially a CMS for educators and their students), and it gets presented inside an iframe. With current browser security protocols as they are, full screen viewing is not possible. I need to disable the fullscreen capability for this use case. Here's an idea how we have the embed set up:
loadMovie: function(id) {
var autoPlay = this._autoPlay;
var allowFullScreen = this._allowFullScreen;
kWidget.embed({
'wid': '_' + this._partnerId,
'targetId': this._playerTarget,
'uiconf_id': this._playerId,
'entry_id': id,
'params': {
'wmode': 'transparent',
'allowFullScreen': allowFullScreen, // not working for html player
},
'captureClickEventForiOS': true,
'readyCallback': function (playerId) { // autoPlay movies
var kdp = document.getElementById(playerId);
kdp.kBind('mediaReady', function() {
kdp.sendNotification('doPlay');
});
}
});
}
I've been able to hide the fullscreen button with CSS, but a user can still (intentionally or inadvertently) double-click the playback area to achieve fullscreen. Because of the iframe issue, the video essentially disappears, leaving the user confused and unable to easily close the player modal.
I'm passing a data attribute from the movie links to the player init function to indicate when fullscreen should be unavailable. I just need to find out how to actually do the disabling. Kaltura's documentation has not been helpful.
I've also fiddled with legacy Flash params, but they have no effect on the HTML 5 player. I'm using version 2.11. Thank you.

You need to put this in a script tag:
mw.setConfig('EmbedPlayer.EnableFullscreen', false);

Why don't you simply put a div overlay on top of the player with z-index, say 10000. That way, even if some double-clicks, they are clicking on the DIV and nothing happens. Continue with the CSS button hiding.

trying to add a multi source video player with more then one video?

Im trying to make a video player work in all browsers. There is
more then one video and every time you click on demo reel it plays the
video and if you click the video 1 the other video plays. How can i
make them both work in all browsers? Here is my html and javascript
html
<video id="myVideo" controls autoplay></video>
<div>
Demo Reel</div>
video 1</div>
</div>
javascript
function changeVid1() {
var changeStuff = document.getElementById("myVideo");
changeStuff.src = "video/demoreel.mp4"
}
function changeVid2() {
var changeStuff = document.getElementById("myVideo");
changeStuff.src = "video/video1.mp4";
}

After you switch the source of the video, you need to run .load() on it to force it to load the new file. Also, you need to provide multiple formats, because there is no video codec supported by all browsers.
First, set up your sources like this:
var sources = [
{
'mp4': 'http://video-js.zencoder.com/oceans-clip.mp4',
'webm':'http://video-js.zencoder.com/oceans-clip.webm',
'ogg':'http://video-js.zencoder.com/oceans-clip.ogv'
}
// as many as you need...
];
Then, your switch function should look like this:
function switchVideo(index) {
var s = sources[index], source, i;
video.innerHTML = '';
for (i in s) {
source = document.createElement('source');
source.src = s[i];
source.setAttribute('type', 'video/' + i);
video.appendChild(source);
}
video.load();
video.play(); //optional
}
See a working demo here.
This gives the browser a list of different formats to try. It will go through each URL until it finds one it likes. Setting the "type" attribute on each source element tells the browser in advance what type of video it is so it can skip the ones it doesn't support. Otherwise, it has to hit the server to retrieve the header and figure out what kind of file it is.
This should work in Firefox going back to 3.5 as long as you provide an ogg/theora file. And it will work in iPads, because you only have one video element on the page at a time. However, auto-play won't work until after the user clicks play manually at least once.
For extra credit, you can append a flash fallback to the video element, after the source tags, for older browsers that don't support html5 video. (i.e., IE < 9 - though you'll need to use jQuery or another shim to replace addEventListener.)

seek to a point in html5 video

Is it possible to seek to a particular point in html5 video displayed in a web page? I mean ,can I input a particular time value (say 01:20:30:045 ) and have the player control (slider) move to that point and play from that point onwards?
In older version of mozilla vlcplugin I think this is possible by seek(seconds,is_relative) method..but I would like to know if this is possible in html video.
Edit:
I created the page with video and added javascript as below.When I click on the link ,it displays the time of click..but it doesn't increment the play location..but continues to play normally.
Shouldn't the video play location get changed?
html
<video id="vid" width="640" height="360" controls>
<source src="/myvid/test.mp4" type="video/mp4" />
</video>
<a id="gettime" href="#">time</a>
<p>
you clicked at:<span id="showtime"> </span>
</p>
javascript
$(document).ready(function(){
var player = $('#vid').get(0);
$('#gettime').click(function(){
if(player){
current_time=player.currentTime;
$('#showtime').html(current_time+" seconds");
player.currentTime=current_time+10;
}
});
}
);

You can use v.currentTime = seconds; to seek to a given position.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

Unfortunately it seems with some movie elements it behaves differently than others. For instance with an amazon video_element, it seems you must call pause before you can seek anywhere, then call play. However, if you call play "too quickly" after setting the currentTime then it won't stick. Odd.
Here is my current work around:
function seekToTime(ts) {
// try and avoid pauses after seeking
video_element.pause();
video_element.currentTime = ts; // if this is far enough away from current, it implies a "play" call as well...oddly. I mean seriously that is junk.
// however if it close enough, then we need to call play manually
// some shenanigans to try and work around this:
var timer = setInterval(function() {
if (video_element.paused && video_element.readyState ==4 || !video_element.paused) {
video_element.play();
clearInterval(timer);
}
}, 50);
}

Top answer is outdated.
You can still use:
this.video.currentTime = 10 // seconds
But now you also have:
this.video.faskSeek(10) // seconds
The docs provide the following warnings regarding the fastSeek method:
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The HTMLMediaElement.fastSeek() method quickly seeks the media to the new time with precision tradeoff.
If you need to seek with precision, you should set HTMLMediaElement.currentTime instead.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/fastSeek
Based on the above I guess the following is best if cross browser compatibility and performance are your top priority:
const seek = secs => {
if (this.video.fastSeek) {
this.video.fastSeek(secs)
} else {
this.video.currentTime = secs
}
}
seek(10)
If you prefer accuracy over performance then stick with:
this.video.currentTime = secs
At the time of writing faskSeek is only rolled out to Safari and Firefox but expect this to change. Check the compatibility table at the above link for the latest info on browser compatibility.