While working on a custom HTML5 video framework lately, I stumbled upon an issue which a lot of designers and developers stumble upon in this area.
The problem of HTML5 video controls in full-screen mode These elements (buttons, sliders, etc.) are part of the DOM, but you can’t actually see them in the main DOM tree, you only see them rendered onto the page. Where did all these control elements come from?īrowsers add these controls as a “sub-tree” of the video tag into the rendering of the document. If you’ve ever worked with HTML5 video then you have probably wondered how you get a bunch of control buttons, sliders, and slider thumbs on your page, when you’ve only added a single tag to the DOM. Digging into the shadow DOM, Sara finds a solution…
JAVASCRIPT HTML5 VIDEO FULLSCREEN FULL
She was working on some custom HTML5 video controls and noticed that the customizations were lost when the video went into full screen mode ( example of that happening). I know Sara through all her excellent work on CodePen. Js += "_ytrp_html5_video = document.The following is a guest post by Sara Soueidan.
JAVASCRIPT HTML5 VIDEO FULLSCREEN CODE
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.
0 kommentar(er)
