微信小程序之PC端不支持 wx.previewMedia 方法故用自定义轮播图进行模拟照片视频的播放

微信小程序自带的方法 wx.previewMedia 预览图片和视频。
图片 wx.previewImage 支持PC端可以进行播放，视频没有找到对应的方法
在真机和手机端都可以进项展示，PC端不支持 wx.previewMedia 展示，无法正常使用
所以利用判断当前登录设备是否是移动端还是PC端,PC端进行创建轮播图播放模拟移动端

当前使用界面

//index.wxml 文件
<view>
<!-- 图片 --><image wx:if="{{util.isImage(jmImHistory.msg)}}" name='chatImg' src='{{globalConfig.ossPath}}{{jmImHistory.msg}}' itemprop='thumbnail' catchtap='clickImageVideo' data-src='{{globalConfig.ossPath}}{{jmImHistory.msg}}'/>
<!-- 视频 --><video object-fit='{{contain}}' contain='{{true}}' wx:else catchtap='clickImageVideo'  data-src='{{globalConfig.ossPath}}{{jmImHistory.msg}}' id="{{globalConfig.ossPath}}{{jmImHistory.msg}}">
<!-- 视频播放图标 --><image src='../../chat/images/bofang.png' style='width:100%;height:75px;position:absolute;'></image>
<!-- 头像图标 --><image src='{{globalConfig.ossPath}}{{jmImHistory.msg}}?spm=a2c4g.11186623.2.1.yjOb8V&x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast'style='width:100%;height:75px;'></image></video>
</view><wxs module="util">
// 判断是否位图片
var isImage=function(filename) {var pos = filename.lastIndexOf('.');var suffix = '';if (pos != -1) {suffix = filename.substring(pos);suffix = suffix.replace(".","");suffix = suffix.toLowerCase();}var imageSuffix=['jpg','jpge','gif','png','bmp','svg','webp'];if(imageSuffix.indexOf(suffix)>-1){return true;}return false;
}
module.exports.isImage = isImage;
</wxs>

//index.js 文件
data: {windowsOrMac: false,//判断是否PC端登录   falsa:ios、android、devtools    true:windows、mac
}//   拿到  当前 登录  设备  类型
deviceType(){const res = wx.getSystemInfoSync()// console.log('wx.getSystemInfoSync', res)// console.log('wx.getSystemInfoSync', res.model)// console.log('wx.getSystemInfoSync', res.platform)this.setData({windowsOrMac: res.platform == 'windows' || res.platform == 'mac'? true : false})
}// 点击图片/视频 可以进行放大并进行左右切换clickImageVideo: function (e) {this.deviceType()let windowsOrMac = this.data.windowsOrMacif(windowsOrMac){ //PC端console.log("点击图片/视频",e);let srcIndex = 0var current = e.currentTarget.dataset.src//所有消息var allMsg = this.data.MsgImgesList// 拿到图片，视频消息 相关数据 var videoImageList = []allMsg.map((item,index)=>{// 判断是否包含图片。视频后缀var pos = item.lastIndexOf('.');var suffix = '';if (pos != -1) {suffix = item.substring(pos);suffix = suffix.replace(".","");suffix = suffix.toLowerCase();}var videoSuffix = ['mp4','mov','m4v','3gp','avi','m3u8','webm'];let videoSrc = {id: index,url: item}videoSuffix.indexOf(suffix)>-1 ? videoImageList.push(videoSrc) : ''var imageSuffix=['jpg','jpge','gif','png','bmp','svg','webp'];let imageSrc = {id: index,url: item}imageSuffix.indexOf(suffix)>-1 ? videoImageList.push(imageSrc) : ''})// 拿到当前点击的位第几个videoImageList.map((item,index)=>{console.log(item);if(item.url == current){srcIndex = indexreturn}})wx.navigateTo({url: '/pages/chat/videoSwiper/index',  // 跳转到自定义轮播图success(res){console.log(res);res.eventChannel.emit('currentVideoSrc',{data:srcIndex}) // 传递图片，视频数组res.eventChannel.emit('videoSrcList',{data:videoImageList}) // 传递 当前点击的第几个} ,  fail(res){console.log(res);}})}else{ //移动端var current = e.currentTarget.dataset.srcvar allMsg = this.data.MsgImgesList// 拿到地址var ImageVideoList = []allMsg.map((item,index)=>{var pos = item.lastIndexOf('.');var suffix = '';if (pos != -1) {suffix = item.substring(pos);suffix = suffix.replace(".","");suffix = suffix.toLowerCase();}var Videoffix = ['mp4','mov','m4v','3gp','avi','m3u8','webm'];let newVideoUrlList = {url: item,type: 'video',}Videoffix.indexOf(suffix)>-1 ? ImageVideoList.push(newVideoUrlList) : ''var imageSuffix=['jpg','jpge','gif','png','bmp','svg','webp'];let newImageUrlList = {url: item,type: 'image',}imageSuffix.indexOf(suffix)>-1 ? ImageVideoList.push(newImageUrlList) : ''})var currentIndex = 0ImageVideoList.map((item,index)=>{if(item.url == current){currentIndex = index}})console.log(ImageVideoList);wx.previewMedia({current: currentIndex,sources: ImageVideoList})}},

自定义轮播图

 // index.wxml<swiper indicator-dots='true' indicator-color='transparent' indicator-active-color='transparent' class="swiper" bindchange="handleSwiper" current="{{indexCurrent}}" id="{{indexCurrent}}">  <block wx:for="{{videoUrls}}"  wx:key="index"  wx:for-index="index">  <swiper-item item-id="3">  <image wx:if="{{util.isImage(item.url)}}" name='chatImg' src='{{item.url}}' class="slide-image" style='display:inline-block;width:100%;height:100%;'/><video wx:else id="myVideo{{index}}" data-index="{{index}}" enable-play-gesture="{{true}}" src="{{item.url}}" class="slide-image" style='display:inline-block;width:100%;height:100%;'></video> </swiper-item>  </block>
