微信小程序H5 uniapp

news2024/11/17 23:53:12

       最近微信小程序对有视频播放的审核严,需要提供“文娱类资质”。而申请这个资质比较繁琐。所以我们在小程序上用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.coloradmin.cn/o/1211168.html

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

相关文章

NI MIMO原型验证系统硬件介绍 已更新 2023年1月6日

https://www.ni.com/zh-cn/shop/wireless-design-test/what-is-the-mimo-prototyping-system/introduction-to-the-ni-mimo-prototyping-system-hardware.html 概览 随着采用无线连接方式的设备大量涌现&#xff0c;迫切需要研发可满足更高数据与容量需求的无线技术。来势汹汹…

抖音直播招聘报白企业人力资源有招聘需求的看过来

人力资源行业抖音招聘报白开始了&#xff0c;但是目前的市面的价格不一&#xff0c;很多人力资源公司最近想做抖音的直播报白&#xff0c;做直播待岗&#xff0c;因为最近刚好是招聘高峰期啊&#xff0c;企业需求大&#xff0c;赶上这一波&#xff0c;但是对目前市面上做抖音报…

力扣每日一题-K个元素的最大和-2023.11.15

力扣每日一题&#xff1a;K个元素的最大和 题目链接:2656.K个元素的最大和 题目描述 代码思路 题目看完直接笑嘻了&#xff0c;还有这么容易的题。由题可知&#xff0c;第一次要找出最大值m&#xff0c;那由于把m1放回去&#xff0c;那第二次找的就是m1&#xff0c;以此类推…

seatunnel及web安装常见问题与解决方法

mvn加速下载seatunnel相关jar包 安装seatunnel过程中&#xff0c;解压文件后官方默认提供的connector的jar包只有2个&#xff0c;要想连接mysql&#xff0c;oracle&#xff0c;SqlServer&#xff0c;hive&#xff0c;kafka&#xff0c;clickhouse&#xff0c;doris等时&#x…

问题 H: 棋盘游戏(二分图变式)

题意&#xff1a;要求找到 不放车就无法达到最大数的点 的个数 题解&#xff1a;1.以行列绘制二分图 2.先算出最大二分匹配数 3.依次遍历所有边 删除该边&#xff0c;并计算二分匹配最大值 &#xff08;若小于原最大值即为重要点&#xff09;&#xff0…

安装selenium(超级详细)

selenium本身是一个自动化测试工具&#xff0c;它可以让python代码调用浏览器&#xff0c;并获取到浏览器中加载的各种资源&#xff0c;我们可以利用selenium提供的各项功能&#xff0c; 帮助我们完成数据的抓取。 1、在PyCharm中安装selenium 点击PyCharm界面的下方Terminal…

开源项目datavines内存泄漏问题分析

应用程序开启JMX java -Dspring.profiles.activemysql -Dcom.sun.management.jmxremote.port1099 -Dcom.sun.management.jmxremote.sslfalse -Dcom.sun.management.jmxremote.authenticatefalse -Djava.rmi.server.hostname127.0.0.1 -jar dataVines.jar 通过jdk自带工具&…

探索SOLIDWORKS 3DE云平台:产品数据管理与协作的新时代

SOLIDWORKS 3DE云平台为企业提供了基于云端的全方位解决方案&#xff0c;涵盖了产品设计、仿真验证、制造与生产、市场与营销、数据管理和生命周期等领域。通过这一平台&#xff0c;企业能够将创意转化为现实所需的一切资源。同时&#xff0c;3DE云平台还帮助企业摆脱了IT限制&…

类属性修改(为什么python类不具备被赋值能力?)

为什么python类不具备被赋值能力&#xff1f;&#xff0c;用魔术方法收集实参&#xff0c;在类中可以定义方法处理实际参数&#xff0c;实现对类“赋值”。 (笔记模板由python脚本于2023年11月15日 12:45:27创建&#xff0c;本篇笔记适合初通Python类class的coder翻阅) 【学习的…

