I'm embedding windows media player in a windows sidebar gadget.
As soon as I start the player (even if i stop it after doing so), hitting WIN+D ("Show Desktop") hides my gadget (all other gadgets stay visible).
What's causing this issue and is there a way to fix this annoying behaviour?
The problem occurs both with a media player embedded in the HTML and with one created with new ActiveXObject(...).
As I was looking for an solution to this question (on StackOverflow). I found that 'styling' media player instance
<object id="mediaPlayer" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"></object>
with this CSS
#mediaPlayer {
position: absolute;
z-index: -1;
}
was all that it took to have it not disappearing.
EDIT:
'Unfortunately' this did fix it, except when you start the player once 'touched' the Gadget would disappear like before.
I did find a way to 'fix' it. It appears not to happen when you use video in the player. It doesn't care if it's viewable. So you could consider finding a video stream for the audio you want to hear. In my case: I wanted to build a Gadget for the dutch radio station 3FM, and include a video stream in the the end.
This was a challenge itself: nothing more annoying than a a-sync video/audio stream. So i had to really 'think outside the box': the flyout consists only of the station's logo. The gadget itself is 'viewable' within the specified range. Except the video stream-container-div is hidden until requested to view and I invoke the gadget's flyout. So in the end: I fixed it, but it's no solution to the original question...
For those interested in the solution: 3FM-2011.gadget download
Related
This is a bug that I have managed to fix by brute force, but I don't understand why the solution worked.
The problem was that embedded YouTube videos weren't working on a particular (responsive) site on iPad (tested in iOS7) in landscape view. I managed to narrow it down to a particular CSS rule that was showing a search input in the header when the browser was wide enough, so it would show in an iPad's landscape view but not in its portrait view.
After a little more brute force fiddling, I found that removing the type="search" from the input tag (which causes it to fall back to the default type="text") would fix the problem. None of my searches have come up with an explanation for why this works though, or even anyone else experiencing the same thing.
Some more details on the bug
The site works by showing an image at first, which would be replaced via JavaScript with the YouTube iframe when clicked. After this first click, it would autoplay on desktop browsers, and on the iPad it would load the video but wouldn't play until the user presses it again.
If the type="search" input was visible (display: block;), then tapping on the embedded video would not cause it to play; there would be no visible response to the tap. If I zoomed in and tapped on the controls at the top, like the name of the video, I could see them being underlined, and testing showed that there was no element covering the iframe and intercepting events.
Strangely, tapping on the very edge of the right hand side of the iframe would cause the video to start playing correctly. Otherwise, changing the iPad to portrait view (causing the search input to be hidden via CSS) would enable the iframe to be clicked in order to start the video playing. After that first click, all the video controls would work regardless of whether or not the search input was showing.
Just experienced this first-hand myself and wanted to add my kudos for you having written this up. Your SO question, even without an answer, pointed me in the right direction.
In my case it was nothing to do with Youtube. I had a page generated by Drupal in a large-ish site, in which the site-wide search mechanism used an auto-complete drupal module which had type="search" as the main input's type.
In IOS, users reported that Facebook, Twitter and Google Plus's respective "like" buttons all didn't work, along with a much larger angular app embedded in the page. They all used iframes and none of them seemed to respond to clicks.
Changing this seemingly innocuous, unrelated input's type from search to text solved this problem immediately.
Baffling.
I have this webpage:
http://healthpad.net/dashboard/
It have 10 <video> elements on it.
For some reason, when I load the page on an iPad, it is not showing the video posters.
Try the following:
load the page on a desktop browser
load it on an iPad or iPad simulator, and you get a big black box with a play button
please tell me why this is happening?
Here's what I've already ruled out:
Image Content-Type header.
I've validated that the image content-type header is properly set.
In the example above, the Content-Type header properly image/jpeg.
Interference with the video.js library
VideoJs is used to show that nice play button on desktop browsers and to customise the controls. This library doesn't interfere with the native player however.
Just to make sure, I've created a test video page which doesn't have the video-js class, so the library doesn't pick up and process that video. In fact, the test page doesn't even include any JS library, it's just
<html><body>
<video
controls
height="400"
width="600"
poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
></video>
</body></html>
http://healthpad.net/rj_templates/test/zzz/
Usage of any video attributes that may not be supported on Mobile Safari
The test page above just has a plain video tag. I've tried removing every other attribute except for src and poster, it didn't help.
Most of the StackOverflow questions on the topic just say "Restart your iPad"
Here's where it gets weird:
If you google around on this, the answers on StackOverflow that have been accepted often say "Restart your iPad, that did it for me".
So I've tried doing the same thing, at first I just said that it doesn't work in my case.
Then, I tried this:
(all of the following on the iPad simulator)
Go to the site, video posters don't show
Go to the test page (http://healthpad.net/rj_templates/test/zzz/), video poster doesn't show.
Click home to exit Safari (or Cmd+Shift+H mac shortcut for the simulator)
Double-Click home button to get the task switcher outside of Safari, tap and hold on the safari icon until the kill button shows.
Kill Safari
Open safari (restarted). At this point, if you load the test page (the one with just one video), the poster will show.
Now go to the multi-video page: (http://healthpad.net/dashboard/). Video posters don't show.
Go back to the single-video test page, the video poster for that one no longer works either.
Repeat steps 3 to 8 to see the process of when video posters stop working.
So apparently, at some point, Mobile Safari decides it will no longer show any video posters.
Also, apparently, my site triggers this condition.
Clarifications:
When posters no longer work, it doesn't only occur on one domain, no video posters will be loaded for any other site, regardless whether or not it's on a totally different domain (e.g. the demo video from http://www.videojs.com/).
In order to reset this behaviour, from what I've seen, you have to kill and restart Safari. Just closing and reopening it doesn't reset this state.
Does anyone have any idea why this is happening? Is there a way to work around it?
EDIT: looks like this no longer works. Not shocking given how much iOS has changed in the last 7 years.
I got this working by using a PNG instead of a JPG.
Weird thing is, the JPG worked in iOS Safari locally (via a POW server on local wifi) but when pushed to staging the poster image didn't load. Both the local and staging code were referencing the same file on S3.
Changed the file format to PNG and it loads fine.
I see the question keeps getting upvoted once in a while, though there's no answer.
So here's what I ended up doing:
On iOS, instead of showing the video player (even with autoload=false), I will just show the poster and a play button, two standalone <img> tags.
When they get clicked, I create the video player from javascript and tell it to play. Works fine, users don't see much difference.
I fixed it by adding preload="none" to my code.
<video width="344" preload="none" height="217" poster="/themes/custom/xxxxxx">
In Safari settings [iOS7] Block Pop-Ups turned "OFF" seemed to cure this for me, hope this helps.
Well if someone is still stuck on this is how I managed to get it done in React.js but the algorithm itself should be useful in any framework:
First I detect whether the browser is safari or not using the following in a useEffect:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
then I set it inside a state object.
If safari is true then instead of displaying the video i simply display an image with that poster as its source. Then I have an onClick handler on the image tag itself clicking on it will change the above state back to false and hence image component will stop showing and video will be shown instead. Now one more problem you would have to tackle here is that on image click the image will disappear and video will appear and you'll then have to click the video again for it to play. That's bad UX. so for that you can simply attach a ref to the video and inside the click handler for Image after you set the state simple do :
videoRef.current.play()
This will start playing the video as well.
I know this is a hacky solution so don't come at me but it was the only thing i could do to get it work.
So here's the challenge. Make a clickable popcorn link OVERLAYING the video. Simple enough on desktop, but iOS is proving to be a challenge. If the video element has the controls attribute iOS hijacks all clicks within the video window, making the link overlay un-clickable. However if the controls attribute is not present on the video element, the popcorn links are clickable and work well.
Problems is, now there are no video controls. And I need those. So I figured some hand written javascript based video controls should work out fine. No controls attribute on the video tag so popcorn overlays are clickable, plus working controls! My attempt with this is to use video.js.
So now I have video.js video controls and popcorn living in harmony on desktop. But on iPad the video.js part works, but the popcorn part doesn't anymore. I get the video.js controls, but no popcorn events fire. However there are NO ERRORS, and the script executes completely.
Does anyone know what is happening here? Why would video.js stop popcorn only on iOS? Is there a solution?
PROBLEM DEMO
VideoJS has to make changes to your web page to insert all its controls and get them positioned correctly, and that includes moving the video element around. Mobile Safari is notoriously sensitive and a little bit weird about this stuff. It looks like VideoJS is removing your original video element and replacing it with a new one, and this is happening after Popcorn has attached it self to the original.
Debugging minified Javascript on Mobile Safari is no picnic, so I can't tell exactly why VideoJS is doing this on the iPad and not other browsers. But using the console, it's possible to get a rough idea what's going on:
document.getElementsByTagName('video')[0] ===
window.Popcorn.instances[0].media
//false!
That means the video element that Popcorn is listening to is not the same one that you're seeing and playing in your web page. From this command...
window.Popcorn.instances[0].media.parentNode //null!
...you can see that the original tag exists in memory but is not attached to the DOM. So while the new video plays along, the original one is stuck paused at 0:00.
The solution is to set up your Popcorn instance after VideoJS is done doing its business. And then make sure you reference the video element properly, because now '#popacorn' references a <div>, and the new video element is called "popacorn_html5_api". That should cover you for iOS as well as desktop browsers.
I had the same problem in Firefox. Popcorn not working with videoJS.
I solved my problem like this:
jQuery(function(){
_V_('videoid').ready(function() { // videoJS ready ?
console.info('videoJS ready : player ID = '+$(this).attr('id'));
console.info('videoJS ready : videoObj ID = '+$('#videoid video').attr('id'));
var pop = Popcorn( "#"+$('#videoid video').attr('id') );
// etc...
});
});
Like said brianchirls, videoJS makes a div id = "videoid" containing a video id = "videoid_html5_api", so the object id="videoid" is no longer a video object.
I have a webpage with four VIDEO elements. I know that they elements won't even start loading any metadata until I explicitly trigger a touch event on them. Can I hook up an event handling function on the touch event on, say, a BUTTON element such that the "play" methods on all four VIDEO elements are invoked?
I mean something along these lines:
$b1.bind("touchstart", function (e) {
$v1.get(0).play();
$v1.get(0).pause();
$v2.get(0).play();
$v2.get(0).pause();
$v3.get(0).play();
$v3.get(0).pause();
$v4.get(0).play();
$v4.get(0).pause();
});
When I try this four separate QuickTime windows are opened with fullscreen videos. That's not the effect I want, but at least I can hook all four to the handler. The problem, though, is that only $v4 actually starts loading anything, and the other three apparently never start loading.
you cannot start multiple videos at once. Every time you start a video on iOS, the currently running video will be stopped. This is a performance restriction on all mobile apple devices. For the same reason the preload attribute has no relevance on current iOS devices.
I'm guessing you want the videos to be inline? then add webkit-playsinline as an attribute to each <video> element:
<video src="myvideo.mp4" webkit-playsinline controls>
that way you can arrange the 4 video-elements next to each other AND use native video-controls (e.g. to allow switching to native fullscreen later). If you want to implement your own controls leave out the controls attribute.
PS: following up on 0x60's link, you can find a section called iOS-Specific Considerations
Have you checked this out? Set your code to: <video preload="automatic" /> and it should preload.
I got a video element on a page that's working fine both in safari mobile and desktop.
I have a seme-transparent pull-down menu that's working fine. The problem is, when the menu is over the video element, on the desktop safari i can see the video under the menu (as desired), while on the mobile version the video element stay on the foreground (ugly) no matter what i tell the css. Is there any workaround?
The issue only occurs if the video element was dynamically created. If the element was just in the page as it loaded, z-index works fine.
You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d.
Yep, it's as bad as haslayout on IE!
Unfortunately not.
Based on my experience and understanding of how iOS currently works, this isn't possible.
Mobile Safari on the iPad cuts a hole for a Quicktime window , which plays back the video using the built in hardware acceleration to improve battery life. (The iPhone and iPod Touch just open it up in a separate window to achieve the same effect.)
This window doesn't play nicely with the other HTML on the page. In fact, I haven't found a way to get mobile Safari to display anything on top of a tag. My guess is that this is because the hardware acceleration only allows for video scaling and positioning, and that it's only able to handle one video at a time.
I'm using flowplayer and a simple CSS dropdown menu and had the same problem.
I have drop down menu that, when tapped, covers part of the video area. The submenu shows up over the video as expected, but no touch events were being sent.
I fixed it by combining a couple of suggestions from others answering this question: I set visibility:hidden when opening the menu and visibility:visible when closing the submenu, AND set the -webkit-transform-style:preserve-3d CSS property on the video.
Here's the pertinent code. I left out the CSS for the menubar, but it does what you might expect - resulting in a menu that covers portions of the video.
menu and video HTML
<div id='nav'>
<ul>
... <!-- bunch of ul/li stuff here for the menu and submenus -->
</ul>
</div>
<div id='videoplayer'><!-- for flowplayer --></div>
CSS
video {
-webkit-transform-style: preserve-3d;
}
Javascript
$(document).ready(function(){
$("#nav li").hover(
function() {
$(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300);
$("video").css({visibility:"hidden"});
},
function(){
$(this).find('ul:first').css({visibility: "hidden"});
$("video").css({visibility:"visible"});
}
);
);
I have managed to place a menu div over a html5 video tag in mobile-safari on the ipad. To be honest I didn't have any problems and it just worked. It could be though because I was using CSS3 animations and therefore the GPU? You could try using a hack to add an element to the GPU. If you put -webkit-transform: translateZ(0); on the element it should force it to use the GPU...
When you have an element you want to be in front of your <video> in Safari, you need to set into that element the transform: translateZ(1px) or more pixels, as Safari is setting to your <video> element a 0 value for Z axis (transform: translateZ(0)).
This is the only thing it worked to me. No z-index, no transform-style:preserve-3d.
I ran into this also. The only thing that I could get to work for me was to add
display:none
to the video tag when showing a div over it that needed to be clicked on.
-webkit-transform-style:preserve-3d and -webkit-transform:translateZ(0) didn't work for me.
Using Flowplayer with the ipad plugin and the controlbar plugin allowed me to remove the ipad created control bar and replace it with something that can be z-indexed below my modal windows.
You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d.
This worked for me with a dynamically created video element. I also set the z-index of the over-laying div to z-index: 888; which may also have helped.
I had this problem which was occurring on mobile devices with an off canvas menu. When the menu was over the video you could not tap any of the menu items.
I fixed it my moving the video somewhere else when the menu was on by positioning it absolutely at -100000px when the menu was not displayed it set it back being positioned relatively.
I found using display none did not work as when you set it to block again the video would not work.
I also tried setting the height to 0 - this did not work as the video still seemed to take up the space even though you couldn't see it.
The final method seems a bit extreme but it is not really noticeable when it is being used.
This is the code that will work on both the iPad and iPhone. I tried removing the controls and then add them again, but this worked only on iPad not on iPhone. After remove the opacity and then add it again it worked on iPhone also.
$("#overlay_open").click(function(){
$("video").prop("controls", false);
$("video").css("opacity", 0);
});
$("#overlay_close").click(function(){
$("video").prop("controls", true);
$("video").css("opacity", 1);
});
Just ran into this issue today & had to cobble together a solution from multiple answers since none fully handled the problem ...
I have video elements in a collapsed "table view" style list that were capturing touch events on iPhone when trying to tap on other list items. On iPhone the videos would play when tapping other collapsed elements that happened to be occupying the same spot on screen.
Fixing this required all of the following:
1) Using this:
video{
-webkit-transform-style: preserve-3d;
}
... didn't seem to have any effect, but I left it in anyway. Everything's working now so I don't want to screw with it further :)
2) Toggling visibility: hidden alone didn't work, and display:none didn't work as expected.
3) In addition to "visibility" the HTML5 video tag controls attribute also has to be added/removed dynamically. Either:
$("video").css({visibility:"hidden"}).removeAttr("controls"); or $("video").css({visibility:"visible"}).attr("controls", "controls");
4) Must set visibility/controls on document load based on initial browser/screen size
5) Although the main concern was the screwy iPhone behavior, I also had to account for responsive window size changes above my smallest media query breakpoint of 600px - otherwise the videos would appear/disappear at the wrong screen sizes.
$(window).resize(function(){
if ($(window).width() > 600){
$("video").css({visibility:"visible"}).attr("controls", "controls");
}
});
Quite a pain to work around what's essentially a stupid mobile Safari bug... I sure hope it works on iPad when I test it later...
For anyone running into issues with this still, another fix that ended up working for me was to change the options in the embed code to not allow controls, suggested videos, and video title and player options. I added a simple Modernizr.MQ query to change the src for tablet and mobile, and included the following to the iframe src for mobile:
?rel=0&controls=0&showinfo=0
I never completely tracked down why this works, but my guess is that the controls have some user-agent style that gives them a high z-index and makes the element sit on top of everything.