微信 小程序 之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.windowsOrMac
   if(windowsOrMac){ //PC端
       console.log("点击图片/视频",e);
       let srcIndex = 0
       var 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 = index
           return
         }
       })
       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.src
     var 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 = 0
     ImageVideoList.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.js
 
Page({
  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端