It will start 48 pixels translated away, and then once it animates to 1, it will be 0, so it will be visible. The first thing we'll do is say const interpolatedControls is equal to, which takes an object configuration of an input range, which we'll say zero to one. Now, we'll need to set up our interpolation and our style so that this can animate out of the way. It will never hide until we stop interacting with the video. If we continue to interact with the video, this will continually just be cleared out. That means that this timeout will not be called if we interact or if this function is called again. Then we'll also have to call clearTimeout, this.hideTimeout. We will set our setTimeout duration to 1,500 seconds of not being interacted with. They'll be hidden for the duration of 300 milliseconds, which we then also have to call start on this. Then we will animate them away, so animated.timing, this.animated, to value zero. Then we'll say this.hideTimeout is equal to setTimeout, which will take a function. This means that every time the video is interacted with, we will quickly animate the controls to the value of one in 100 milliseconds. We'll first say animated.timing, this.animated to value of one for the duration of 100 milliseconds. Our handleVideoPress will just call iggerShowAndHide. One we'll call triggerShowAndHide, and the other will be our handleVideoPress. However, because there are going to be other times where we want to continue showing the controls, like when play is pressed or pause is pressed, we will separate this into two functions.
Now, we'll go create our handleVideoPress function. We'll need to know when the video is interacted with, so in our render function, we will wrap our video with a touchable without feedback, and on press, we'll say this.handleVideoPress. I'll first set up animated is equal to a new animated value, and we'll set it to zero. The event is ended once the overlay has become inactive and the video starts playing.There may be times where you want the controls to show and hide depending on whether or not the video has been interacted with. Ī 'playVideo' event is started once a user clicks the video overlay. this happens when the user hovers/taps on the video using the pointerover event. The 'preConnections' option can be used to pass domains to start pre-connect connections for loading an embedded video. The embedded video includes srcdoc="" so the video and third-party scripts are not loaded until the user interacts with it. This will reduce the initial page load but may create lag in playback for some users. The video element includes preload="metadata" so the video is not loaded until the user interacts with it. The plugin should also work normally with lazy load plugins. Native lazy loading is used on the responsive poster image to reduce initial page load. Responsive image techniques(srcset, sizes, source, etc) are used to load the most appropriate image. Hide video controls while transitioning overlay.ĭomains to pre-connect for loading an embedded video. Import ResponsiveVideoPoster from 'responsive-video-poster.js' const responsiveVideoPosterDefault = ResponsiveVideoPoster ( ) Options PropertyĬSS class to transition the video overlay between states.ĭelay playing the video by set time or wait for the overlay transition to finish.
0 kommentar(er)
