mix-blend-mode on a video mp4 does not work on Safari : the colored div stays opaque with no blend effect.
An example on Codepen (sorry impossible to put the complete codepen.io link, just add codepen.io/ before) :
Webdee/pen/MWONEwV
Thx for any trick to fix this issue !
Related
In video-js.css, I have set .vjs-control-bar to bottom:-36px, which places it below the video, and visibility: visible; and opacity: 1; so it never fades. That's how I want it, but on iPads, the Quicktime control-bar inserts itself on the video (and fades, but reappears on touch). Both work.
After reading this - https://github.com/videojs/video.js/issues/1096 - I tried changing nativeControlsForTouch!==1) to nativeControlsForTouch!==0) - I'm assuming "0" = "false" - but the QT controls are still there. Does anyone have a way of hiding the iPad controls?
Alternative - is there a way to hide the videojs control-bar, but only on mobiles with native players, not on PCs that don't?
UPDATE
I can hide the QT control bar on iPad 7 by adding data-setup='{"nativeControlsForTouch": false}'... to the video tag, but that doesn't work with video.js, only with video.dev.js, where I find if (vjs.TOUCH_ENABLED && player.options()['nativeControlsForTouch'] !== false). In video.js I find: nativeControlsForTouch!==0).
If I delete that data-setup from the video tag, it has both control bars with video.dev.js as well. I'm no expert - what's going on?
Here's links to the files:
http://www.casedasole.it/testing/video/demo.html
http://www.casedasole.it/testing/video/video.js
http://www.casedasole.it/testing/video/video.dev.js
Try using <video data-setup='{"customControlsOnMobile": true}' …. This is false by default and controls whether the video.js controls will be shown instead of native.
I have been throwing idea around trying to figure out how to fix this thing, but I can't figure it out.
So what we have, we are using the sencha video to display the videos.
var video = {
xtype: 'video',
url: res,
posterUrl: shortd[1],
enableControls: true
};
Ext.getCmp('VideoInfoVideo').add(video);
When the video is played, iOS7 opens it in full screen and when closing the video, about 20px of white space is added to the bottom (to the entire app). If you open the video again, another 20px is added.
jQuery see's the difference in the body tag, but when setting the height to the original, it does nothing.
Forgot to mention, Sencha Version: 2.3.1, Phone Gap 2.9.1
I ended up with a hacky fix to work around this.
I would detect when the video would end or exit full screen and then have a 200ms delay to reset the height on the app to remove the 20px white space.
I'm having a problem with a position: fixed sidebar which has full-height when over-scrolling the body and then suddenly scroll back top.
Here is a video of the process i made on the ipad simulator (the same issue occurs when testing on the actual device).
http://www.screencast.com/t/SKEwFbx2tYvE (sorry for the big jing video size)
I also put a demo and a jsfiddle so you can test it yourself and play with it:
http://epicco.me/sandbox/scrolling_demo/
http://jsfiddle.net/qnB7z/
Thanks in advance
I'm having some issues with AirPlay. The thing is, I'm developing with the ATV3, and my TV set supports 1080p. But when I start screen mirroring and receive the new instance of UIScreen, the bounds and the applicationFrame are both giving me a 720p resolution.
But it gets weird when I actually moved the subviews to a negative value, and the whole screen gets covered. So, technically my iPhone is streaming at 1080p, but the bounds returned by the UIScreen are underscanned.
I've tried modifying the overscanCompensation before getting the bounds or the applicationFrame (tried both with all 3 overscanCompensation values available) but I'm still getting the same result.
Here is a picture of what I'm getting (sorry, it's the worst picture in the planet, I know, but I was using my phone to stream the image to the ATV :) )
Red view is the 720p reported by bounds.
It gets even weirder when I actually try this out in my ATV2 (it is supposedly limited to 720p even if it supports 1080p) and the result is exactly the same.
Anyway, if someone knows the method to get the real screen display to avoid putting a settings view in my app, I'll really appreciate it.
Thanks in advance :)
When you mentioned that you tried all 3 overscanCompensation modes, I presume you mean the 3 documented modes:
typedef enum {
UIScreenOverscanCompensationScale,
UIScreenOverscanCompensationInsetBounds,
UIScreenOverscanCompensationInsetApplicationFrame,
} UIScreenOverscanCompensation;
However, there is a fourth mode, which is not there, but should fix your problems: just set your overscanCompensation to 3.
Also, take a look at this SO question.
The answer of Ivan solved the same issue for me! But I also had the borders when using AirPlay Mirroring. I got rid of the borders without setting the overscanCompensation property by changing a setting on my Apple TV: try setting 'Settings > Audio & Video > Adjust For AirPlay Overscan' to Off (default On).
The setting that works best for most TVs is:
externalScreen.overscanCompensation = UIScreenOverscanCompensationInsetBounds | UIScreenOverscanCompensationInsetApplicationFrame; // this is the same as setting it to 3
Just setting it to UIScreenOverscanCompensationInsetApplicationFrame can cause misalignment of the UIWindow contents.
3 is a bitmask of UIScreenOverscanCompensationInsetBounds(1) and UIScreenOverscanCompensationInsetApplicationFrame(2) for those wondering where that number comes from and why it works.
I noticed the transparent bg for the loading.gif doesn't work in Safari or Chrome (Mac). This is in my testing as well as the default video at http://mediaelementjs.com/
It just shows a square black box for the background on the loading gif.
Anyone else have this issue?
I fixed the css for this. You can get the fix here:
https://github.com/ccoulson/mediaelement/commit/866b1d8ac725ed0997a12232fb4446041a249415
I've written a blog post about the change, which you can read here:
http://blogs.visigo.com/chriscoulson/improving-the-mediaelement-js-loading-animation/