h5视频播放代码

在h5上，用户要求视频行内自动播放，播放的时候要把视频静音。 这里有几个坑 1、安卓需要手动触发才能播放，并且会全屏 2、ios在10.1.1以上才能支持 3、安卓播放的时候视频不会静音，但是背景音乐会被停掉，并且播完视频后背景音乐不会自动继续播放，所以需要监听视频状态，播放完毕后把音乐重新播放起来

<video
                            src={require("../images/video.mp4")}
                            id="video"
                            preload="true"
                            controls="true"
                            x5-playsinline="true"
                            playsInline="true"
                            webkit-playsinline="true"
                            // volume="0"
                            muted="true"
                            onPlay={() => {
                                // document.querySelector("#video").volume = 0;
                                this.isVideoPaused = window.el_audio.paused;
                                // window.el_audio.pause();
                                // window.el_audio.play();
                            }}
                            onPause={() => {
                                if (!this.isVideoPaused) {
                                    // window.el_audio.play();
                                }
                            }}
                        ></video>

行内播放主要靠playsInline，静音设置muted 安卓下也能自动播放的话，需要监控微信的环境 这是在swiper下

  if (!isVideoPlayPast && mySwiper.realIndex == 1) {
                            isVideoPlayPast = true;
                            setTimeout(() => {
                                try {
                                    WeixinJSBridge.invoke('getNetworkType', {}, () => {
                                        document.querySelector("video").play();
                                    });
                                } catch (error) {
                                    document.querySelector("video").play();
                                }
                            }, 500);
                        }
                        document.querySelector("video").pause();