h5视频落地页知识点整理

news2024/10/6 10:30:49

一、视频在苹果中自动播放(借助微信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})

效果:

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/66563.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何签署exe或Windows应用程序?

本文您将了解为什么要签署Windows应用程序以及如何签署EXE或Windows应用程序的步骤指南。 代码签名是一种确保软件来自经过验证的正版软件发行商的方法。使用代码签名证书唱WindowsEXE文件可确保可执行文件或Windows应用程序不会被恶意行为者更改或修改。 Windows应用程序签名…

2022年NPDP新版教材知识集锦--【第五章节】(2)

《产品经理认证(NPDP)知识体系指南(第2版)》已于2022年4月正式上架发行&#xff0c;新版教材自2022年11月NPDP考试起使用。将新版NPDP教材中的相关知识点进行了整理汇总&#xff0c;包括详细设计与规格阶段相关内容&#xff0c;快来看看吧。 【市场研究工具】(全部内容获取文末…

华为机试 - 无向图染色

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 给一个无向图染色&#xff0c;可以填红黑两种颜色&#xff0c;必须保证相邻两个节点不能同时为红色&#xff0c;输出有多少种不同的染色方案&#xff1f; 输入描述 第一行输入M(图中节点数) N(边数) …

使用reshape2 R包进行在线长数据和宽数据相互转化

数据是数据分析的基础。我们常见的数据一般存储在excel表格&#xff0c;或者txt文档中。今天我们来看看长数据和宽数据&#xff0c;以及如何进行两者之间的相互转换。 1&#xff0e;宽数据和长数据 宽数据 如图1所示&#xff0c;宽数据是我们最常见的数据存储形式&#xff0c…

[附源码]Python计算机毕业设计Django校园订餐管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

nginx配置文件组成

1.配置文件的组成 ​ 配置文件由全局块events块http块组成 1.1 全局块 ​ 从配置文件开始到events之间的内容&#xff0c;主要会设置一些影响Nginx服务器整体运行的配置指令&#xff0c;主要包括配置运行Nginx服务器的用户(组)、允许生成的worker process数&#xff0c;进程pid…

Java数据结构与Java算法学习Day06---堆(简略笔记记录)

目录 一、堆 96 1.1堆的定义 96 1.2堆的API设计 97 1.3堆---堆的插入方法 98 1.4堆---堆的删除最大元素方法 99 1.5堆---堆的测试 100 二、堆排序 101 2.1堆排序 101 一、堆 96 1.1堆的定义 96 堆实际上也是利用数据结构实现的&#xff0c;用树实现的特殊结构&…

(mac M1)Flutter环境搭建

下载Flutter SDK&#xff0c;需要科学上网。 将Flutter永久添加到PATH中 1 sudo vim ~/.bash_profile 打开文件 2 export PATHpwd/flutter/bin:$PATH 将这个添加到前几行环境变量设置中 3 :wq 退出vim 4 source ~/.bash_profile 配置马上生效命令 运行 flutter doctor 命令&a…

【Linux】yum的介绍和使用

本期主题&#xff1a;yum介绍和使用博客主页&#xff1a;小峰同学分享小编的在Linux中学习到的知识和遇到的问题小编的能力有限&#xff0c;出现错误希望大家不吝赐作为程序员&#xff0c;不会有人还没女朋友吧。 目录 &#x1f341;1.软件包是什么&#xff1f; &#x1f341;…

[附源码]Python计算机毕业设计Django小型银行管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

Qwt开发笔记(二):Qwt基础框架介绍、折线图介绍、折线图Demo以及代码详解

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/128194710 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软…

单片机硬件和软件延时、RTOS相对延时和绝对延时

已剪辑自: https://mp.weixin.qq.com/s/-RPLQn4KO9Aqu1fpfZeOKA 前不久有个读者在问关于延时的问题&#xff0c;大概就是问&#xff1a;软件延时和硬件延时是啥意思&#xff1f;做项目时他俩有什么区别&#xff1f; 今天就来讲讲关于硬件延时和软件延时的内容&#xff0c;以及…

[GitHub]将本地文件上传远程仓库(安装,创建SSHKey,上传远程仓库)

目录 什么是GitHub 注册账户以及创建仓库 安装Git 配置Git ​编辑 将本地项目上传远程仓库 创建本地仓库 创建远程仓库 克隆远程仓库到本地 什么是GitHub github是一个基于git的代码托管平台&#xff0c;付费用户可以建私人仓库&#xff0c;我们一般的免费用户只能使用公共…

Android 动画实现 从基础到自定义

1. 基础使用 由于是继承了ValueAnimator类 所以使用的方法十分类似&#xff1a;XML 设置 / Java设置1.1 Java设置 ObjectAnimator animator ObjectAnimator.ofFloat(Object object, String property, float ....values); // Object object&#xff1a;需要操作的对象 // Str…

【SpringCloud负载均衡】【源码+图解】【二】LoadBalancer配置

【SpringCloud负载均衡】【源码图解】【一】LoadBalancer的HelloWorld体验 目录2. LoadBalancer的配置2.1 config.LoadBalancerAutoConfiguration2.2 BlockingLoadBalancerClientAutoConfiguration2.3 LoadBalancerEurekaAutoConfiguration2.4 loadbalancer.LoadBalancerAutoCo…

[附源码]Python计算机毕业设计SSM建筑材料采购管理系统(程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

引擎入门 | Unity UI简介–第2部分(5)

本期我们继续为大家进行Unity UI简介&#xff08;第二部分&#xff09;的后续教程 本篇内容 9.设置动画对话框 文章末尾可免费获取教程源代码 本篇本篇Unity UI简介&#xff08;第二部分&#xff09;篇幅较长&#xff0c;分为八篇&#xff0c;本篇为第五篇。 9.设置动画对…

css:css属性pointer-events实现点击穿透

文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target 常用属性 /* Keyword values */ pointer-events: auto; /* 与pointer-events属性未指定时的表现效…