h5视频落地页知识点整理

这篇具有很好参考价值的文章主要介绍了h5视频落地页知识点整理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

效果:

h5视频落地页知识点整理

 文章来源地址https://www.toymoban.com/news/detail-420979.html

 

到了这里,关于h5视频落地页知识点整理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Docker知识点整理

    传统的虚拟机,可以虚拟出一条硬件,运行一个完整的操作系统,在这个操作系统上安装和运行所需的软件 容器内的应用可以直接运行在宿主 主机的内核中,容器没有自己的内核,也不用虚拟硬件 (轻便) 每个容器是相互隔离的,每个容器内都有属于自己的文件系统,之间

    2024年02月03日
    浏览(36)
  • 分块矩阵知识点整理:

    1.分块方法:横竖线不能拐弯,思想为将矩阵分块看作向量计算 2.标准型         不一定是方的         特殊性:经过分块后会出现单位矩阵和0矩阵 3.分块矩阵的运算:         1.加减乘的运算与向量运算相同 4.分块矩阵求转置:         1.将子块看作普通元素求转置    

    2024年02月01日
    浏览(32)
  • Mysql知识点整理

    什么是Mysql; Mysql常用的存储引擎有什么?它们有什么区别? 数据库的三大范式; Mysql的数据类型有哪些? Mysql的索引: 什么是Mysql索引? 索引的优缺点 索引的数据结构 Hash索引和B+树索引的区别 索引类型有哪些? 索引的种类有哪些? B树和B+树的区别? 数据库为什么使用

    2023年04月12日
    浏览(38)
  • 混频器知识点整理

    混频是利用两个信号在时域上的相乘来实现的。假设两个正弦型信号输入到一个乘法器中,则在乘法器的输出可以得到一个和频成分和一个差频成分,在数学上可以表示为: (Acos ω 1 omega_1 ω 1 ​ t)(Bcos ω 2 omega_2 ω 2 ​ t)= A B 2 frac{AB}{2} 2 A B ​ [cos( ω 1 omega_1 ω 1 ​ - ω 2 o

    2024年02月08日
    浏览(36)
  • 计算机网络知识点整理

    1. 五层协议 应用层 :通过应用进程间的交互来完成特定网络应用。HTTP、DNS 、SMTP等协议。数据单位为报文。 传输层 :负责向两台主机中进程的通信提供数据传输服务。TCP(面向连接,可靠传输,单位为报文段)、UDP协议(无连接,尽最大努力传输,单位是用户数据报)。

    2023年04月08日
    浏览(85)
  • 计算机二级知识点整理

    翻到了之前准备计算机二级的笔记,现在给大家分享出来。 计算机把完成一条指令所花费的时间称为一个指令周期 结构化程序设计强调的是程序的易读性 boolean类型不能转为其他基本类型数据 表达式是由运算符和运算对象构成的,#不是运算符 a的ASCII码是97,以此类推 理论上

    2024年02月08日
    浏览(42)
  • 2023MySQL+MyBatis知识点整理

    主键:记录的唯一表示,不能重复,不能为空,默认为聚集索引,用来保证数据完整性 外键:表的某列是另一表的逐渐,可以重复,可以为空,用来和其他表关联 一系列设计数据库模型的规范。 第一范式:原子性约束,不可再分解 第二范式:唯一性约束 第三范式:字段没

    2024年02月11日
    浏览(40)
  • 关于Linux同步机制知识点整理

    在Linux系统中,同步机制是操作系统中非常重要的一部分,以下是一些基本要点: 互斥锁 互斥锁是一种「独占锁」,比如当线程 A 加锁成功后,此时互斥锁已经被线程 A 独占了,只要线程 A 没有释放手中的锁,线程 B 加锁就会失败,失败的线程B于是就会释放 CPU 让给其他线程

    2024年02月11日
    浏览(46)
  • C++基础知识点整理笔记(四)

    10. C++的内存管理 在C++中,内存被分成五个区:栈、堆、自由存储区、静态存储区、常量区 (一) 栈:存放函数的参数和局部变量,编译器自动分配和释放 (二) 堆:new动态分配的内存,由程序员手动进行释放,否则程序结束后,由操作系统自动进行回收 (三) 自由存储区

    2024年02月15日
    浏览(50)
  • 【期末专题】数据库知识点整理

    1.要求:修改表的“价格”列,使其数据类型为decimal(6,2) 语句:alter table BookInfo modify price decimal(6,2); 注意点:修改一个表中已有列的数据类型的语句格式:         alter table 表名 modify 列名 数据类型 2.要求: 语句: 注意点: 创建触发器的语法: create trigger 触发器名   

    2024年02月11日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包