Video.js spinner not dissapearing in IE - video.js

This video is set to autoplay and loop. The start is ok. Wheel spinning video loading. But after the first playback the spinner comes up again. Any solution for this?
Maybe this is related issue:
The test video on videojs.com when opened through Internet Explorer.
Click play, then skip to near the end of the video. It's not set to
loop, but anyway after the playback it returns to the start in Paused
mode, and you can actually see the spinner behind the play button.
However it's not animated, in my case it's spinning.

You can add this: data-setup='{"children": {"loadingSpinner": false}}' to your video tag, it will remove the spinner.

This seems to be a fairly common issue with VideoJS. I noticed you already set display: none; on the .vjs-loading-spinner element and that's not working, so I was able to get rid of it by using jQuery to remove the element from the dom.
$('.vjs-loading-spinner').remove();
That should take care of the problem, though I realize this is probably not ideal.

Related

Scrolling with scroll wheel doesn't render, scrolling by clicking-dragging scrollbar works fine

Sometimes in my UWP app I experience a problem while scrolling with my scrollwheel. Basically the scrollbar moves when I use my scrollwheel, but the content isn't rendered properly; resulting in an empty block which gets scrolled up and down.
Yet everything works fine when I click and hold the scrollbar instead of using the scrollwheel on my mouse.
I have to restart my UWP app in order to get things back to normal.
The issue appears while scrolling a default XAML ListView, but also in a RadDataGrid (Telerik).
I have made a screen recordingo of this issue, which hopefully will illustrate what's happening more clearly.
Click to see video
I haven't found exact steps to reproduce this issue, it just seems to be there at random from time to time.
Does anybody have an idea what might be going on here and how this could be fixed?

videojs : "Exited fullscreen because fullscreen element was removed from document."

I'm having a trouble with full-screen toggle of videojs HTML5 Player.
Here, I've got two videos on a page (https://yiddishevinkel.com/archives/9555) where the main video looks ok. But the video in sidebar, I'm not able to switch to full screen mode. When i hit the full-screen toggle, It switches to full screen and immediately gets exited from the full screen mode with "Exited fullscreen because fullscreen element was removed from document." warning in Firefox console.
Note that, Issue persist with single instance of video on page and chrome as well.
Without even consulting the fullscreen api documentation, it seems likely from the message you are getting that videojs is replacing an element and you are invoking requestFullScreen on that element or one of its children. An element that does not exist cannot be displayed full screen, therefore the mode exits, a behaviour that is both documented and pretty obvious from the message.
Solution: don't. Wrap it with a div and invoke requestFullScreen on that.

Twitch video minimise on browser back click

When watching a livestream on twitch.tv I noticed that when you press the back button the stream simply minimises to the bottom left corner with a smooth animation, you can then navigate around twitch with it always minimised. It doesn't even seem like the page refreshes and that video player element never refreshes even though everything else is completely changing.
Can someone explain how they are doing this?
It's done using a single page application. https://en.m.wikipedia.org/wiki/Single-page_application

Event that fires when video is loaded and first frame is visible? Or how to crossfade two videos another way?

I am trying to use video.js in a samsung smart tv application which unfortunately can only play one video at a time.
I need to simulate the smooth, preferably crossfade, transition between two videos. I am trying to do this by first fading in a screenshot of the next video and using that to cover up the screen while I switch video sources of the video.js plugin. When the player is ready I need to remove the screenshot.
The closest I have found is to remove the screenshot when "loadedmetadata" is called however I am still seeing an inconsistant blip of a black flash between the time the screenshot is removed and the video plays. This is very jarring and I need a consistent way to remove the screenshot only when the first frame has been loaded into the player.
Any other suggestions on how I could each a smooth transition between two videos while only using one video element would be greatly appreciated.
I found the loadeddata event which, as described on MDN :
The loadeddata event is fired when the first frame of the media has finished loading.
loadedmetadata only announce that media informations such as duration are loaded, but the loadeddata event should do the trick.

Flexlider - Automatic sliding

I've got the Flexslider "plugged in" to me website, although there appears to be a generic programming problem with it (I am a complete coding novice). When playing a video, the automatic scrolling does not stop so it continues to show other videos when it is playing, this only stops when you specifically press the "thumbnail" link at the bottom.
Has anyone encountered this before and managed to see if this can be stopped?
If I understood you correctly you should disable the auto sliding in the slider initialization. You can do that like this:
$('.flexslider').flexslider({
slideshow: false
});