In order for our playlist to work well we’ll need the following block of code. Unfortunately that won’t be the case with our background playlist. We managed to pull off a fullscreen video background using only CSS. Looking at the previous post we didn’t have any JavaScript. This will serve as our playlist.īesides a selection of small changes to the content styling, the only notable change in the stylesheet is the following piece of code: There’s a new section containing links to 3 new videos.
#Javascript html5 video fullscreen code#
Since the HTML/CSS are mostly the same, I’ll just paste the final code here and point out the changes.
#Javascript html5 video fullscreen how to#
In this post I’ll simply show you how to create a video background playlist. It’ll be easier for you to follow along since this post starts essentially where the first one left off. If you haven’t yet managed to read that one, please go ahead and take a few minutes to do so now, before reading with this post. Going back to one of my previous posts I shared some information and demonstrated how to create a fullscreen HTML5 video background using only CSS. Js += "_ytrp_html5_video = document.Creating a fullscreen HTML5 video background playlist Run javascript code that detects the video end and notifies the interface HTML5VideoFullScreen (typically API level 11+) setOnCompletionListener( this) Įlse // Usually 5VideoFullScreen$VideoSurfaceView, sometimes 5VideoFullScreen$VideoTextureView VideoView videoView = ( VideoView) focusedChild addView(videoViewContainer, new LayoutParams( LayoutParams. Hide the non-video view, add the video view, and show itĪctivityNonVideoView. toggledFullscreenCallback = void onShowCustomView( View view, CustomViewCallback callback)įrameLayout frameLayout = ( FrameLayout) view Public void setOnToggledFullscreen( ToggledFullscreenCallback callback) * callback A VideoEnabledWebChromeClient.ToggledFullscreenCallback callback * Set a callback that will be fired when the video starts or finishes displaying using a custom view (typically full-screen)
* true it the video is being displayed using a custom view (typically full-screen) * Indicates if the video is being displayed using a custom view (typically full-screen) Public VideoEnabledWebChromeClient( View activityNonVideoView, ViewGroup activityVideoView, View loadingView, VideoEnabledWebView webView) This could be improved if needed (see Javascript code). * Note: The web page must only contain one video tag in order for the HTML5 video ended event to work. Passing it will enable the VideoEnabledWebChromeClient to detect the HTML5 video ended event and exit full-screen. Public VideoEnabledWebChromeClient( View activityNonVideoView, ViewGroup activityVideoView, View loadingView) Must be already inflated and without a parent view. * loadingView A View to be shown while the video is loading (typically only used in API level <11). activityNonVideoView = activityNonVideoView Public VideoEnabledWebChromeClient( View activityNonVideoView, ViewGroup activityVideoView) Typically you would like this to fill the whole layout. * activityVideoView A ViewGroup in the activity's layout that will display the video. * activityNonVideoView A View in the activity's layout that contains every other view that should be hidden when the video goes full-screen. * Builds a video enabled WebChromeClient.
* This constructor allows this class to be defined as an inline inner class in which the user can override methods Private ToggledFullscreenCallback toggledFullscreenCallback Private CustomViewCallback videoViewCallback
Private boolean isVideoFullscreen // Indicates if the video is being displayed using a custom view (typically full-screen) Public void toggledFullscreen( boolean fullscreen) Public interface ToggledFullscreenCallback Public class VideoEnabledWebChromeClient extends WebChromeClient implements OnPreparedListener, OnCompletionListener, OnErrorListener * - The invoking activity must call VideoEnabledWebChromeClient's onBackPressed() inside of its own onBackPressed(). * - For API level 11+, android:hardwareAccelerated="true" must be set in the application manifest. * With HTML5VideoFullScreen (typically API level 11+), it will show both in-page and full-screen. * With VideoView (typically API level <11), it will always show full-screen. * It works with old VideoView-s as well as the new HTML5VideoFullScreen inner classes.
* This class serves as a WebChromeClient to be set to a WebView, allowing it to play video.