wx小程序web-view uniapp H5

news2024/11/18 5:39:56

       最近微信小程序对有视频播放的审核严,需要提供“文娱类资质”。而申请这个资质比较繁琐。所以我们在小程序上用web-view做跳转到H5,这是小程序关于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/1211084.html

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

相关文章

软件性能测试学习笔记(LoadRunner):从零开始

文章目录 概述LoadRunner的使用创建编辑脚本&#xff08;Virtual User Generator&#xff09;集合点思考时间事务检查点关联参数化 运行负载测试&#xff08;Controller&#xff09; 性能测试报告场景设置表格测试指标记录表 其他的杂谈内容 概述 软件的性能测试与软件的功能测…

荧光量子效率积分球的优势是什么

荧光量子效率积分球是一种测量设备&#xff0c;可以用于测量荧光材料在特定波长下的量子效率。它由一个具有高朗伯特性的漫反射PTFE材料制成&#xff0c;具有高达99%的反射率和朗伯特性。积分球有三个开口&#xff0c;分别为光入射口、样品口和光出射口。光入射口设置有一准直镜…

2023年【电工(高级)】考试报名及电工(高级)考试试卷

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年【电工&#xff08;高级&#xff09;】考试报名及电工&#xff08;高级&#xff09;考试试卷&#xff0c;包含电工&#xff08;高级&#xff09;考试报名答案和解析及电工&#xff08;高级&#xff09;考试试卷…

Linux 读写权限的配置

文章目录 Linux文件权限详解 一、文件权限二、修改文件访问权限的方法三、UMASK值四、三种特殊权限suid、sgid、sticky&#xff08;sticky权限工作环境中相对常用&#xff09;五、ACL访问控制列表六、文件权限操作的常用命令 Linux文件权限详解 Linux系统中不仅是对用户与组根…

锐捷 Smartweb管理系统命令注入漏洞复现 [附POC]

文章目录 锐捷 Smartweb管理系统命令注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 锐捷 Smartweb管理系统命令注入漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测…

学生台灯护眼灯需要多少W?小学生合适的五款护眼台灯推荐

台灯如何选择&#xff0c;随着人们生活水平的提高及科技的不断进步&#xff0c;台灯的品质也得到了极大的提高&#xff0c;在生活中很多时候都需要使用台灯&#xff0c;但是市面上的台灯那么多&#xff0c;台灯如何选择。学生护眼台灯选择多少瓦比较好呢&#xff1f;选择12w-20…

一文搞懂Transformer

近期Transformer系列模型的出现&#xff0c;增加了CV领域的多样性。但是Transformer这一不同领域的模型对学习者来说需要一个细致的学习过程.下面就是本菜鸟总结学习路线。 Transformer是基于attention机制。而attention机制又在Encoder、Decode中。本篇博客将从Attention->…

洗内裤的小洗衣机买啥牌子的?口碑好的迷你洗衣机推荐

迷你洗衣机是一种小型的家用洗衣设备&#xff0c;主要是由于其小巧便携而且实用性高的特点&#xff0c;非常适用于小户型家庭、单身人士、学生宿舍等场所&#xff0c;如今随着迷你洗衣机在市场上越来越受到消费者的青睐。那么&#xff0c;迷你洗衣机哪个牌子好用又不贵呢&#…

RabbitMQ-高级篇-黑马程序员

代码&#xff1a; 链接&#xff1a; https://pan.baidu.com/s/1nQBIgB_SbzoKu_XMWZ3JoA?pwdaeoe 提取码&#xff1a;aeoe 在昨天的练习作业中&#xff0c;我们改造了余额支付功能&#xff0c;在支付成功后利用RabbitMQ通知交易服务&#xff0c;更新业务订单状态为已支付。 但…

uniapp开发ios上线(在win环境下使用三方)

苹果 1、win环境下无法使用苹果os编译器所以使用第三方上传工具&#xff0c;以下示例为 初雪云 &#xff08;单次收费&#xff0c;一元一次&#xff09; 初雪云&#xff08;注册p12证书&#xff09;&#xff1a;https://www.chuxueyun.com/#/pages/AppleCertificate 苹果开发者…

