<video width="910" height="544" controls>
<source src="resources/videos/movie1.mp4" type="video/mp4">
</video>
I have an HTML5 video that I need to be hidden initially so I tried a webkit transition on it to scale it up:
vidWrapper {
-webkit-transition: all .5s ease-in-out;
-webkit-transform: scale(0);
}
.vidWrapper.active {
-webkit-transform: scale(1);
Also here is my .js code that I use to scale up the video. I had to use a timeout because after displaying the video, the dom seems to need a chance to catch before I can scale it up:
setTimeout(function(){
debugger;
scope.m_vidWrapper.addCls('active');
},200,scope)
**NOTE if I remove the setTimeout, and just call scope.m_vidWrapper.addCls('active'); to start the transition, the video will just appear. and not scale up from 0 to 1 nicely
, this will work on Chrome and Safari but not ipad . I also tried toggling the display from none to block and it still won't show up. I have seen where if I leave the page I'm trying to display the video will flash visible , so it seems its there but maybe the DOM has to be refreshed somehow after I scale up?
As a workaround I ended up setting the initial scale value to 0.1 instead of 0 i.e: -webkit-transform: scale(0.1);
Related
I am currently developing an html5 app that will be displayed through an iOS webview. In order to use hardware-acceleration of the iPad, I have applied
transform: translate3d(0,0,0);
to all elements that are animated. This works fine and I can see the difference, however, whenever en element has an opacity transition (ie; fade in / fade out), it is still quite choppy, even though the element has translate3d applied. Am I doing something wrong or is there a different approach to optimize opaicty transitions for iOS?
probably using this:
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
I have an animation running on page load and with javascript I add a class containing the
-webkit-animation-play-state:paused;
Working fine on OSX safari and all other browsers (even PC) too but on mobile, only on iOS that the animation doesn't seem to paused when called.
Here's a fiddle on how the animation state is running and paused.
http://jsfiddle.net/uc9c5/2/
Try it on iOS, you'll see that it's totally ignored.
Workaround approach for iOS 8-9 Safari that use -webkit-animation: none !important; instead of -webkit-animation-play-state:paused;
This approach is for GWD, but can apply otherwise
Don't use Pause event in GWD (Google Web Designer)
Create normal event that calls a javascript function, set "-webkit-animation: none !important;" to the <div> (you can add/remove css class)
CSS Style
.no-animation {
-webkit-animation: none !important;
}
Javascript
div.className = div.className + " no-animation";
To resume, remove CSS class
Javascript
div.className = div.className.replace("no-animation", '');
Please note that when remove/pause animation, it will go back to frame 0 (00:00 s), so you may need to calculate the current opacity/position for the div
http://jsfiddle.net/duchuy/pczsufL9/
I'm trying to have a snippet of text "zoom & fade in" once the page is loaded. To do so, I'm creating a div with the text inside and setting it to transform immediately:
.whatIwantZoomed {
opacity:0;
/* Vendor Prefixes here */
transform:scale(4,4);
/* Vendor Prefixes here */
transition:transform 1s, opacity 1s;
}
Now, when called from my Javascript function, an animated class is applied which reduces the scale to (1,1):
.whatIwantZoomed.animated {
opacity:1;
/* Vendor Prefixes here */
transform:scale(1,1);
}
Now, on mobile Safari (both iOS 7 & iOS 8), the effect actually does work. The problem is the scaled text is actually larger than the width of the viewport, causing it to 'resize' and zoom the page out. As the animation occurs, the page resizes back to how it should be.
What I'm trying to do here is remove this unwanted viewport width alteration. I've tried setting the body to have a property of overflow-x:hidden; to no avail, and I can't seem to get the viewport metatag to help me either.
Can anyone shed some light on a solution here? Thanks.
EDIT: Added a fiddle demonstrating this. Notice the scrollbars in the HTML frame? That's what I'm trying to prevent.
Try this
DEMO
div {
text-align:center;
background-color:red;
transform-origin: 50% 50%;
transform:perspective(1200) scale(1);
animation:animated 1s ease-in-out;
}
#keyframes animated{
from{transform:scale(10);opacity:0}
}
For anyone coming across this, it seems to be related to this bug
The root cause is things that are off screen incorrectly trigger safari (or wkwebview) to resize the viewport.
Add this to your viewport meta tag:
shrink-to-fit=no
I've been given a design to implement which has a lightbox which has some content inside which includes links. This is all fine and working except for when it comes to iOS where it's not possible to interact with the content of a lightbox if its position happens to be on top of a video.
It's acting as though the video is on top of the lightbox content - even though it's behind. The issue occurs even with extremely simple barebones HTML.
Stripped back HTML:
<video id="home_video" controls preload="none" poster="http://www.videojs.com/img/poster.jpg" width="500">
<!-- video sources -->
</video>
<!-- positioned over the video -->
<div id="lightbox">
Not touchable on iOS
Touchable because it's not over a video
</div>
Associated stripped back styling:
#lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
}
#lightbox > a {
display: inline-block;
background: red;
padding: 20px;
}
#touchable {
margin-top: 400px; /* taller than video */
}
I've put together a jsfiddle example. It includes some JS which alerts when you've successfully clicked/touched a link. On desktop browsers it's possible to click both links, on iOS it's only possible to click the second.
It might be worth noting that the issue occurs whether the lightbox is pre-opened on page, or after being explicitly opened as in this jsfiddle
I can think of a number of ways of hacking around the problem - such as moving the video off screen, replacing it with its poster image, or by transforming the video using translateX to hide it, but I'd prefer to leave the video where it is, if possible.
Has anyone stumbled across this issue before and found a solution? Any pointers?
This is a quirk of Mobile Safari, where it intercepts all touch/click events for elements on top of a video element, regardless of z-index or DOM order, only when the controls attribute is set.
So the solution is to remove the controls attribute and implement your own custom controls wit Javascript. You can use existing open source players to provide these controls for you (e.g. jPlayer, videojs, etc.), but you need to be careful because some of them have a special case for iOS where they will just use the native player controls. I think this is because it's simpler than making those mouse-centric controls work with the quirks of iOS (like touch and lack of volume control). So you need to check the documentation to see if there's a flag to force the player to use its own controls rather than the built-in ones.
I have a page with a videojs player.
<div id='modal-bg'>
<div id="video-exit"></div>
<div class="video-box-wr">
<video id="model_vid" class="video-js vjs-default-skin" controls poster="myposter.png" data-setup='{}'>
<source src="video.mp4" type='video/mp4'>
</video>
</div>
</div>
The div with id "modal-bg" has it's display set to none in css. When the user clicks a button, the div fades in and the video starts playing.
if($('#model_vid').length>0){
_V_("model_vid").ready(function() {
var video_player = this;
$("#view-video-button").click(function(){
$("#modal-bg").fadeIn(function(){
// video_player.play();
});
video_player.play();
});
$("#video-exit").click(function(){
video_player.currentTime(0);
video_player.pause();
$("#modal-bg").fadeOut();
});
});
}
Works fine on desktop (Chrome, Firefox, Safaru and IE9) but not on the iPad (iOS 6.1.2).
Firstly, video_player.play() doesn't work inside the callback after fading in. With it outside the callback like in the above code it does start playing properly.
Second - when you exit the video it stops and fades out properly - but when you press play a second time the video fades in but won't play. The controls are visible but don't work and the screen is black. Exiting out still works and the player fades out properly.
A similar issue was reported here but with no solution.
I had a similar issue. I fixed the problem by adjusting the opacity. When you call display: none; / display: block; theres some reseting going on with some of the browsers. I think i also had this problem with firefox. Also another option would be setting the height to 0%, to give the appearance its gone. Hope that points you in the right direction.