h5视频落地页知识点整理

一、视频在苹果中自动播放（借助微信SDK）

1.引入微信SDK

2.    

document.addEventListener('WeixinJSBridgeReady', function() {

        const timer = setInterval(() => {

        WeixinJSBridge.call('hideOptionMenu')

        console.log('hideoptionmenu')

        const videoPlayer = document.querySelector(`#videoele`)

        if (videoPlayer && videoPlayer.play && isIos) {

            clearInterval(timer)

            vue.isPlaying = true

            videoPlayer.play()

        }

        }, 300)

    })

二、 h5页面中视频禁止默认播放器，希望在页面内播放

x5-video-player-type="h5-page" :show-fullscreen-btn="false" 两个属性

三、openinstall

h5中调起苹果的应用商店下载app，和安卓直接下载

1.在mounted中初始化openinstall

            initOpeninstall() {

                const that = this

                // if (that.getOS() === 'ios') return

                const s = document.createElement('script')

                s.type = 'text/javascript'

                s.src = 'https://web.cdn.openinstall.io/openinstall.js' // 在线引用

                s.onload = function () {

                    // @ts-ignore

                    const data = OpenInstall.parseUrlParams() // openinstall.js中提供的工具函数，解析url中的所有查询参数

                    // @ts-ignore

                    that.install = new OpenInstall({

                    /* appKey必选参数，openinstall平台为每个应用分配的ID */

                    appKey: that.installAppKey,

                    /* 自定义遮罩的html */

                    //mask: function(){

                    // return "

"

                    //},

                    /* OpenInstall初始化完成的回调函数，可选 */

                    onready: function() {

                        /*在app已安装的情况尝试拉起app*/

                        // m.schemeWakeup();

                        /*用户点击某个按钮时(假定按钮id为downloadButton)，安装app*/

                        // eslint-disable-next-line

                        // const m = this

                        // const button = document.getElementById('downloadButton')

                        // function wakeup() {

                        //   m.wakeupOrInstall({data})

                        //   return false

                        // }

                        // if (button) button.onclick = wakeup

                    },

                    }, data)

                }

                document.head.appendChild(s)

            },

2.触发下载事件时

const data = OpenInstall.parseUrlParams() // openinstall.js中提供的工具函数，解析url中的所有查询参数

this.install.wakeupOrInstall({data})

效果：