数据结构第四课 -----线性表之队列

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

高性能架构设计

1. 引言 高性能架构设计在现代系统中至关重要&#xff0c;它能够应对大规模的数据和用户需求增长&#xff0c;提供优秀的用户体验和实时数据处理能力。同时&#xff0c;它也是解决"三高"问题&#xff08;高并发、高性能、高可用性&#xff09;的关键。 2. 高性能定…

三维模型的顶层合并构建的点云抽稀关键技术分析

三维模型的顶层合并构建的点云抽稀关键技术分析 倾斜摄影超大场景的三维模型的顶层合并通常会生成大量的点云数据&#xff0c;这对于后续处理和应用可能会带来一些挑战。为了减少数据存储和处理的复杂性&#xff0c;可以采用点云抽稀处理技术来降低点云密度和数据量。本文将对几…

weblogic多机集群节点管理服务配置

1.安装启动管理端控制台略过了&#xff0c;登录到控制台&#xff0c; 2.创建集群&#xff0c;配置信息如图&#xff0c;基本默认就行&#xff0c;点完成。点击集群名称&#xff0c;添加服务器 前两个是管理机上的两个服务&#xff0c;后面是另个一个机器的两个节点服务&#…

sql查询结果跟in传入参数顺序一致

Orcle、postgresql、td-sql中可以使用如下语句 select namefrom tbl_user_infowhere id in (4,3,1)order by instr(4,3,1,id);查询结果&#xff1a;

node将package.json中的包降为低版本或者升级为高版本

前言 比如现在你用某个包的当前版本&#xff0c;但是你安装的版本高了&#xff0c;那么你应该这么做 1.首先删除node项目中的node_modules目录&#xff0c;防止安装时的包不一致 如果没安装就忽略 例如将package.json中的view-design包降为^4.6.1,当前view-design的版本为^4.…

基于Gin+Gorm框架搭建MVC模式的Go语言企业级后端系统

文/朱季谦 环境准备&#xff1a;安装Gin与Gorm 本文搭建准备环境&#xff1a;GinGormMySql。 Gin是Go语言的一套WEB框架&#xff0c;在学习一种陌生语言的陌生框架&#xff0c;最好的方式&#xff0c;就是用我们熟悉的思维去学。作为一名后端Java开发&#xff0c;在最初入门…

优思学院|一文快速看懂TRIZ原理

在创新领域&#xff0c;TRIZ被翻译为发明问题的解决理论。TRIZ理论深刻揭示了创造发明的内在规律和原理&#xff0c;专注于澄清和强调系统中存在的矛盾&#xff0c;旨在完全解决这些矛盾&#xff0c;实现最终的理想解决方案。实践证明&#xff0c;运用TRIZ理论不仅能够极大地加…

BUUCTF 面具下的flag 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 下载附件&#xff0c;得到一张.jpg图片。 密文&#xff1a; 解题思路&#xff1a; 1、将图片放到Kali中&#xff0c;使用binwalk检测出隐藏zip包。 使用foremost提取zip压缩包到output目录下 解压zip压缩包&…

Linux Ubuntu系统中添加磁盘

在学习与训练linux系统的磁盘概念、文件系统等&#xff0c;需要增加磁盘、扩展现有磁盘容量等&#xff0c;对于如何添加新的磁盘&#xff0c;我们在“Linux centos系统中添加磁盘”中对centos7/8版本中如何添加、查看、删除等&#xff0c;作了介绍&#xff0c;而对Ubuntu版本中…

OpenELA 正式公开 Enterprise Linux 源代码

导读近日消息&#xff0c;在红帽&#xff08;Red Hat&#xff09;宣布不再对外公开 Red Hat Enterprise Linux&#xff08;RHEL&#xff09;源代码之后&#xff0c;同属 Linux 领域的甲骨文、SUSE 及 CIQ 宣布成立了 Open Enterprise Linux Association&#xff08;OpenELA&…