IOS 微信内嵌网页 h5 video 标签点击无响应，长按变成了点击

最新推荐文章于 2023-03-16 13:51:39 发布
最新推荐文章于 2023-03-16 13:51:39 发布
阅读量2.5k 收藏
点赞数
分类专栏： JS 文章标签： 微信h5 video ios微信坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyc2056/article/details/80706400
版权 
<video  webkit-playsinline playsinline src="/b8f56f03-45be-4150-aed4-151065c5cb3b.mp4" poster="/img/video.png"></video>';
webkit-playsinline  playsinline 两个属性一定要加，才可以有点击事件

但是添加后变成了内嵌播放，需求是全屏播放，就是交给默认播放器去播放。

这时候只需要 <video></video> 内容加载完成，添加到html 完成后，再利用js 异常video的 

webkit-playsinline  playsinline

两个属性后，就可以响应点击事件，而且可以全屏。这个问题在ios10 上不存在，只是在ios11上

苍雨剑流
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
小程序 H5页面video的适配问题
weixin_43850726的博客
07-06 937
小程序 H5页面video的适配问题​ 事件背景：事情是这样的，我们和另一公司一起为甲方爸爸做个小程序，我们提供H5页面，另一方提供小程序，项目已经交付，但是后来呢，顾客反馈，H5页面的视频无法播放；额，bug来了 排查问题： 1.微信直接打开h5网页链接，电脑打开h5网页链接，没有异常； 2.将h5嵌套到我们自己的小程序中，通过微信开发者工具打开，没有异常； 3.将小程序上传体验版，测试手机打开，呜呜，ios没有问题，android不显示； 终于定位：1小程序与微信版本更新导致的，系统问题..
H5网页中的video标签不能自动播放并且play或者click播放按钮无效的原因及解决办法
最新发布
先飞网校
02-05 1945
于是，获取video标签，然后静音：video.muted=true;然后再播放：video.play()获取按钮和video都是可以的，但是无法进行下一步，除非有互动动作，比如点击一下页面任意位置。2、用js获取video标签，play。1、用js获取播放按钮，click；
H5中ios卡顿问题
weixin_40667880的博客
10-08 912
H5中ios卡顿问题解决方法如下： -webkit-overflow-scrolling: touch;
在微信内置浏览器 ios video再次点击事件没反应 video有些视频上下出现空白原因
感谢遇到的每一个人的博客
11-17 3535
问题一：video再次点击事件没有反应，Android正常 解决办法:在video 标签中加入 ：webkit-playsinline playsinline &lt;div class="dis_video"&gt; &lt;video webkit-playsinline playsinline id="myVideo" onclick="stopPlay...
H5手机端iOS，安卓长按事件的解决方案
honourable的博客
03-05 5393
之前做手机端游戏的开发，遇到了需要点击事件、长按事件来触发‘上下左右’的场景，由于项目很急(好吧，其实是自己懒)，网上直接搜索插件，痛快，不过提交测试悲剧了，ios非常正常，安卓就不行了，赶紧看了源码，我的天，看不懂，压缩的什么鬼(此处不贴图了)。好吧，还是自己写吧，仔细回想了一下，自己的出发点有问题，点击事件用click事件，长按事件找插件，用类似于longPress之类的api。之后想起来to...
微信小程序webview实现长按点击识别二维码功能示例
10-17
在微信小程序中，为了实现长按点击识别二维码的功能，我们需要结合`webview`组件和微信提供的JS-SDK。以下是一个详细的步骤和知识点说明： 1. **引入JS-SDK**: 在HTML文档中，首先引入微信提供的JS-SDK库，例如：`...
ios微信浏览器返回不刷新问题完美解决方法
08-29
iOS 微信浏览器返回不刷新问题是指在 iOS 设备上使用微信浏览器时，用户点击返回按钮后，页面不刷新的问题。这种问题会导致用户体验差，影响应用程序的整体性能。 为什么会出现 iOS 微信浏览器返回不刷新问题？ ...
省钱兄短剧短视频视频滑动播放模块源码支持微信小程序h5安卓IOS
10-30
标题中的“省钱兄短剧短视频视频滑动播放模块源码支持微信小程序h5安卓IOS”表明这是一个用于开发视频播放功能的源代码库，它适用于多种平台，包括微信小程序、HTML5（h5）以及Android和iOS移动操作系统。...
iOS实现点击图片放大和长按保存图片的示例
08-27
iOS实现点击图片放大和长按保存图片的示例 在 iOS 开发中，经常会遇到上传图片的需求，例如实名认证上传身份证、绑定银行卡等功能。在实际操作中，会涉及到上传图片，在页面布局时，可能图片不是一张，考虑到布局的...
ios系统苹果手机微信端取消默认长按事件
KenThomas的博客
12-19 1936
ios系统苹果手机微信端取消默认长按事件 css代码： body{ -webkit-user-select: none; /文本不能被选择/ user-select: none; -webkit-touch-callout: none; } javascript代码： document.oncontextmenu=function(e){ //或者return false; e.preventDe...
安卓html点击不出结果,[HTML]安卓下<video>无法点击播放
weixin_29051811的博客
07-17 143
2016总结&amp&semi;2017计划2016总结 总体而言,上半年比较勤快,下半年偷懒了.下半年仔细看了Barfoot的书,收获很大. 2017计划 目前打算写以 ...java-String Date Calendar之间的转换1.Calendar 转化 String Calendar calendat = Calendar.getInstance(); SimpleDa...
vue-video-player的使用方法，vue-video-player在移动端点击画面不触发事件&&不能暂停播放的解决方法
insgo的博客
01-06 8019
单页面引用 import "video.js/dist/video-js.css"; import { videoPlayer } from "vue-video-player"; import VideoPlayerOption from "@/app/com/bean/VideoPlayerOption"; html <div class="video"> <video-player class="video-player vjs-custom-skin"
使用video的那些坑
transform的博客
12-28 6707
2，video标签api中的加载事件支持不太好：在现代浏览器中应该使用监听事件或者jq封装的on事件。而不是用onclick=function（）{}这样的样式 videoEle.addEventListener("durationchange",function(e){        //测试4.2下只执行durationchange事件。        $(videoEle).sib
HTML5的Video标签的属性,方法和事件汇总
lxw1844912514的博客
05-26 1778
标签的属性 src ：视频的属性 poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度 html 代码 <<span class="hljs-title" style="color: ...
video 标签 监听播放、暂停、结束等事件
热门推荐
c_qianxia5040的博客
01-30 1万+
<video id="video" controls="controls"> <source type="video/mp4" src="xxx.mp4"> </video> 获取视频总时长 var elevideo = document.getElementById("video"); elevideo.addEventListener('loadedmetadata', function () { //加载数据 //视频的总长度
video 标签
过客如期的博客
07-19 2886
一，video 1，在H5之前要想在网页中播放视屏，需要相关的插件，例如flash。H5集成了视频组件，可以轻松的在网页上添加视频。 2.在 <video></video> 标签中间的内容，是针对浏览器不支持此元素时候的降级处理。 二，video标签的属性 三，video标签支持的方法 四，video标签支持的事件 .........
给video标签加一些属性，微信调用h5原生video
weixin_43960538的博客
12-23 720
给video标签加一些属性，调用h5原生video <video class="video-source"     width="100%"   height="240px"  /*如果有封面，请设置高度*/     controls  /*这个属性规定浏览器为该视频提供播放控件*/   &nb
关于VIDEO.JS播放器控制栏播放按钮点击问题
lrbtony的博客
03-16 2117
关于如何调用video.js组件作为播放器实现视频播放功能，网上有很多相关帖子，这里就不详细展开了。但在众多帖子里面，都没有提到网页版video的控制栏播放按钮点击问题，特此留贴记录一番。关键点在于@play="videoPlay"和@pause="videoPause"这两个参数就是设置对应控制台播放暂停按钮点击方法。虽然通过别的代码已经实现了点击整个屏幕范围播放停止功能，但是对于这个控制栏按钮点击无效的小瑕疵，还是必须解决的。经过网上一轮搜寻，发现它可以有一些方法去实现这个按钮的点击。
IOS微信H5跳转小程序
05-18
要在 iOS 微信 H5 页面中跳转到小程序，可以使用以下步骤： 1. 在微信公众平台上创建一个小程序。 2. 在小程序后台设置小程序的 AppID。 3. 在 H5 页面中添加以下代码： ``` 点击跳转到小程序 ``` 其中，`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苍雨剑流

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值