</swiper>
<!-- 轮播图计数 -->
<view class="JSSwiper">{{indexCurrent + 1}} / {{videoUrls.length}}</view> <wxs module="util">
// 判断是否位图片
var isImage=function(filename) {var pos = filename.lastIndexOf('.');var suffix = '';if (pos != -1) {suffix = filename.substring(pos);suffix = suffix.replace(".","");suffix = suffix.toLowerCase();}var imageSuffix=['jpg','jpge','gif','png','bmp','svg','webp'];if(imageSuffix.indexOf(suffix)>-1){return true;}return false;
}
module.exports.isImage = isImage;
</wxs>

 // index.jsPage({data: {videoUrls: [],indexCurrent:0,currentVideoSrc:""},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {const eventChannel = this.getOpenerEventChannel();// 图片视频地址eventChannel.on('currentVideoSrc', (res) => {this.setData({indexCurrent: res.data})console.log(this.data.indexCurrent);})// 当前点击的第几个eventChannel.on('videoSrcList', (res) => {console.log(res)this.setData({videoUrls: res.data})console.log(this.data.videoUrls);})},//左右切换 轮播图handleSwiper(e){console.log(e);// 判断当前视频 播放 停止其他视频播放var curIdx = e.detail.current;var videoContextPrev = wx.createVideoContext('myVideo' + this.data.indexCurrent)if (this.data.indexCurrent != curIdx) {videoContextPrev.pause()}this.setData({indexCurrent: curIdx})var videoContextCurrent = wx.createVideoContext('myVideo' + curIdx)videoContextCurrent.play()},
})

 // index.wxss
.swiper{height:100vh; position: relative;
}
.slide-image{ width: 100%; display: block;
}
.JSSwiper{position: absolute; top: 10px;width: 100%; margin-left: 49%; color: #fff;
}

移动端

PC端

微信小程序之PC端不支持 wx.previewMedia 方法故用自定义轮播图进行模拟照片视频的播放相关推荐

微信小程序可添加图片描述的wx.previewMedia
前言产品说什么也要在大图预览下加图片描述,我说微信小程序不支持,wx.previewImage和wx.previewMedia都是我们自己改不了的.但是无奈非得要,那我说:加可以,但是做不到像wx. ...
微信智慧外链接微信小程序源码下载，支持多端转换，致力打造(微信)小程序生态的基础必需品
全新运营版微信小程序智慧链接生成工具.致力打造(微信)小程序营销推广生态的基础必需品:全新UI界面及架构体系打造小程序智慧链接:只要拥有你就是手握百万流量的大佬!全新运营致富版微信小程序链接生成工具: ...
uniapp微信小程序图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式
qf-image-cropper2.0 图片裁剪插件 1.效果预览: 2.平台支持: 1.支持微信小程序(移动端.PC端.开发者工具) 2.H5平台(2.1.0版本起) 3. 支持APP平台(2.1. ...
java webpack web项目_官方出品，微信小程序和 Web 端同构解决方案——kbone
介绍最近在琢磨一些小程序开发和移动web开发,偶然间在Github上看到了这样一个项目--kbone,一个致力于微信小程序和 Web 端同构的解决方案.微信小程序的底层模型和 Web 端不同,我们想 ...
10分钟上线 - 利用函数计算构建微信小程序的Server端
摘要: 阿里云函数计算是一个事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.微信小程序是一种不需要下载安装即可使用的应用,它可以在微信内被便捷地获取和传播. 当 ...
口令红包-利用函数计算构建微信小程序的server端
摘要: 阿里云函数计算是一个事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.微信小程序是一种不需要下载安装即可使用的应用,它可以在微信内被便捷地获取和传播. 当 ...
利用Serverless构建微信小程序的Server端
前言这篇文章适合所有的想微信小程序开发新手.老鸟以及想准备学习开发微信小程序的程序猿.本文以开发一个类似"语音口令红包"小程序为例,向您讲解如何使用阿里云函数计算快速构建微信小程 ...
uniapp兼容保利威视频，可编译成微信小程序、移动端、h5
基于uniapp开发,引入保利威视频云, 代码可编译成微信小程序,移动端,h5,其他小程序理论上都支持但是没有验证,demo下载地址 https://download.csdn.net/downloa ...
微云二手车运营版公众号+小程序v1.1.20+微信小程序+抖音端源码安装教程
系统包括PC+公众号+小程序v1.1.20+微信小程序+抖音小程序前端,使用前先在后台初始化下数据.播播资源网技术小编看了下说明是带PC端功能,但后台没找到设置的地方,不过公众号+小程序+抖音也够用了 ...

微信小程序之PC端不支持 wx.previewMedia 方法故用自定义轮播图进行模拟照片视频的播放

微信小程序之PC端不支持 wx.previewMedia 方法故用自定义轮播图进行模拟照片视频的播放相关推荐

最新文章

热门文章

微信 小程序 之PC端 不支持 wx.previewMedia 方法 故用自定义轮播图进行 模拟照片视频的播放

微信 小程序 之PC端 不支持 wx.previewMedia 方法 故用自定义轮播图进行 模拟照片视频的播放相关推荐

最新文章

热门文章

微信小程序之PC端不支持 wx.previewMedia 方法故用自定义轮播图进行模拟照片视频的播放

微信小程序之PC端不支持 wx.previewMedia 方法故用自定义轮播图进行模拟照片视频的播放相关推荐