微信小程序-video禁止拖动进度条

小程序项目中涉及到视频功能，需求就是禁止拖动进度条。但是小程序video并没有提供一个属性用来禁止进度条拖动

以上是从微信官方论坛中找到的答案，就是说如果想实现禁止拖动进度条，要么就是隐藏掉，要么就是自己自定义一个进度条。如果用show-progress=‘{{false}}’，这个属性隐藏掉了进度条，那video原本自带的底部控制栏中（播放/暂停 ，进度时间，进度条，总时长，全屏/退出全屏），这些按钮中，就只剩下全屏/退出全屏了。

开始，我决定自定义进度条，但是我发现video里嵌套的组件，虽说官网给出的是可以使用view，但是只有界面效果，却触发不了view对应的方法，也就是说，我用slider组件自定义了一个进度条，并且禁用，然而不管用。

于是乎，几经波折，来回调试，最终还是决定用video自带的控制栏，通过在进度条位置，设置一个遮罩层，再设置一下透明度，这样，光标点不到进度条，就拖动不了了。当然，这个遮罩层也是要用<cover-view>

在设置遮罩层时，还遇到了问题，就是position: relative; opacity:0;无效！！！

改成这样：：position: absolute;opacity:0;模拟器，安卓手机上都没问题，iOS真机上无效！！！

但是我发现，将透明度改大一点，大于0，iOS上就可以了。

所以，我用

wxgetSystemInfo,来判断设备，如果是iOS，那就设置透明度为01，如果是安卓，就为0

其实到这里，问题基本解决了，但是还有一点点瑕疵，就是因为保留了本身的控制栏，那全屏/退出全屏的按钮功能要保留，所以遮罩层不能罩到要用的按钮，不然就都点击不了，所以在使用的按钮上我用view，设置了一个跟遮罩层一样颜色一样透明度的还补全，这样从视觉效果上才算是过关。

上方的video标签写好，给src一个定义的变量URL_data赋值；定义一个播放标题title_video

下面的列表数据，应该每个列表item里面包含该数据对应的src值，点击列表item的时候，获取该item的数据，将获取到的item数据赋值给URL_data，并将获取到的item的标题数据赋值给title_video

会一直卡在那里,要么是黑屏但有声音,要么是黑屏也没有声音,总之不能正常播放

在播放过程中会卡顿,或者花屏

在video标签中加入         custom-cache="{{false}}"

反正加入就是了

有上翻的动画，有商品展示，有分享，以及跳到视频库。之前网上找了很多，说swiper不能套video,现在已经可以了，第二种是把封面平铺下来，滚动的是封面那种，效果不好

首先用一个cover-view来控制上下滚空，监听touch事件,让swiper的index+1或者-1

swiper包裹这video,swiper不能自动滚动，但是必须要设置衔接的属性。

js里面onshow的那个地方是我们点击tabbar的时候不需要再次调接口，做的处理，如果不是tabbar,可以直接再onload里面调后端数据

注意的是，在开发中，只要不是本地的视频，掉了接口，然后ios的前两个视频就是黑屏，后来加上了custom-cache="{{false}}">就解决了

注意的另一个兼容的是，只有cover-view才能覆盖再原生video之上，像轮播购买记录的那个地方，cover-view不能包swiper,所有有的手机是被视频遮住的

如果不妨到tabbar里的话，就是全屏播放了，头部自定义，然后左右两边也没有黑色没撑满了

以上就是关于微信小程序-video禁止拖动进度条全部的内容，包括:微信小程序-video禁止拖动进度条、微信小程序点击列表数据播放视频、关于微信小程序在iOS下视频播放卡顿,无法播放问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！