微信小程序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真机上播放不了,还找了各种编码资料,最后才发现是这个视频有问题,重新下载在上传到七牛,解决了。找对思路真的很重要。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

003.文件描述符、重定向

1、文件描述符 文件描述符是与输入和输出流相关联的整数。最广为人知的文件描述符是stdin、stdout和stderr。我们可以将某个文件描述符的内容重定向到另一个文件描述符中。 在编写脚本的时候会频繁用到标准输入&#xff08;stdin&#xff09;、标准输出&#xff08;stdout&am…

基于单片机无人售货机仿真及源程序

一、系统方案 1、本设计采用51单片机作为主控器。 2、商品选择&#xff0c;购买数量选择&#xff0c;投币&#xff0c;液晶1602显示。 3、电机模拟出货。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 void lcd_1602_init() //LCD1602初始…

tracert命令

前言&#xff1a;今天在阅读“Web性能权威指南”这本书的时候&#xff0c;发现 tracert 这个命令挺有意思的&#xff0c;在分析网络性能瓶颈的时候也能使用的到&#xff0c;在此就小记一笔以备后用。 1&#xff1a;作用 tracert 是一个简单的网络诊断工具&#xff0c;可以列出…

GPT 5也要来了?看看​OpenAI CEO Sam Altman最近的采访

OpenAI CEO Sam Altman 在接受金融时报采访中&#xff0c;透露了更多OpenAI的计划&#xff1a;他们正在寻求从微软获得更多资金支持&#xff0c;以构建真正的通用人工智能&#xff08;AGI&#xff09;。同时还透露了关于GPT 5的一些信息和公司AGI愿景目标&#xff01;他认为&am…

【MATLAB源码-第77期】基于matlab的OCDM系统在AWGN信道下理论误码率和实际误码率对比仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 正交线性调频分频复用&#xff08;OCDM&#xff0c;Orthogonal Chirp Division Multiplexing&#xff09;是一种无线通信技术&#xff0c;它基于啁啾信号的原理。啁啾信号是一种频率随时间变化的信号&#xff0c;通常频率是线…

在线聊天系统,即时通讯系统

在线聊天&#xff0c;即时通讯系统 可以添加好友&#xff0c;在线聊天&#xff0c;添加群聊&#xff0c;群聊&#xff0c;发送各种类型的文件&#xff0c;文字&#xff0c;图片&#xff0c; 还有各种表情包&#xff0c;系统基于springboot和websocket网络通讯&#xff0c;类似于…

电脑桌面任务提醒便签选择哪一个好用?

伴随着科技现代化的发展&#xff0c;电脑成为大家日常办公及生活中必不可少的工具&#xff0c;如在日常办公中大家可以借助电脑上的任务提醒便签来合理规划自己的工作时间&#xff0c;督促任务的完成&#xff0c;提高工作的效率。 当前&#xff0c;支持在电脑上安装的任务提醒…

Centos8配置Zabbix5.0中文汉化

1.点击【Sign in】按钮&#xff0c;输入用户名和密码进入Zabbix的首页&#xff0c;结果如图。 2.点击左边导航栏的【User settings】链接&#xff0c;进入用户个性化设置界面&#xff0c;结果如图。 3.在搭建Zabbix的虚拟机上使用yum命令下载中文包。 yum install glibc-langpa…

自己动手写编译器:实现编译器工具链中的词法解析工具 Flex

我们在上一节以手动的方式实现了一个词法解析器的 c 语言源码。它主要包含若干部分&#xff0c;第一部分就是输入缓存系统&#xff0c;用于从磁盘文件或者控制台上获取要解析的字符串。第二部分是数据读入逻辑&#xff0c;它主要通过调用输入系统的接口获得要解析的字符串&…

时间序列预测-Transformer,Informer,Autoformer,FEDformer复现结果

实验环境硬件规格或软件版本号CPUInter Xeon E5-2678 v3 2.50GHzGPUNVIDIA TITAN X (Pascal)内存32.0GBPython3.7.3Pytorch1.2.0CUDA11.6 实验结果 可视化实验结果 见资源

邮件钓鱼-邮件来源伪造-SPF绕过-setoolkitgohishswaks钓鱼

0x00 SPF简介 SPF即发送方策略框架&#xff0c;某种邮件服务器会有自己的SPF策略设定&#xff0c;可以设定SPF为只允许某些主机发送邮件等&#xff0c;当设定后第三方就无法伪造成邮件服务器的管理员对用户下发邮件。 是否存在SPF的验证&#xff1a; linux下&#xff1a;dig…

沉浸式航天vr科普馆VR太空主题馆展示

科普教育从小做起&#xff0c;现在我们的很多地方小孩子游乐体验不单单只有草坪玩耍体验&#xff0c;还有很多科普知识的体验馆和游玩馆。虽然现在我们还不能真实的上太空或者潜入海底&#xff0c;但是这些现在已经可以逼真的展示在我们面前。通过一种虚拟现实技术手段。人们带…

MySQL是如何进行排序的,ORDER BY是如何执行的

MySQL 会给每个线程分配一块内存用于排序&#xff0c;称为 sort_buffer。 假设找出在杭州居住的人&#xff0c;按名字排序前1000个人&#xff08;假设city有索引&#xff0c;那么非常舒服&#xff0c;不用全表扫描&#xff09; select city,name,age from t where city杭州 or…

测试问题---APP闪退

APP闪退的原因有以下几种&#xff1a; APP本身的程序错误或bug&#xff0c;导致在运行过程中出现异常或崩溃&#xff0c;例如内存泄漏、空指针、死循环等。这种情况下&#xff0c;需要开发者对APP进行调试和修复&#xff0c;或者用户更新到最新版本的APP。 APP与系统或其他APP…

U盘变成了.lnk,怎么处理

没曾想客户电脑是是不是有个病毒啥的&#xff0c;把我的U盘直接干成了只有一个.lnk的一个快捷方式&#xff0c;后面百度找了很多方法&#xff0c;最后找到了一个非常实用的方法&#xff0c;后整理了一下交给大家 方法如下&#xff1a; 1.找到电脑U盘文件 2.搜索框中输入你之…

解决yum源无法安装nginx问题以及简单部署nginx

问题&#xff1a; 我们在使用centos7时&#xff0c;软件安装nginx时大概都会出现无法获取包的情况。 解决办法&#xff1a; 添加nginx的下载源到yum源中 rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm如上图所示&a…

[SIGGRAPH2023-best]3D Gaussian Splatting for Real-Time Radiance Field Rendering

标题&#xff1a;3D Gaussian Splatting for Real-Time Radiance Field Rendering 链接&#xff1a;https://arxiv.org/pdf/2308.04079.pdf 本文提出了一种基于3D高斯体进行场景重建的方案&#xff0c;并提供了高效的渲染器实现。其重建精度&#xff0c;训练速度和推理速度均…

11111

#include <iostream> #include <vector> #include <queue> #include <algorithm>using namespace std;// 边的结构体 struct Edge {int src, dest, weight;// 按照权重进行排序bool operator<(const Edge& other) const {return weight < ot…

SDL2 播放音频(MP4)

1.简介 这里引入FFmpeg库&#xff0c;获取音频流数据&#xff0c;然后通过FFmpeg将视频流解码成pcm原始数据&#xff0c;再将pcm数据送入到SDL库中实现音频播放。 2.FFmpeg的操作流程 注册API&#xff1a;av_register_all()构建输入AVFormatContext上下文&#xff1a;avform…