微信小程序H5 uniapp

       最近微信小程序对有视频播放的审核严,需要提供“文娱类资质”。而申请这个资质比较繁琐。所以我们在小程序上用web-view做跳转到H5,H5使用uniapp编写。这是小程序关于web-view文档说明。https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

开发前配置,需要到微信公众平台,登入小程序的开发管理页面配置业务域名,仅支持https

下面直接上代码:

  1. 小程序wxml页面     
  2. 小程序js,注意这里我们跳转的是h5的页面地址,开始调试时,真机预览时打开小程序设置“开发调试”,这样就不会校验域名。
  3. uniapp页面
    <video id="myVideo" ref="myVideo" :src="pageData.ware_url" :muted="false":autoplay="true":http-cache ="false":show-mute-btn="true":style="{'width':'100%','height':type == 2 ? '95rpx': '360rpx'}"errorTip=""@play="doPlay" @pause="doPause"@ended="doEnd" @error="videoErrorCallback" controls></video>

  4. 这里使用的是uniapp打包成H5,然后用nginx配置该工程打包后的页面路径

  5. 在调试播放视频这块,因ios和android兼容问题调试了很久,过程中有出现如下几个问题

         5.1、视频设置自动播放,ios可以,安卓不行,已经设置了静音播放

         5.2、视频不设置自动播放,设置初始播放位置,android可以。ios不行,点击开始播放后进度条不会变,一直停留在开始位置。

         5.3、试过用uniapp插件市场上的 "x-video"、腾讯视频播放器“tcplayer”,均不能解决ios和android都能满足 指定视频播放初始位置和自动播放

      6.最终还是使用uniapp的“video”组件。利用“@play”时间判断是否有在播放。想过业务逻辑可以用“isPause”字段判断当前是否有在播放中

        写这边文章是为了有需要的朋友提供一下调试的思路,也尽量能避免踩坑,和在坑里白耗费时间。我从开始接入web-view到最终确定方案并测试成功花了四天半,期中周末占了一天半。不过前面两天是因为我们播放视频的问题,一直在ios真机上播放不了,还找了各种编码资料,最后才发现是这个视频有问题,重新下载在上传到七牛,解决了。找对思路真的很重要。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux共享内存

共享内存&#xff1a;进程直接访问共享内存&#xff0c;由使用者进行访问控制&#xff08;互斥等&#xff09; 使用ipcs命令查看系统共享内存 POSIX 共享内存 有名共享内存 多个进程通过共享内存的名字来获取同一块共享内存&#xff0c;实现共享 #include <stdio.h>…

基于Python实现连锁咖啡店经营情况EDA分析【500010097】

导入模块 import pandas as pd import plotly.graph_objects as go from plotly.subplots import make_subplots import plotly.express as px获取数据 df pd.read_csv(r./data/coffeeshop.csv) data_exploration(df)数据缺失值情况 print(数据缺失值情况&#xff1a;) df.…

sqli-labs(Less-4) extractvalue闯关

extractvalue() - Xpath类型函数 1. 确认注入点如何闭合的方式 2. 爆出当前数据库的库名 http://127.0.0.1/sqlilabs/Less-4/?id1") and extractvalue(1,concat(~,(select database()))) --3. 爆出当前数据库的表名 http://127.0.0.1/sqlilabs/Less-4/?id1") …

API 集成测试工具Hitchhiker 0.1.1 正式发布

Hitchhiker 是一款开源的 Restful Api 集成测试工具&#xff0c;你可以在轻松部署到本地&#xff0c;和你的 team 成员一起管理 Api。 能做什么 * Team 协作开发 Api * Api 历史修改记录及支持 diff 展示 * 支持多环境变量及运行时变量 * 支持 Schedule 及批量 run * 不同…

【数据结构初阶】链表OJ

链表OJ 题目一&#xff1a;移除链表元素题目二&#xff1a;反转链表题目三&#xff1a;链表的中间节点题目四&#xff1a;链表中倒数第k个结点题目五&#xff1a;合并两个有序链表题目六&#xff1a;链表分割题目七&#xff1a;链表的回文结构题目八&#xff1a;相交链表题目九…

python实现双臂老虎机k-armed-bandit

老虎机&#xff0c;投入钱币会随机返还钱币&#xff08;reward&#xff09; 这里设置两台老虎机&#xff0c;一台均值500&#xff0c;标准差5&#xff0c;一台均值550&#xff0c;标准差10 初始值均为998&#xff0c;更新规则为reward之和/轮数 最后结果会在均值附近收敛 impo…

一些分享| 在线笔记、GIF图片生成方法

文章目录 在线笔记视频转GIF 本片博客旨在挖掘一些好用且免费的在线平台&#xff0c;持续更新中~ 正所谓科技解放双手&#xff0c;使用在线平台可以方便快捷地学习办公&#xff0c;节省时间。 在线笔记 语雀 https://www.yuque.com/dashboard 语雀是笔者用得最长最久的平台了…

C语言查看main函数的参数

这里写自定义目录标题 argc 代表参数的个数argv 代表参数的具体值&#xff0c;其中argv[0]代表的是可执行文件的名字&#xff0c;参考上图

《QT从基础到进阶·二十七》进度条QProgressBar

ui.ProgressBar.setValue(45); //45% ui.ProgressBar.setMin(0); ui.ProgressBar.setMax(255);0到100分为255份&#xff0c;值为215时&#xff0c;进度条为100/255*215 84% 点击主界面弹出进度条QProgressDialog 常用功能&#xff1a; setWindowFlags(Qt::Dialog | Qt::Cu…

基于Langchain-Chatchat的知识库问答系统

文章目录 文章背景构建知识库资源及相关配置相关问题检索问题检索结果不准确 LLM问题LLM回答错误、遗漏或多余 参考 文章背景 Langchain-Chatchat项目是一种利于langchain思想实现的基于本地知识库的问答应用&#xff0c;是一个可以实现完全本地化推理的知识库增强方案&#x…

排查线程阻塞问题

案例代码 package first;import java.util.concurrent.TimeUnit;public class DeadLock {private static volatile Object lock new Object();public static void main(String[] args) {new Thread(() -> {test1();}).start();new Thread(() -> {test2();}).start();}p…

如何解决3d max渲染效果图全白这类异常问题?

通过3d max渲染效果图时&#xff0c;经常会出现3Dmax渲染效果图全黑或是3Dmax渲染效果图全白这类异常问题。可能遇到这类问题较多的都是新手朋友。不知如何解决。 3dmax渲染出现异常的问题&#xff0c;该如何高效解决呢&#xff1f;今天小编这里整理几项知识点&#xff0c;大家…