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.
Related
I have a password confirmation form inside WebView and I need it to be usable with hardware keyboard.
When I connect hardware keyboard and hit Tab, once focus enters WebView component it skips first focusable element and goes to the second one. Here's simplified version of the screen.
Video. Has anyone faced this issue and how do you overcome it?
I use react-native-webview library.
As a workaround: inside the page that appears inside the WebView add following
document.body.tabIndex = 0;
This will set body as first focusable element and focus will jump over it (almost invisible).
I have a v-dialog that opens when page is loaded. Somehow overlay is lost. The behavior is very similar to this bug report: https://github.com/vuetifyjs/vuetify/issues/7798
But in my case overlay works when v-dialog loads after several seconds of page loading, and overlay is lost only when v-dialog is loaded from the very beginning. So I have to find the way to fix it or to force overlay to be shown together with dialog.
I tried to work with v-overlay (to wrap dialog content there), but it's content is not shown as well, if we try to do this while page is loading.
So how can I fix this or force overlay to work?
I am using the Flickity slider (from Metafizzy) in a landing page to show different products. The slider is in portrait size and not landscape.
The issue is that when the user only scrolls the top portion of the slider into the viewport on mobile (i.e. 20-30%) and they attempt to scroll/swipe the slide, the screen suddenly jumps to attempt to include the whole slider into the viewport.
This never happens on the mobile emulator on the desktop, but only on the smartphone device on safari and google chrome browsers
Is this intended to be a specific behaviour for the Flickity slider? Like I should not be using it to make portrait sliders? I've gone through the plugin options and not able to fix this behaviour. It never came up in early testing with dummy content.
I've provided a link to the github page where it is happening, you can open it up in mobile browser and see the viewport "jumping" bug when you attempt to scroll the table. https://true-digital-channel.github.io/Galaxy11-Preorder/build/mobile.html
Disable the keyboard accessibility by setting accessibility: false in the carousel options. From the Flickity issue tracker.
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.
I have a web site that opens iframe for video on page, page uses ajax to pull in videos from selected menu. As expected and understood, on iPod touch after selecting video it shows a play button, which brings up video in another screen. However, when the video completes, it returns browser to page prior to one where video was played from. Sequence:
open Page1
go to Page2 which offers videos to play, in iframe
play video
video completes, returns to Page1, not Page2!!
Only happens on iPod touch, so must be issue with how control is returned on video completion.
Any suggestions? If this is not a known problem, I can work up example (currently, need account on site).
Of course, because the browser returns the URL of the page that was displayed before the video was played back. It won't remember the URL of the IFRAME, that had already changed in the process of selecting a video, if I don't get you wrong.
That's a common problem with frames/iframes and one reason why you shouldn't use them.
The solution could be to place your video selection menu in your actual page and not in an IFRAME. This could be achieved by loading in into a DIV via Ajax for example.
Figured this out, sort of. Got it to go back to the right place, but I do believe that it is easy to confuse the iTouch quicktime player and Safari about where to return to.