My problem is very specific and can't find much in terms of resources.
I am working on a website that tells a story through scrolling and includes tons of CSS animations triggered by viewport (most likely using IntersectionObserver API) and background video.
Have a look at :
https://www.sbs.com.au/theboat/
the main challenge is finding a way to autoplay audio in the same way I trigger animations with all the browser's autoplay restrictions.
If you look at the link above how do you think this was accomplished?
Any help/guidance is appreciated.
Related
I'm developing a web app whose main purpose is streaming dancing videos and I'm facing this problem just in chrome mobile, it works flawlessly in firefox mobile, and in every other desktop browser.
The thing is I need to be able to flip an html5 video element and it works... well, it works until I go fullscreen, then it stays for a few seconds and reverts to the original video (not flipped).
I'm using the css "transform: scaleY(-1)" property.
I've tried setting this property to the video tag, to an upper div, within the video tag and the div which requests fullscreen. And to the div requesting the full screen with no success. If I set scale(); to any positive number between 0 and 1, it seems to do the trick but it doesn't work with negative numbers.
I'm aware of the UA css :not(:root):-webkit-full-screen {transform: none !important}, but it doesn't seem to be the problem. I would rather say it's more related to the way chrome handles video in fullscreen mode.
Any help would be appreciated. If I can't make it work, I'll have to provide another stream with the mirrored version of each video.
Thanks in advance, If you need any examples don't hesitate on asking.
I've been wanting to implement a similar effect like in these apple sites where the computer animation changes with the scroll.
https://www.apple.com/macbook-pro-16/
https://www.apple.com/imac-pro/
Searching around how to implement the sort of parallax effect Apple does in these websites, I haven't expressly found something quite the same, how is this accomplished?
They propbaly used three.js scripts to achive this. But you can do it in much more easier way but with worse performace for sure. You need to make a lot of photos (you know like in the movie frame by frame) and then on the scroll event you have to replace photo with prevoius one(if you detect scroll top) or with next one (if you detect scroll down). If you detect last or first item then you stop hijacking scroll event and let browser do the job.
If you want to learn more abot three.js you can read more about this here: three.js - Learn
In the end of <body></body> element of this website you can see that they added three.js :
I was also researching what apple use on their website and found out that a tool called Lottie.
Lotttie is a design library by Airbnb you can find it here
"Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing apps to use animations as easily as they use static images."
Lottie also has a web version available here
I have been fine hitherto working with lightboxes and just simply having an image "button" to fire videos off, however some requirements have recently changed in one particular scenario.
I have a custom area on a page that has is contained within a news rotator area. I've eliminated the rotation and it is now effectively just a menu, however I need to both define a custom size for a YouTube video player (the two default sizes, sans full screen, are not appropriate). Consequently I have to figure out how to define a custom size in between and preferably HTML5, falling back to Flash.
Next, I need to have an overlay image that will fall out of the way to uncover the YouTube player once clicked and activate the play function without interaction.
What's the best process to follow here? I would prefer to use YouTube for several reasons over a custom HTML5 player (although there are nice options I've used).
A big bonus would be if I could leverage js to display another overlay image once the video has completed playing.
In the end I moved away from YouTube towards another solution. It's not free, but it is a superior solution.
However, saying that #PaulIrish had a suggestion that merits review: http://www.blogseye.com/i-make-plugins/youtube-poster-plugin/
The solution I ended up leveraging in the end is Wistia. They have a solid player + experience and the metrics are really nice. I appreciate the prompt reply from support so there's that personal human touch you completely miss from YouTube, and that alone is worth paying for to me.
looking to use HTML5 video tag and JS. the aim is to make a video swap from one video to the next very smoothly just like a cut in the movie. I have had a look at the API
http://www.w3.org/TR/html5/video.html#tracklist
if anyone has an idea that would be great. My current plan is to familiarise myself with the API and figuare out how to que up the video for a smooth change. currently sellect a src and then play() causes an ugly white space pause before the next video comes in.
many thanks for looking
Use firefox and make hardware acceleration on. if you have good hardware it should work.
and you can also try this method, imagine if you have 5 videos to play and when you are in the 2nd video you can keep them by the video currently you are playing ,keep them on left and right sides and make them pause. when you move on to the 3nd video you can just get that relevant video and make it play. this method should eliminate any unnecessary lags.
HTML5 videos use a very low amount of CPU, so there's no reason you can't have multiple tags on the page at the same time. I would suggest having them all on the page and then using CSS and JavaScript to transition between them.
You won't be able to make this work on iOS since it doesn't allow playback to initialize without user interaction. The user will have to click to start each video.
Annoying, but that's how Apple rolls.
I have a website that runs on WordPress. There is a DIV in the header that contains an embedded QuickTime video (controls are turned off and need to stay like that). I have an image that is supposed to go over the video, and when the user clicks on it, the video should be revealed and play.
I think that if I messed around with the CSS and Javascript for long enough, I could make the image go away and revel the embedded video when clicked on, but I don't know how to make the video start on that same "onclick" event. Another note here: I prefer to use jQuery to do this, since that's what I usually work with. But whatever works works.
This is driving me crazy because I can't find any good information on how to do this! Thank you so much in advance for helping me out.
If you already have a DIV that contains the video, you can create another same-sized DIV that contains your image. Finally, set the image DIV with higher z-index and float it over the video DIV.
I think this should work.
There's really no good way to do this when rendering the video using the QuickTime plugin. Plugins are optimized for performance and typically render above the rest of the "native" elements within your page.
I seem to recall there's a wmode="transparent" attribute or "opaque" that was introduced recently to the plugin similar to what's used with the Flash plugin, but the performance will typically suffer because the plugin renderer will often need to switch to rendering in software as it composites the video with the element you have on top of it, and possibly elements beneath it as well.
The easiest thing to do is to simply use a video element to play the media you want on your page. At that point it is an element like any other on the page and interacts seamlessly with the z-index ordering of positioned elements.
An example of the usage is here: http://dev.opera.com/articles/view/introduction-html5-video/
You may need to nest differently encoded videos as video elements in the page so various user agents with support for different codes can play the video. But just adding the video element and pointing it at your current QuickTime video will work as well as a simple object using the QT plugin.