微信小程序 自带的方法 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端
