H5页面包含的video标签和audio标签与MediaPlayer冲突的解决方法【适用于AndroidTV】

运营又要求开发一个可以播放背景音乐的专题页面，APK暂时不能升级，只能用H5来开发了。

应用环境

首先我们APK大厅有一个小视频播放窗口，会调用Mediaplayer播放视频。

然后进入专题详情页面，点击任意一个焦点会跳转一个新的activity进行全屏播放。全屏播放的activity包含一个Mediaplayer。

发现问题

开发一个带视频/音频播放的网页多简单啊~ 啪啪啪代码码完以后，一测试就傻眼了，主要是有以下两种情况的BUG：
（正在开发的带视频/音频播放的网页就简称活动页面吧。）
1.关闭加载了活动页面的activity返回到带有Mediaplayer小窗口播放的APK大厅，活动页面中播放的视频不会停止，并且大厅的视频播放会报错，无法正常播放。
2.从加载了活动页面的activity跳转到带有Mediaplayer的全屏播放activity，活动页面中播放的视频不会停止，并且全屏播放activity视频播放会报错，无法正常播放。
以上两种异常情况从本质上来说都是H5页面开始播放video标签/audio标签以后，再调用android的Mediaplayer就会出现问题（猜测是使用的Mediaplayer进行的播放，离开活动页面时没有正确关闭Mediapalyer），需要完全退出APK才能停止活动页面视频的播放。

解决问题

拆分一下，我们需要解决的问题是两个：1.“在离开活动页面的时候”，2.“停止播放视频/音频”

离开页面监听

活动页面有3种离开方式：用户点击页面上的返回按钮、用户按下遥控器上的“返回”键、用户按下遥控器上的“首页”键。
尝试过使用window.onunload和window.onbeforeunload进行监听，但是在机顶盒上没有正常响应，因此只能放弃。

用户点击活动页面的返回按钮

这种比较好处理，在html绑定按键事件进行监听即可。

用户按下遥控器上的“返回”键

按键事件是先传递给WebView，再传进WebView里面加载的网页的，如果是按下返回键，WebView就会消费掉，在html里绑定的按键事件监听里是监听不到返回键的，只能通过监听包含WebView的Activity的按键事件，再手动调用js方法来实现网页监听用户按下返回键准备离开页面。

@Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
              boolKeyPress = true;
              webView.loadUrl("javascript:onAndroidKeyBackClicked() ");
              return true;
        }
        return super.onKeyUp(keyCode, event);
    }

用户按下“首页”键

按下“首页”键返回机顶盒大厅时，APK会被kill掉，自然就不会有活动页面播放没有停止的问题了，因此这种情况不用考虑。需要处理的是第一种和第二种情况。

停止播放

尝试过离开活动页面时暂停播放

var video = document.getElementById("video");
if(video){
    if(video.paused){
    	//继续播放
        //video.play();
    }else{
    	//播放暂停
        video.pause();
    }
}

测试发现离开页面时Mediaplayer仍被占用。
最后尝试过多种方法以后，发现可以通过加载空白页或者刷新当前页面强制中断播放解除Mediaplayer占用。

function exit() {
		//需要离开页面时，建议加载空白页
        window.location.href="about:blank";
        //如果只是打开新的activity，还会回到这个页面时，建议刷新页面
        window.location.reload();
		//离开的逻辑
		//doSomething
}

把exit()方法放进离开页面的监听里，测试确定问题解决。