LeetCode - 232.用栈实现队列 225.用队列模拟实现栈 (C语言,配图)

目录 232.用栈实现队列 225.用队列模拟实现栈 注&#xff1a;本文是基于C语言实现的代码&#xff0c;所以栈和队列是在力扣上制造实现的&#xff0c;如果你使用C等语言&#xff0c;可以忽略前面相当大部分的代码。 在栈模拟实现栈和队列之前&#xff0c;我们先来复习一下栈和…

【LeetCode】每日一题 2023_11_14 阈值距离内邻居最少的城市(Floyd 最短路算法)

文章目录 刷题前唠嗑题目&#xff1a;阈值距离内邻居最少的城市题目描述代码与解题思路随机挑选一个大佬的题解 CV 结语 刷题前唠嗑 LeetCode? 启动&#xff01;&#xff01;&#xff01; 今天的题目也是重量级&#xff0c;看到这个题目的名字&#xff0c;看到这张图&#xf…

MySQL My.cnf参数梳理与延伸 (MYSQL 8 cache and buffer类)

开头还是介绍一下群&#xff0c;如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,Redis, Oceanbase, Sql Server等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;&#xff08;…

Python兼职接单(非常详细)从零基础入门到精通,看完这一篇就够了

当下python需求量还是挺大的&#xff0c;对于想要做兼职的程序员还是挺友好的&#xff1a;起码不用愁找不到&#xff1b;目前来看&#xff0c;其兼职方向大致有三&#xff1a;开发、爬虫、数据分析。 就开发来说&#xff0c;目前python的轮子在Github上一抓一大把&#xff0c;…

数据结构笔记:R树

R-trees: a dynamic index structure for spatial searching 1984 1 介绍 R树可以看作B树再高维空间的扩展。它很好的解决了在高维空间搜索等问题。 采用了B树分割空间的思想&#xff0c;并在添加、删除操作时采用合并、分解结点的方法&#xff0c;保证树的平衡性R树就是一棵…

Nginx配置开启HTTPS

获取证书文件 Nginx 开启SSL server {listen 443 default ssl;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;proxy_set_header Host $host;ssl_certificate /usr/local/nginx/cert/server.pem;ssl_certificate_key /usr/local/ngin…

Sealos 云操作系统一键集成 runwasi,解锁 Wasm 的无限潜力

WebAssembly (通常缩写为 Wasm) 是一种为网络浏览器设计的低级编程语言。它旨在提供一种比传统的 JavaScript 更快、更高效的方式来执行代码&#xff0c;以弥补 JavaScript 在性能方面的不足。通过使用二进制格式&#xff0c;WebAssembly 能够提供比传统 JavaScript 更快的解析…

印刷企业使用数字工厂管理系统前后有什么变化

随着科技的飞速发展&#xff0c;数字工厂管理系统已经逐渐渗透到印刷企业的各个环节。本文将通过分析印刷企业在使用数字工厂管理系统前后的变化&#xff0c;探讨这一技术如何为印刷行业带来革新。 一、使用前的状况 在使用数字工厂管理系统之前&#xff0c;印刷企业的生产方式…

从理论到实践:深度解读BIO、NIO、AIO的优缺点及使用场景

文章目录 BIO优缺点示例代码 NIO优缺点示例代码 AIO优缺点示例代码 总结 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 BIO、NIO和AIO是Java编程语言中用于处理输入输出&#xff08;IO…

一则DNS被重定向导致无法获取MySQL连接处理

同事反馈xwik应用端报java exception 获取MySQL连接超时无法连接到数据库实例 经过告警日志发现访问进来的IP地址数据库端无法被解析&#xff0c;这里可以知道问题出现在Dns配置上了 通过以上报错检查/etc/resolve.conf 发现namesever 被重定向设置成了114.114.114.114 域名 …