最佳webview实践之打造一款影视app

1.源码:

https://gitee.com/zouchengxin/www.vultr1.com

2.网站:

http://www.vultr1.com/

3.效果:

http://39.106.207.193:8080/www.vultr1.com.mp4

4.apk下载(保证绿色安全放心下载):

https://gitee.com/zouchengxin/www.vultr1.com/blob/master/app/release/app-release.apk

5.代码解读:

• 清单文件(AndroidManifest.xml):

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.zcx.webview">
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"
            android:hardwareAccelerated="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".PlayActivity"
            android:screenOrientation="landscape"
            android:theme="@style/FullScreen"/>
    </application>

</manifest>

列出2个activity,申请的权限(网络请求,读写外部存储卡)

• 主布局文件(activity_main.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="center">
    <TextView
        android:id="@+id/loading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="加载中..."
        android:gravity="center"/>
    <WebView
        android:id="@+id/wv"
        android:layout_weight="10"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        />
    <Button
        android:id="@+id/bt_full"
        android:onClick="onFullScreen"
        android:layout_weight="2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="全屏播放"
        />
</LinearLayout>

一个textview显示加载,一个webview显示网站,一个Button用来全屏播放

• 全屏播放视频布局文件(fullscreen_play.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <VideoView
        android:id="@+id/vv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

一个videoview用来全屏播放视频

• 控制activity_main.xml(MainActivity.java)

public class MainActivity extends AppCompatActivity {
    private WebView wv;
    private Button bt_full;//全屏播放按钮
    private TextView loading;//加载控件
    private Boolean isExit=false;//是否退出
    private String url="http://www.vultr1.com/";//网站url
    private String playUrl="";//播放的url地址

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        wv=findViewById(R.id.wv);
        bt_full=findViewById(R.id.bt_full);
        bt_full.setVisibility(View.GONE);
        loading=findViewById(R.id.loading);

        WebSettings settings = wv.getSettings();
        //设置的WebView用户代理字符串
        settings.setUserAgentString("Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36");
        //启用JavaScript
        settings.setJavaScriptEnabled(true);
        //启用插件
        settings.setPluginState(WebSettings.PluginState.ON);
        //让JavaScript自动打开窗口
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        //设置DOM存储API是否已启用
        settings.setDomStorageEnabled(true);
        //设置是否从网络web视图不应加载图像资源（通过http和https URI方案访问的资源）
        settings.setBlockNetworkImage(false);
        //套的WebView是否应使用其内置的缩放机制
        settings.setBuiltInZoomControls(true);
        //设置的WebView是否应该保存的表单数据
        settings.setSaveFormData(true);
        //这种方法在API层面18.保存密码中的WebView不会在将来的版本中支持已被否决
        settings.setSavePassword(true);
        //设置使用内置变焦机制，当web视图是否应显示在屏幕缩放控制
        settings.setDisplayZoomControls(true);
        //设置是否WebView中是否支持多个窗口
        settings.setSupportMultipleWindows(true);
        //设置的WebView是否需要用户手势媒体播放
        settings.setMediaPlaybackRequiresUserGesture(true);

        wv.loadUrl(url);
        //String str="<html><body><script>function showAndroidToast(toast){android.alter(toast);}</script><input type='button' value='Say hello' onClick='showAndroidToast(\"Hello Android!\")'/></body></html>";
        //wv.loadData(str,"text/html" ,"utf-8");
        //wv.addJavascriptInterface(new WebAppInterface(this),"android");
        wv.setWebViewClient(new MyWebViewClient());

    }

    //监听全屏点击事件
    public void onFullScreen(View view) {
        Intent intent = new Intent(this,PlayActivity.class);
        intent.putExtra("url",playUrl);
        Toast.makeText(this,playUrl,Toast.LENGTH_LONG).show();
        startActivityForResult(intent,0);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        if(requestCode==0){//视频播放
            switch (resultCode){
                case RESULT_CANCELED:
                    break;
                case 3://播放完成
                    Toast.makeText(this,"视频已播完",Toast.LENGTH_LONG).show();
                    break;
                case 4://发生错误
                    Toast.makeText(this,
                            String.format("what:%d,extra:%d",data.getIntExtra("what",0),
                                    data.getIntExtra("extra",0)),
                            Toast.LENGTH_LONG).show();
                    break;
                default:
                    Toast.makeText(this,"视频播放出错",Toast.LENGTH_LONG).show();
            }
        }
    }

    //android与javascript交互接口
    public class WebAppInterface{
        private Context c;
        WebAppInterface(Context c){
            this.c=c;
        }

        @JavascriptInterface
        public void alter(String toast){
            Toast.makeText(MainActivity.this,toast,Toast.LENGTH_LONG).show();
            wv.loadUrl(url);
        }

    }

    public class MyWebViewClient extends WebViewClient{
        private String TAG="MyWebViewClient";
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return false;
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            loading.setVisibility(View.VISIBLE);
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public void onLoadResource(WebView view, String url) {
            //Log.e(TAG,url);
            if(url.contains("http://www.bihaijx.com/kkm3u8.php")){//加载酷云视频
                playUrl=url.substring(url.indexOf("url=")+4);
            }
            if(url.contains("https://www.ixxplayer.com/video.php")){//加载狗带云视频
                playUrl=url.substring(url.indexOf("url=")+4);
            }
            if(url.contains("https://api.123zx.net/m3u8.php")){//加载最快云/33uu云视频
                playUrl=url.substring(url.indexOf("url=")+4);
            }

            super.onLoadResource(view,url);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            loading.setVisibility(View.GONE);
            if(url.contains("http://www.vultr1.com/play")){
                bt_full.setVisibility(View.VISIBLE);
            }else {
                bt_full.setVisibility(View.GONE);
            }
            super.onPageFinished(view, url);
        }

        @Override
        public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
            Log.e(TAG,error.toString());
        }

        @Override
        public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
            Log.e(TAG,errorResponse.toString());
        }
    }

    @Override
    public void onBackPressed() {
        if(wv.canGoBack()) {
            wv.goBack();
        }else {
            if(isExit) {
                super.onBackPressed();
            }else {
                Toast.makeText(this,"再按一次退出",Toast.LENGTH_LONG).show();
                isExit=true;
            }
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        wv.clearCache(true);
        wv=null;
    }
}

