On the left side is my electron application with one youtube video. On the right side is my app created with pygtk2 and webkit. The contrast is better with webkit. With Electron, the black board arround the video diverges. How can I fix it?
The problem is about Electron uses webm in chromium. The python webkit app uses mp4. Mp4 is not available in the Electron because it's a proprietary format. The solution that I found for control this difference about the contrast was in css filters on the video element.
-webkit-filter: contrast(120%);
Article about css filters
Related
I'm trying to make new web-site that background has a video.
I found a JS library: tubular
This plugin working as expected in my desktop browser. (Checked on : Chrome,Safari,Firefox)
But, This NOT working in mobile browsers.
I tried in (Nexus 5, HTC M8).
Both devices are not responding for video background.
Anyone there who knows the solution for this issue or some alternative library that I can use?
I suspect this is a problem with the video background not autoplaying on a mobile browser. This is by design though, it is a mechanism that prevents autoplaying videos from using up bandwidth unnecessarily.
I have a video application where I have added custom css to HTML5 player.
It works fine in windows browser both in minimised and maximised mode.But in case of Ipad fullscreen HTML5 does not show up instead native player comes into play.
How can we make HTML5 player to play on Ipad fullscreen mode instead of native player.
I came to know that if it is Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES.
We can make HTML5 player appear.But what is UIWebView and how can I make use of it?
Any kind of help is greatly appreciated.please help.
UIWebView refers to development of application (App Store) using either native code or using web languages with technologies like Phonegap. It is a component that allows to render a webpage in an application.
Apple does not allow to control its native fullscreen experience on iPad/iPhone when you watch HTML5 video in Safari iOS - the video will play in the default quicktime player when in fullscreen. It is stated here.
allowsInlineMediaPlayback is used in a UIWebView as an HTML5 video tag property to allow video to play inline (aka in window mode) and so that the native fullscreen player is not automatically toggled when video is watched on an iPhone/iPod.
To achieve what you want you can either build an App for this or if you want to stick to browser based video display in HTML5 you can emulate fullscreen on iPad (and iPad only - it will not work on iPhone/iPod). For that you need to develop your own custom controls and extend the dimension in CSS of the video tag to the full width and height of the view port.
This is a bit tricky but you can read here - section Pseudo Fullscreen - for a start. IE9 and 10 for example do not support native fullscreen in HTML5 video and you need to implement this approach as well.
I personally use something slightly different like:
.fullscreen{
position:fixed;
z-index:1000;
left:0; right:0; top:0; bottom:0;
width:100%;
height:100%;
background:#000000;
overflow:hidden;
}
For the iPad you can bypass the native full screen approach with this pseudo fullscreen angle.
You may also want to read here on how to detect native fullscreen capabilities in browser.
This code is working on MacOs and not on iOS.
soundManager.setup({url:'soundmanager2/',onready:function(){var mySound=soundManager.createSound({id:'aSound',url:'soundmanager2/notes.mp3'});mySound.play({from:50000,to:52000});},ontimeout:function(){}});}
When I do not use the 'from' and 'to' commands it works fine on iOS... but I need audio sprite.
Any idea to fix that or another way to make audio sprite working with iOS ?
Thanks
You probably should be using something like Howler.js for audio sprites that work on mobile devices.
SoundManager uses HTML5 audio and a Flash fallback. You need to be using the Web Audio API for sound sprites on mobile (which Howler.js supports).
I am developing my custom video control using jquery , javascript. for that i choose js flv player without any control bar,
so I almost developed its control bar and all the option using its listner javascript object, but now there is no full screen method in that js flv player.
any body know how can I control the full screen option, I am using the following flv player
flv-player.net
As per their FAQs:
Fullscreen only works with Flash Player newer than 9.0.16.
It is controlled by showfullscreen option which clearly mentions that it only works with Flash v9.0.16 or higher.
An alternative is to switch to FlowPlayer plugin. I've used it in a current project with great success. It provides many more options and supports mobile devices too (iPad etc).
Here's a Flowplayer demo for switching to fullscreen: Forcing to view the video in fullscreen mode
Another one: Custom Fullscreen action with overlay
The best player to use would be videojs. Really flexible. I have used it in one of my projects and i would recommend this for you. Got a full screen option by default. Uses js and no flash needed at all.
DEMO: http://so.devilmaycode.it/js-flv-player-fullscreen-option/
NOTE: as explaned by the author of the FLash Player here
Fullscreen only works with Flash Player newer than 9.0.16.
Fullscreen is not compatible with wmode transparency.
so we can at least simulate the full screen for those that not support it by using the $(document) width / height ( or whatever you want ) to fix the player size: and make use of the wmode property; this way you can use CSS position and z-index to display the controls over the flash player.
UTILS: Detecting Flash Player versions and embedding SWF files with SWFObject
Is it possible to hide the blackberry cursor in the browser? Using Javascript or CSS?
I am trying to rebuild the technique used on native apps where you browse through the items with your poke. I think this works nice on their native apps and I like to use that technique on my website where visitors can browse through various of items using their blackberry poke.
PS. CSS
* {
cursor: url(cursor.png), none !important;
}
Does not work.
This BlackBerry page seems to confirm the cursor style can be changed.
What is the cursor.png file that you are using? Have you tried changing the PNG to be a completely transparent file instead of specifying "none" in the CSS? This website seems to suggest that will work.
As per the comment you should consider what happens for non touch screen devices, but you can always choose to target only touch screen devices by specifying the device models in App World when you deploy your app.