详细代码是采用vue框架编译的h5，其中视频用video或者用vue-video-player插件部署服务器后在用android微信打开都是一样的脱离文档流。以下是核心代码片段：

​

<template>

    <div class="tab_home">

        <div class="goods-video">

            <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>

        </div>

    </div>

</template>

​

<script>

    import VideoPlayer from 'vue-video-player';

    export default {

        data() {

            return {

                playerOptions: {

                    playbackRates: [0.7, 1.0, 1.5, 2.0],

                    autoplay: false, 

                    muted: false, 

                    loop: false, 

                    preload: 'auto', 

                    language: 'zh-CN',

                    aspectRatio: '16:9', 

                    fluid: true, 

                    sources: [{

                        type: "video/mp4",

                        src: "http://img.dehar.cn/play.mp4" //url地址

                    }],

                    poster: "https://resource.dehar.cn/shuxun/lb.png", 

                    notSupportedMessage: '此视频暂无法播放，请稍后再试', 

                    controlBar: {

                        timeDivider: true,

                        durationDisplay: true,

                        remainingTimeDisplay: false,

                        fullscreenToggle: true //全屏按钮

                    }

                }

            };

        }

    };

</script>

​

<style lang="scss" scoped>

    .goods-video {

        background: #FFFFFF;

        padding-top: 16px;

        position: relative;

    }

</style>

<video webkit-playsinline playsinline x5-video-player-type="h5-page">

</video>