• 控制fullscreen_play.xml(PlayActivity.java)

public class PlayActivity extends AppCompatActivity implements MediaPlayer.OnCompletionListener, MediaPlayer.OnErrorListener {
    private VideoView vv;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fullscreen_play);
        vv=findViewById(R.id.vv);
        String url = getIntent().getStringExtra("url");
        System.out.println("url:"+url);
        vv.setVideoPath(url);
        MediaController controller = new MediaController(this);
        vv.setMediaController(controller);

        DisplayMetrics metrics=new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        ViewGroup.LayoutParams params = vv.getLayoutParams();
        params.width=metrics.widthPixels;
        params.height=metrics.heightPixels;
        System.out.println(String.format("(%d,%d)",params.width,params.height));
        vv.setLayoutParams(params);

        vv.requestFocus();
        vv.setOnCompletionListener(this);
        vv.setOnErrorListener(this);
        vv.start();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        vv.stopPlayback();
        vv=null;
    }

    @Override
    protected void onResume() {
        super.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
    }

    //播放完成回调
    @Override
    public void onCompletion(MediaPlayer mp) {
        setResult(3);
        finish();
    }

    //发生错误回调
    @Override
    public boolean onError(MediaPlayer mp, int what, int extra) {
        Intent intent = new Intent();
        intent.putExtra("what",what);
        intent.putExtra("extra",extra);
        setResult(4,intent);
        finish();
        return true;
    }
}

注意在webview加载资源回调中要找到真正的url地址，还有有些视频原网站中需要安装插件才能播放，而我用的android原生组件videoview全屏播放视频，而且webview里视频没法全屏播放，所以强烈建议点击全屏播放按钮进行全屏播放，第一次进入播放页面可能全屏播放按钮不会显示出来，点击其他播放源后再点击就行了。