精华内容
下载资源
问答
  • 求解啊!怎么回事?可以播放,但是无法全屏,点击webview中的全屏按钮没有调用onshowcustomview方法?
  • webview 不能全屏 底部 有空白部

    万次阅读 2014-02-10 18:04:53
    今天遇到一个 奇怪的问题:一个webview 上面直接 loadUrl ,竟然发现 webview下面 多出一块空白区域,如下图:百思不得其解。查了一些资料,也没找到方法。后来发现 在配置文件里面 有这么一句 android:anyDensity...

    今天遇到一个 奇怪的问题:

    一个webview 上面直接 loadUrl  ,竟然发现 webview下面 多出一块空白区域,如下图:

    百思不得其解。

    查了一些资料,也没找到方法。后来发现 在配置文件里面 有这么一句

      <supports-screens
            android:anyDensity="false"
            android:largeScreens="true"
            android:normalScreens="true"
            android:resizeable="true"
            android:smallScreens="true" />


    里面的 anyDensity=false, 意思不支持所有的 密度。。

    难道是密度不匹配导致webview 的尺寸差别??


    查看得知:


    android屏幕适配

    1、配置android应用程序适配在不同的手机上,需要在AndroidManifest.xml文件的manifest标签中添加子元素:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <manifest xmlns:android="http://schemas.android.com/apk/res/android">
        ...
        <supports-screens
            android:smallScreens="true"
            android:normalScreens="true"
            android:largeScreens="true"
            android:xlargeScreens="true"
            android:anyDensity="true" >
        </supports-screens>
    </manifest>

    以上是为我们的屏幕设置多分辨率支持

    android:anyDensity="true"当值为true时,当应用程序安装在不同分辨率的手机上时,程序会分别加载hdpi,mdpi,ldpi文件夹中的资源。相反,如果值设置为false,即使我们在hdpi,mdpi,ldpi文件夹下放有相同资源,应用也不会自动地去相应文件夹下寻找资源,这种情况都是出现在高分辨率,以及低分辨率的手机上,比如说一部240×320像素的手机,如果设置android:anyDensity="false"Android系统会将240 x 320(低分辨率)转换为 320×480(中分辨率),这样的话,应用就会在低分辨率手机上加载mdpi文件中的资源。

    2、android2.0开始之后drawable文件被三个文件夹drawable-hdpi,drawable-mdpi,drawable-ldpi三个文件夹所取代,我们只要设置android:anyDensity="false"应用则会将高、低分辨率转变成中分辨率,从而去加载mdpi中的资源。

    1)android:anyDensity="true"系统会依据屏幕密度,自动去找对应的文件夹;

    2)android:anyDensity="false",如果drawable-hdpi,drawable-mdpi,drawable-ldpi三个文件夹中放有同一张图片的不同分辨率时,那么系统会去加载drawable_mdpi文件夹中的资源如果drawable-hpdi中有高密度图片,其它两个文件夹中没有对应图片资源,那么系统会去加载drawable-hdpi中的资源如果drawable-hdpi,drawable-mdpi中有图片资源,drawable-ldpi中没有对应的图片资源,那么系统会加载drawable-mdpi文件夹中的资源


    3、有时会根据需要在代码中动态地设置某个值,比如地图,地图的pin和地图的地址提示框的相对偏移量在不同分辨率的手机上是不同的。这时候可以通过以下方法求出屏幕分辨率:

    DisplayMetrics metric = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metric);

    int densityDpi = metric.densityDpi;  // 屏幕分辨率DPI120 / 160 / 240

    然后可以在代码中为这几种密度分别设置偏移量。不过,最好是在xml文件中对不同分辨率的手机进行分别设置。

    地图的偏移量可以在values-hpdi,values-mdpi,values-ldpi三种文件夹中的dimens.xml文件进行设置

    <dimen name="bitmap_common_topoffset">40dp</dimen>

    <dimen name="bitmap_common_bottomoffset">-14dp</dimen>

    这里的负数是完全起作用的,系统会认为它是一个负值。

    原来是密度设置值导致的 

      <supports-screens
            android:anyDensity="true"
            android:largeScreens="true"
            android:normalScreens="true"
            android:resizeable="true"
            android:smallScreens="true" />



    这样一来就ok 了

    如下图:








    展开全文
  • 另一个问题就是我们的Android设备版本是4.0.3,不能像Android2.3那样支持全屏播放视频,这个问题比较纠结,但是经过不断的摸索,终于解决了这个问题。在这里和大家分享一下解决方法: 1、首先定义一个Vi

    上次鄙人做了一个简单的利用webView实现的一个浏览器!其中遇到了两个问题,一个是将浏览器中需要下载的内容托管到系统默认的下载程序进行下载,这个比较简单就不在这里讨论了;另一个问题就是我们的Android设备版本是4.0.3,不能像Android2.3那样支持全屏播放视频,这个问题比较纠结,但是经过不断的摸索,终于解决了这个问题。在这里和大家分享一下解决方法:

    1、首先定义一个VideoEnabledWebView继承自WebView,复写其中的loadData,loadDataWithBaseURL,loadUrl方法,道理很简单就是在加载url或者js的时候初始化一些内容。见代码:

    1. package com.danielme.android.webviewdemo; 
    2.  
    3. import java.util.Map; 
    4. import android.annotation.SuppressLint; 
    5. import android.content.Context; 
    6. import android.os.Handler; 
    7. import android.os.Looper; 
    8. import android.util.AttributeSet; 
    9. import android.webkit.WebChromeClient; 
    10. import android.webkit.WebView; 
    11.  
    12. public class VideoEnabledWebView extends WebView 
    13.     public interface ToggledFullscreenCallback 
    14.     { 
    15.         public void toggledFullscreen(boolean fullscreen); 
    16.     }     
    17.     private VideoEnabledWebChromeClient videoEnabledWebChromeClient; 
    18.     private boolean addedJavascriptInterface;    
    19.     public VideoEnabledWebView(Context context) 
    20.     { 
    21.         super(context); 
    22.         addedJavascriptInterface = false
    23.     }    
    24.     public VideoEnabledWebView(Context context, AttributeSet attrs) 
    25.     { 
    26.         super(context, attrs); 
    27.         addedJavascriptInterface = false
    28.     }    
    29.     public VideoEnabledWebView(Context context, AttributeSet attrs, int defStyle) 
    30.     { 
    31.         super(context, attrs, defStyle); 
    32.         addedJavascriptInterface = false
    33.     }     
    34.     /** 
    35.      * Pass only a VideoEnabledWebChromeClient instance. 
    36.      */ 
    37.     @Override 
    38.     @SuppressLint ("SetJavaScriptEnabled"
    39.     public void setWebChromeClient(WebChromeClient client) 
    40.     { 
    41.         getSettings().setJavaScriptEnabled(true); 
    42.  
    43.         if (client instanceof VideoEnabledWebChromeClient) 
    44.         { 
    45.             this.videoEnabledWebChromeClient = (VideoEnabledWebChromeClient) client; 
    46.         } 
    47.  
    48.         super.setWebChromeClient(client); 
    49.     }     
    50.     @Override 
    51.     public void loadData(String data, String mimeType, String encoding) 
    52.     { 
    53.         addJavascriptInterface(); 
    54.         super.loadData(data, mimeType, encoding); 
    55.     }     
    56.     @Override 
    57.     public void loadDataWithBaseURL(String baseUrl, String data, 
    58.                                     String mimeType, String encoding, 
    59.                                     String historyUrl) 
    60.     { 
    61.         addJavascriptInterface(); 
    62.         super.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl); 
    63.     }     
    64.     @Override 
    65.     public void loadUrl(String url) 
    66.     { 
    67.         addJavascriptInterface(); 
    68.         super.loadUrl(url); 
    69.     }     
    70.     @Override 
    71.     public void loadUrl(String url, Map<String, String> additionalHttpHeaders) 
    72.     { 
    73.         addJavascriptInterface(); 
    74.         super.loadUrl(url, additionalHttpHeaders); 
    75.     }     
    76.     private void addJavascriptInterface() 
    77.     { 
    78.         System.out.println(addedJavascriptInterface); 
    79.         if (!addedJavascriptInterface) 
    80.         { 
    81.             // Add javascript interface to be called when the video ends (must be done before page load) 
    82.             addJavascriptInterface(new Object() 
    83.             { 
    84.             }, "_VideoEnabledWebView"); // Must match Javascript interface name of VideoEnabledWebChromeClient             
    85.             addedJavascriptInterface = true
    86.         } 
    87.     }    
    88.   

    其中addJavascriptInterface方法是将一个当前的java对象绑定到一个javascript上面,使用如下方法

    webv.addJavascriptInterface(this, "_VideoEnabledWebView");//this为当前对象,绑定到js的_VideoEnabledWebView上面,主要_VideoEnabledWebView的作用域是全局的。这个部分的内容我不是很懂,提供链接给大家学习下,希望看懂的朋友能教教这个步骤是干嘛的!(http://www.oschina.net/code/snippet_232612_8531

    2、定义一个类VideoEnabledWebChromeClient继承自WebChromeClient,这个WebChromeClient中的onShowCustomView方法就是播放网络视频时会被调用的方法,onHideCustomView方法就是视频播放完成会被调用的。其中有个构造函数需要提出来:

    1. public VideoEnabledWebChromeClient(View activityNonVideoView, ViewGroup activityVideoView, View loadingView, VideoEnabledWebView webView) 
    2.     { 
    3.         this.activityNonVideoView = activityNonVideoView; 
    4.         this.activityVideoView = activityVideoView; 
    5.         this.loadingView = loadingView; 
    6.         this.webView = webView; 
    7.         this.isVideoFullscreen = false
    8.     } 
    9.   

    这个构造函数中的参数,第一个是webView的父布局,activityVideoView是另外的一个占满整个屏幕的布局,loadingView是播放器的那个显示缓冲状态的view,webView就是webView啦!

    见activity_main.xml

    1. <?xml version="1.0" encoding="utf-8"?> 
    2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    3.     xmlns:tools="http://schemas.android.com/tools" 
    4.     android:layout_width="match_parent" 
    5.     android:layout_height="match_parent" 
    6.     tools:context=".MainActivity" > 
    7.     <RelativeLayout 
    8.         android:id="@+id/nonVideoLayout" 
    9.         android:layout_width="match_parent" 
    10.         android:layout_height="match_parent" > 
    11.         <com.danielme.android.webviewdemo.VideoEnabledWebView 
    12.             android:id="@+id/webView" 
    13.             android:layout_width="match_parent" 
    14.             android:layout_height="match_parent" /> 
    15.     </RelativeLayout> 
    16.     <FrameLayout 
    17.         android:id="@+id/videoLayout" 
    18.         android:layout_width="match_parent" 
    19.         android:layout_height="match_parent" > 
    20.     </FrameLayout> 
    21. </RelativeLayout> 
    22.   

    不多说了,直接贴代码VideoEnabledWebChromeClient.java代码。

    1. package com.danielme.android.webviewdemo; 
    2.  
    3. import android.app.ActionBar.LayoutParams; 
    4. import android.media.MediaPlayer; 
    5. import android.media.MediaPlayer.OnCompletionListener; 
    6. import android.media.MediaPlayer.OnErrorListener; 
    7. import android.media.MediaPlayer.OnPreparedListener; 
    8. import android.view.View; 
    9. import android.view.ViewGroup; 
    10. import android.webkit.WebChromeClient; 
    11. import android.widget.FrameLayout; 
    12. import android.widget.VideoView; 
    13.  
    14. public class VideoEnabledWebChromeClient extends WebChromeClient implements OnPreparedListener, OnCompletionListener, OnErrorListener 
    15.     public interface ToggledFullscreenCallback 
    16.     { 
    17.         public void toggledFullscreen(boolean fullscreen); 
    18.     } 
    19.     private View activityNonVideoView; 
    20.     private ViewGroup activityVideoView; 
    21.     private View loadingView; 
    22.     private VideoEnabledWebView webView; 
    23.     private boolean isVideoFullscreen; // Indicates if the video is being displayed using a custom view (typically full-screen) 
    24.     private FrameLayout videoViewContainer; 
    25.     private CustomViewCallback videoViewCallback; 
    26.     private ToggledFullscreenCallback toggledFullscreenCallback; 
    27.     /** 
    28.      * Never use this constructor alone. 
    29.      * This constructor allows this class to be defined as an inline inner class in which the user can override methods 
    30.      */ 
    31.     public VideoEnabledWebChromeClient() 
    32.     { 
    33.     } 
    34.     /** 
    35.      * Builds a video enabled WebChromeClient. 
    36.      * @param activityNonVideoView A View in the activity's layout that contains every other view that should be hidden when the video goes full-screen. 
    37.      * @param activityVideoView A ViewGroup in the activity's layout that will display the video. Typically you would like this to fill the whole layout. 
    38.      */ 
    39.     public VideoEnabledWebChromeClient(View activityNonVideoView, ViewGroup activityVideoView) 
    40.     { 
    41.         this.activityNonVideoView = activityNonVideoView; 
    42.         this.activityVideoView = activityVideoView; 
    43.         this.loadingView = null
    44.         this.webView = null
    45.         this.isVideoFullscreen = false
    46.     } 
    47.     /** 
    48.      * Builds a video enabled WebChromeClient. 
    49.      * @param activityNonVideoView A View in the activity's layout that contains every other view that should be hidden when the video goes full-screen. 
    50.      * @param activityVideoView A ViewGroup in the activity's layout that will display the video. Typically you would like this to fill the whole layout. 
    51.      * @param loadingView A View to be shown while the video is loading (typically only used in API level <11). Must be already inflated and without a parent view. 
    52.      */ 
    53.     public VideoEnabledWebChromeClient(View activityNonVideoView, ViewGroup activityVideoView, View loadingView) 
    54.     { 
    55.         this.activityNonVideoView = activityNonVideoView; 
    56.         this.activityVideoView = activityVideoView; 
    57.         this.loadingView = loadingView; 
    58.         this.webView = null
    59.         this.isVideoFullscreen = false
    60.     } 
    61.     /** 
    62.      * Builds a video enabled WebChromeClient. 
    63.      * @param activityNonVideoView A View in the activity's layout that contains every other view that should be hidden when the video goes full-screen. 
    64.      * @param activityVideoView A ViewGroup in the activity's layout that will display the video. Typically you would like this to fill the whole layout. 
    65.      * @param loadingView A View to be shown while the video is loading (typically only used in API level <11). Must be already inflated and without a parent view. 
    66.      * @param webView The owner VideoEnabledWebView. Passing it will enable the VideoEnabledWebChromeClient to detect the HTML5 video ended event and exit full-screen. 
    67.      * Note: The web page must only contain one video tag in order for the HTML5 video ended event to work. This could be improved if needed (see Javascript code). 
    68.      */ 
    69.     public VideoEnabledWebChromeClient(View activityNonVideoView, ViewGroup activityVideoView, View loadingView, VideoEnabledWebView webView) 
    70.     { 
    71.         this.activityNonVideoView = activityNonVideoView; 
    72.         this.activityVideoView = activityVideoView; 
    73.         this.loadingView = loadingView; 
    74.         this.webView = webView; 
    75.         this.isVideoFullscreen = false
    76.     } 
    77.     /** 
    78.      * Indicates if the video is being displayed using a custom view (typically full-screen) 
    79.      * @return true it the video is being displayed using a custom view (typically full-screen) 
    80.      */ 
    81.     public boolean isVideoFullscreen() 
    82.     { 
    83.         return isVideoFullscreen; 
    84.     } 
    85.     /** 
    86.      * Set a callback that will be fired when the video starts or finishes displaying using a custom view (typically full-screen) 
    87.      * @param callback A VideoEnabledWebChromeClient.ToggledFullscreenCallback callback 
    88.      */ 
    89.     public void setOnToggledFullscreen(ToggledFullscreenCallback callback) 
    90.     { 
    91.         this.toggledFullscreenCallback = callback; 
    92.     } 
    93.     @Override 
    94.     public void onShowCustomView(View view, CustomViewCallback callback) 
    95.     { 
    96.         if (view instanceof FrameLayout) 
    97.         { 
    98.             // A video wants to be shown 
    99.             FrameLayout frameLayout = (FrameLayout) view; 
    100.             View focusedChild = frameLayout.getFocusedChild(); 
    101.             // Save video related variables 
    102.             this.isVideoFullscreen = true
    103.             this.videoViewContainer = frameLayout; 
    104.             this.videoViewCallback = callback; 
    105.             // Hide the non-video view, add the video view, and show it 
    106.             activityNonVideoView.setVisibility(View.GONE);             
    107.             activityVideoView.addView(videoViewContainer, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); 
    108.             activityVideoView.setVisibility(View.VISIBLE); 
    109.             if (focusedChild instanceof VideoView) 
    110.             { 
    111.                 // VideoView (typically API level <11) 
    112.                 VideoView videoView = (VideoView) focusedChild; 
    113.                 // Handle all the required events 
    114.                 videoView.setOnPreparedListener(this); 
    115.                 videoView.setOnCompletionListener(this); 
    116.                 videoView.setOnErrorListener(this); 
    117.             } 
    118.             else // Usually android.webkit.HTML5VideoFullScreen$VideoSurfaceView, sometimes android.webkit.HTML5VideoFullScreen$VideoTextureView 
    119.             { 
    120.                 // HTML5VideoFullScreen (typically API level 11+) 
    121.                 // Handle HTML5 video ended event 
    122.                 if (webView != null && webView.getSettings().getJavaScriptEnabled()) 
    123.                 { 
    124.                     // Run javascript code that detects the video end and notifies the interface 
    125.                     String js = "javascript:"
    126.                     js += "_ytrp_html5_video = document.getElementsByTagName('video')[0];"
    127.                     js += "if (_ytrp_html5_video !== undefined) {"
    128.                     { 
    129.                         js += "function _ytrp_html5_video_ended() {"
    130.                         { 
    131.                             js += "_ytrp_html5_video.removeEventListener('ended', _ytrp_html5_video_ended);"
    132.                             js += "_VideoEnabledWebView.notifyVideoEnd();"// Must match Javascript interface name and method of VideoEnableWebView 
    133.                         } 
    134.                         js += "}"
    135.                         js += "_ytrp_html5_video.addEventListener('ended', _ytrp_html5_video_ended);"
    136.                     } 
    137.                     js += "}"
    138.                     webView.loadUrl(js); 
    139.                 } 
    140.             } 
    141.  
    142.             // Notify full-screen change 
    143.             if (toggledFullscreenCallback != null
    144.             { 
    145.                 toggledFullscreenCallback.toggledFullscreen(true); 
    146.             } 
    147.         } 
    148.     } 
    149.     @Override 
    150.     public void onShowCustomView(View view, int requestedOrientation, CustomViewCallback callback) // Only available in API level 14+ 
    151.     { 
    152.         onShowCustomView(view, callback); 
    153.     } 
    154.     @Override 
    155.     public void onHideCustomView() 
    156.     { 
    157.         // This method must be manually (internally) called on video end in the case of VideoView (typically API level <11) 
    158.         // This method must be manually (internally) called on video end in the case of HTML5VideoFullScreen (typically API level 11+) because it's not always called automatically 
    159.         // This method must be manually (internally) called on back key press (from this class' onBackPressed() method) 
    160.         if (isVideoFullscreen) 
    161.         { 
    162.             // Hide the video view, remove it, and show the non-video view 
    163.             activityVideoView.setVisibility(View.GONE);//播放视频的 
    164.             activityVideoView.removeView(videoViewContainer); 
    165.             activityNonVideoView.setVisibility(View.VISIBLE); 
    166.  
    167.             // Call back 
    168.             if (videoViewCallback != null) videoViewCallback.onCustomViewHidden(); 
    169.  
    170.             // Reset video related variables 
    171.             isVideoFullscreen = false
    172.             videoViewContainer = null
    173.             videoViewCallback = null
    174.  
    175.             // Notify full-screen change 
    176.             if (toggledFullscreenCallback != null
    177.             { 
    178.                 toggledFullscreenCallback.toggledFullscreen(false); 
    179.             } 
    180.         } 
    181.     } 
    182.     @Override 
    183.     public View getVideoLoadingProgressView() // Video will start loading, only called in the case of VideoView (typically API level <11) 
    184.     { 
    185.         if (loadingView != null
    186.         { 
    187.             loadingView.setVisibility(View.VISIBLE); 
    188.             return loadingView; 
    189.         } 
    190.         else 
    191.         { 
    192.             return super.getVideoLoadingProgressView(); 
    193.         } 
    194.     } 
    195.     @Override 
    196.     public void onPrepared(MediaPlayer mp) // Video will start playing, only called in the case of VideoView (typically API level <11) 
    197.     { 
    198.         if (loadingView != null
    199.         { 
    200.             loadingView.setVisibility(View.GONE); 
    201.         } 
    202.     } 
    203.  
    204.     @Override 
    205.     public void onCompletion(MediaPlayer mp) // Video finished playing, only called in the case of VideoView (typically API level <11) 
    206.     { 
    207.         onHideCustomView(); 
    208.     } 
    209.     @Override 
    210.     public boolean onError(MediaPlayer mp, int what, int extra) // Error while playing video, only called in the case of VideoView (typically API level <11) 
    211.     { 
    212.         return false// By returning false, onCompletion() will be called 
    213.     } 
    214.     /** 
    215.      * Notifies the class that the back key has been pressed by the user. 
    216.      * This must be called from the Activity's onBackPressed(), and if it returns false, the activity itself should handle it. Otherwise don't do anything. 
    217.      * @return Returns true if the event was handled, and false if it is not (video view is not visible) 
    218.      */ 
    219.     public boolean onBackPressed() 
    220.     { 
    221.         if (isVideoFullscreen) 
    222.         { 
    223.             onHideCustomView(); 
    224.             return true
    225.         } 
    226.         else 
    227.         { 
    228.             return false
    229.         } 
    230.     }     
    231.   

    主要是onShowCustomView方法中,当这个方法被调用,将含有webView的那个父布局隐藏掉(GONE),然后将第一个参数view加到布局中。获取第一个参数view的子控件childView,进行判断childView是否属于VideoView(Android 4.0之前是VideoView),如果是Android 4.0之后,则会执行else中的代码,新建String类型js代码,然后调用loadUrl(js)就可以进行视频播放了。其中我个人不知道它是如何通过js来播放视频的,我觉得和之前的addJavascriptInterface这个方法有一定关系,希望知道如何实现的能够指导一下本人。其它的函数就很好理解了。

    其中多说一句,Android 4.0之前的那个第一个参数view是videoView,Android 4.0之后是那个HTML5VideoFullScreen$VideoSurfaceView

    展开全文
  • 最近使用webview播放优酷视频 发现点击全屏后 WebChromeClient接收不到onShowCustomView()的回调,网上看了好多帖子说能解决4.0以后webview不能全屏的问题,但是他们的解决方案是在能收到onShowCustomView()方法...
  • iOS的WebView展示H5不能全屏展示办法一方法二 办法一 直接在原生端配置UIWebView配置属性 if (@available(iOS 11.0, *)) { g_web.scrollView.contentInsetAdjustmentBehavior = ...

    iOS的WebView展示H5不能全屏展示

    办法一

    直接在原生端配置UIWebView配置属性

    	if (@available(iOS 11.0, *)) {
       		g_web.scrollView.contentInsetAdjustmentBehavior = 					     UIScrollViewContentInsetAdjustmentNever;
     	} else {
     		self.edgesForExtendedLayout = UIRectEdgeNone;
     	}
    

    方法二

    H5里加meta

    <meta name="viewport" content="viewport-fit=cover">
    
    展开全文
  • 修改后,点击全屏,视频不能播放。 接下来一 一解决: 问题1 :没有全屏按钮: 如图:可以看到只有一个音量按钮,没有全屏按钮。 查了一下资料,文档上写着支持视频播放的条件: In order to support inline...

    最近项目的一个需求,需要在Webview 里面播放视频遇到了一些问题:

    视频可以正常播放但是,视频底部的全屏按钮没了,只有一个音量按钮。修改后,点击全屏,视频不能播放。

    接下来一 一解决:

    问题1 :没有全屏按钮:

    如图:可以看到只有一个音量按钮,没有全屏按钮。

    查了一下资料,文档上写着支持视频播放的条件:

    In order to support inline HTML5 video in your application, 
    you need to have hardware acceleration turned on, and set a WebChromeClient. 
    For full screen support, 
    implementations of onShowCustomView(View, WebChromeClient.CustomViewCallback)
    and onHideCustomView() are required, getVideoLoadingProgressView() is optional.

     意思就是:

        1、要打开硬件加速

        2、设置 WebChromeClient ,并实现 onShowCustomView()  方法和onHideCustomView()方法。

        3、要支持全屏

    接下来就是解决问题:

    1、首先开启硬件加速

    在AndroidMainfest.xml中,当前webView所在类的标签中添加  : android:hardwareAccelerated="true"

      <activity
        android:name="..."
        android:hardwareAccelerated="true"/>

    2、设置 WebChromeClient

    我们添加一个内部类,实现 WebChromeClient, 并复写其中的方法

     private class MyWebChromeClient extends WebChromeClient {
    
            // 全屏的时候调用
            @Override
            public void onShowCustomView(View view, CustomViewCallback callback) {
    
                super.onShowCustomView(view, callback);
             
            }
    
           // 切换为竖屏的时候调用
            @Override
            public void onHideCustomView() {
    
                super.onHideCustomView();
                
            }
        }

    写到这里全屏按钮就已经显示出来了。当然,我们我们还要设置一下WebView 的相关属性

        /**
         * 设置webView 相关属性
         * */
        private void initWebView() {
            webview = (WebView) findViewById(R.id.webview);
            webview.getSettings().setJavaScriptEnabled(true);// 设置支持javascript脚本
            webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);//设置webview缓存模式
            webview.setVerticalScrollBarEnabled(false); // 取消Vertical ScrollBar显示
            webview.setHorizontalScrollBarEnabled(false); // 取消Horizontal ScrollBar显示
            //设置自适应屏幕,两者合用
            webview.getSettings().setUseWideViewPort(true);
            webview.getSettings().setLoadWithOverviewMode(true);
    
            webview.getSettings().setAllowFileAccess(true);// 允许访问文件
            webview.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                webview.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
            }
            webview.setFocusable(false); // 去掉超链接的外边框
            webview.getSettings().setDefaultTextEncodingName("GBK");//设置文本编码(根据页面要求设置: utf-8)
            webview.setWebChromeClient(new MyWebChromeClient());
        }

    然后看一下效果:

     

    问题2:设置全屏后,视频不能播放

    全屏按钮出来后,点击全屏,会调用 onShowCustomView() 方法。我们在这个方法中设置横屏的方法,即可实现全屏

        //设置横屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

    但是我设置后,发现无法播放视频,只显示一个黑页面

    查了下相关资料后,发现

    public void onShowCustomView(View view, CustomViewCallback callback)

    这个方法,在设置全屏后  会在参数 view  上显示播放的视频。所以,当设置全屏后,需要让这个view显示到最前方。

    解决:我们可以在布局文件中,添加一个和webview 同级的 Framlaoyout ,用来存放这个视图

    xml 文件:

    <?xml version="1.0" encoding="UTF-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
            <FrameLayout
                android:id="@+id/fl_video"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="gone" />
    
            <WebView
                android:id="@+id/webview"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
    
    </RelativeLayout >
    

    WebChromeClient 具体实现

    public class HelpActivity extends TitleBarActivity {
    
        private WebView webview = null;
        // h5 地址
        private String reurl = "";
    
        // 用来显示视频的布局
        private FrameLayout mLayout; 
    
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.webview);
            mLayout = (FrameLayout) findViewById(R.id.fl_video);
            webview = (WebView) findViewById(R.id.webview);
            inieWebView();
         }
    
        /**
         * 设置webView 相关属性
         */
    
        private void initWebView() {
            WebSettings setting= webview.getSettings();
            setting.setJavaScriptEnabled(true);// 设置支持javascript脚本
            setting.setCacheMode(WebSettings.LOAD_NO_CACHE);//设置缓存模式
            webview.setVerticalScrollBarEnabled(false); // 取消Vertical ScrollBar显示
            webview.setHorizontalScrollBarEnabled(false); // 取消Horizontal ScrollBar显示
            //设置自适应屏幕,两者合用
            setting.setUseWideViewPort(true);
            setting.setLoadWithOverviewMode(true);
    
            setting.setAllowFileAccess(true);// 允许访问文件
            setting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                setting.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
            }
            webview.setFocusable(false); // 去掉超链接的外边框
            setting.setDefaultTextEncodingName("GBK");//设置文本编码(根据页面要求设置)
            webview.setWebChromeClient(new MyWebChromeClient());
        }
    
    
    private class MyWebChromeClient extends WebChromeClient {
    
            private CustomViewCallback mCustomViewCallback;
            //  横屏时,显示视频的view
            private View mCustomView;
             
            // 点击全屏按钮时,调用的方法
            @Override
            public void onShowCustomView(View view, CustomViewCallback callback) {
                super.onShowCustomView(view, callback);
    
            //如果view 已经存在,则隐藏
                if (mCustomView != null) {
                    callback.onCustomViewHidden();
                    return;
                }
    
                mCustomView = view;
                mCustomView.setVisibility(View.VISIBLE);
                mCustomViewCallback = callback;
                mLayout.addView(mCustomView);
                mLayout.setVisibility(View.VISIBLE);
                mLayout.bringToFront();
    
                //设置横屏
                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
            }
    
            // 取消全屏调用的方法
            @Override
            public void onHideCustomView() {
                super.onHideCustomView();
                if (mCustomView == null) {
                    return;
                }
                mCustomView.setVisibility(View.GONE);
                mLayout.removeView(mCustomView);
                mCustomView = null;
                mLayout.setVisibility(View.GONE);
                try {
                    mCustomViewCallback.onCustomViewHidden();
                } catch (Exception e) {
                }
                titleView.setVisibility(View.VISIBLE);
                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//竖屏
            }
        }
      /**
         * 横竖屏切换监听
         */
        @Override
        public void onConfigurationChanged(Configuration config) {
            super.onConfigurationChanged(config);
            switch (config.orientation) {
                case Configuration.ORIENTATION_LANDSCAPE:
                            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
                    getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
                    break;
                case Configuration.ORIENTATION_PORTRAIT:
                    getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
                    getWindow().addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
                    break;
            }
        }
    
        @Override
        protected void onDestroy() {
            super.onDestroy();
            webview.destroy();
            webview = null;
        }
    
    }

     还需要在 AndroidMainfest.xml  中设置该 Activity相关属性,即横竖屏切换的时候,不进行生命周期的切换

       <activity
                android:name=".HelpActivity"
                android:configChanges="orientation|keyboardHidden|navigation|screenSize"
                android:hardwareAccelerated="true"
                android:screenOrientation="portrait"
         />

    到这里就大功告成!

    还有一点需要注意: 当我们播放视频后,如果直接退出,会发现后台仍然在播放。

    我们可以在 onDestory 方法中,对webView进行销毁

     

     

     

    展开全文
  • 如题,如何解决android4.4以上系统webview 播放视频时不能全屏问题
  • 在android4.4的webview上播放从优酷提供的视频接口网页无法全屏,已经开启硬件加速,点击全屏按钮的时候发现没有回调onShowCustomView方法,在android4.4一下都可以正常回调。 知道是否有人遇到同样的问题,希望...
  • NULL 博文链接:https://xiaxingwork.iteye.com/blog/2092372
  • 在项目中,会有在webview嵌入的网页中播放视频的需求,会在部分手机上出现白屏或有声音无画面等问题,并且存在全屏按钮点击无效果的问题。
  • 在网上找了好多资料,博客什么的,都不能解决!于是本人突发奇想,但我点击一个按钮或者一个图标的时候强制当前的Activity横屏充满,不就可以解决了么。于是,不幸的是,我成功了,哈哈! 接下来给大家详细步骤,...
  •  android:id="@+id/webview"  android:layout_width="match_parent"  android:layout_height="match_parent"/> 2、在工程的assets文件夹中加入: 3、在代码中建立js 连接:  private
  • 微信小程序无需下载安装的优势让它变得越来越受欢迎,占内存的特点深受大众的喜爱。 微信小程序与APP有着明显的区别。APP功能很多,内容也很复杂,而微信小程序相比之下没用那么多的功能(删除),但是也满足...
  • WebView不能适配问题

    2016-09-27 17:46:22
    ,其中viewport初始化了现实尺寸,但是对于不同的设备显示效果不一,有的超出屏幕,有的留空白边,后发现针对android设备,只能把content中width=device-width改为width=测量的屏幕的具体尺寸,才可以全屏显示,具体...
  • 欢乐斗地主小程序残局玩法模式及洗牌玩法模式等各种刺激创新玩法,吸引了大量用户,使其一直飙升并保持稳定在微信小程序游戏排行榜中。微信小程序游戏排行榜top2:欢乐球球欢乐球球小程序是一款3D效果的小游戏,...
  • webView 全屏播放视频

    2018-06-14 11:38:46
    这里实现的是对webview 中Video标签播放全屏视频的处理方式,目前腾讯视频的分享视频等无法做到全屏,网上看到很多使用js注入方式实现的全屏,我都一一做了试验,发现无效,比如腾讯视频分享链接使用的是iframe标签...
  • WebView视屏全屏切换,完美实现

    千次阅读 2017-12-11 15:48:19
    首先,webView不能讲视频播放的区域全屏的,所以,需要全屏播放还需要自己试想 大致的步骤有三部: 1、在布局中增加一个空容器,用来全屏播放,首先是隐藏的 播放全屏视频时用--> <FrameLayout androi
  • 明日天气:小雨 12~16°C总是下载一些经常用的APP?其实用某些微信小程序就代替,今天小管家就想给大家种草六个实用的小程序,快来吃下小管家的安利吧!1.识图取字这款小程序可以快速从图片中取出文字,让你不再...
  • 转载请标明转载处:http://bbs.csdn.net/topics/390839259本人刚学android,菜鸟一个,第一次写帖子,最近因为项目要用webview加载html5的视频,开始不能全屏播,做了很久才做出来!那按我的理解说下怎么实现全屏吧...
  • uniapp nvue、vue的webview实现播放视频全屏,uniapp的原生视频组件性能太低,比h5还弱,只能使用webview组件调用h5播放器播放视频,相信很多朋友都会遇到webview组件视频不能全屏播放,点击全屏无响应等情况。...
  • webview加载的页面中有video标签,重写了webChromClient 中的onShowCustomView 和 onHideCustomView后能实现全屏播放,现在遇到...1、5.0以上的手机退出全屏后魅族出现不能暂停(魅族pro4 5.0)和不能再次全屏(没蓝)
  • 个人由于工作需要,最近查找了许多webview视屏播放相关全屏的问题,发现现在原生webview只支持... 也可能是个人技术不行,无法找到一些黑科技来实现吧,不能自己去实现类似第三浏览器自带的内核,而公司项目又...

空空如也

空空如也

1 2 3 4
收藏数 76
精华内容 30
关键字:

webview不能全屏