自动暂停和恢复网页中的视频播放

序言

在日常开发中，有时候一级栏目可能是个H5页面，当切换到其他栏目的时候需要自动暂停H5中的视频，切换回来以后需要自动恢复播放。实现的思路是通过JS来操作，难点是感知fragment的可见状态。还有js代码的编写。

比如下面这个页面就是H5页面。切换到首页的时候需要暂停视频，切换回来需要自动播放。

解决方案

对fragment可见状态的监视

通过一下工具类实现。相关的使用方式在注释中，只需要在fragment中调用相关方法就行了。该类采用了观察者模式，如果后面还有其他基于可见性的业务代码，通过添加观察者就可以扩展。

package com.trs.library.fragment;


import java.util.Observable;

/**
 * <pre>
 * Created by zhuguohui
 * Date: 2024/2/6
 * Time: 9:46
 * Desc:该类是用于监视fragment的可见状态的工具类
 * 采用观察者模式，注册观察者以后，可见状态会以参数的形式传递。
 * 这里的可见的定义是对用户可见。屏蔽了viewpager中的预加载不算
 * 或者通过fragmentManger的hide方法隐藏了fragment。也不算可见。
 *
 * 使用方法。需要在fragment的生命周期方法中调用同名的以下方法。
 * {@link #setUserVisibleHint(boolean)}
 * {@link #onResume()}
 * {@link #onPause()}
 * {@link #onHiddenChanged(boolean)}
 *
 * 提示：
 * 由于setUserVisibleHint 比fragment的onCreate方法还要提前。所以这个工具的初始化不能放在生命周期方法中。
 * 最好以类的成员变量的形式初始化。
 * </pre>
 */
public  class FragmentShowStateMonitor extends Observable {
   

    boolean isVisibleToUser = true;
    boolean isHide = false;

    /**
     * 这个方法由ViewPager调用。
     *
     * @param isVisibleToUser
     */
    public final void setUserVisibleHint(boolean isVisibleToUser) {
   
        this.isVisibleToUser = isVisibleToUser;
        onFragmentShowStateChange(isVisibleToUser);

    }


    public final void onPause() {
   
        if (isShow()) {
   
            onFragmentShowStateChange(false);
        }
    }

    private boolean isShow() {
   
        if (isHide||!isVisibleToUser) {
   
            return false;//viewPager中也可能hide
        }
        return true;
    }


    /**
     * 使用FragmentTransaction的show或者hide方法的时候。会回调改方法。
     * hide的本质就是将fragment中的view设置为GONE。
     * 注意：如果fragment嵌套了子Fragment。当外层的fragment的onHiddenChanged被调用以后
     * 子Fragment默认是不会被调用了。如果要记录子Fragment的显示时长。需要自己去重新父Fragment的
     * onHiddenChanged方法。
     *
     * @param hidden
     */
    public final void onHiddenChanged(boolean hidden) {
   
        isHide = hidden;
        onFragmentShowStateChange(!hidden);
    }


    /**
     * 在viewPager中由于有预加载功能，当调用onResume的时候，其实并没有显示给用户
     * 需要通过isVisibleToUser 来判断是否显示
     *
     */
    public final void onResume() {
   

        if (