h5视频落地页知识点整理

Posted 2023-04-02 海绵宝宝Ellen

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

1.引入微信SDK

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

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" 两个属性

<div class="player" @click="changeStatus()">

    <video id="videoele" :src="homeInfo.url" :poster="homeInfo.cover" @play="onplaying()" playsinline="true" webkit-playsinline="" x5-video-player-type="h5-page" :show-fullscreen-btn="false" :show-center-play-btn="false" @pause="onpaused()" :controls="false" :autoplay="false" :loop="true"></video>

</div>

三、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 "<div id='_shadow' style='position:fixed;left:0;top:0;background:rgba(0,255,0,0.5);filter:alpha(opacity=50);width:100%;height:100%;z-index:10000;'></div>"

                    //,

                    /* 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)

效果：

 

 

微信小程序开发视频+项目实战

视频课程包含：

微信小程序入门视频、pages页面启动顺序配置、App实战开发视频教程、demo真机演示视频集锦、开发视频教程、源码+PPT、微信小程序五部入门+实战视频 等等 共9G！

这里给大家按照一定思路整理了微信小程序视频和项目实战，涵盖微信小程序全部知识点。

本视频属于作者原创搜集整理！下载方式:翻阅到文章底部

目录

1、微信小程序入门视频

2、微信小程序开发视频教程

3、微信小程pages页面启动顺序配置

4、微信小程序demo真机演示视频集锦

5、微信小程序五部入门+实战视频

6、微信小程序视频

7、微信小程序App实战开发视频教程

8、微信小程序源码+PPT

获取方式:

关注公众微信号：博涵大数据

或者扫描下面的二维码关注获取。

关注后在公众平台上回复"小程序教程"。（注意是公众平台回复）

好定西不要独享，分享到你朋友圈吧！请大家分享给更多的朋友！

关注方式：长按二维码识别快速关注，每天都有精彩干货！