根据传入的数组list来决定打开图片还是全屏播放视频,还有横竖屏等初始预设参数
组件.vue
<template>
<view v-if="list">
<view class="button" @click="openMedia()">打开图片/视频</view>
<!-- 始终竖屏播放:direction="0" -->
<video v-show="isOpenVideo" id="myVideo" :src="list[0]" @fullscreenchange="fullscreenchange"></video>
</view>
</template>
<script>
const util = require('@/utils/utils.js')
export default {
name: "open-media",
props: {
list: {
type: Array,
default: []
},
},
data() {
return {
isOpenVideo: false,
videoContext: null
};
},
methods: {
openMedia() {
if (this.list[0].indexOf('.mp4') > 0) {
//打开视频(全屏播放)
this.isOpenVideo = true
this.videoContext = uni.createVideoContext('myVideo', this)
this.videoContext.play()
this.videoContext.requestFullScreen()
} else {
//打开图片
util.previewImage(this.list)
}
},
//退出全屏时停止播放
fullscreenchange(e) {
console.log(e)
if (!e.detail.fullScreen) {
this.videoContext.stop()
this.isOpenVideo = false
}
}
}
}
</script>
<style lang="scss">
.button {
width: 230rpx;
text-align: center;
padding: 10rpx 20rpx;
border: 1px solid #000741;
border-radius: 50rpx;
margin-top: 15rpx;
}
</style>
utils.js文章来源:https://www.toymoban.com/news/detail-533841.html
/**
* 预览图片
* @param {Array} filePath
*/
function previewImage(filePath) {
uni.previewImage({
urls: filePath,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: res => {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮,第' + (res.index + 1) +
'张图片')
},
fail: err => {
console.log(err.errMsg)
}
}
})
}
module.exports = {
previewImage,
};
欢迎交流~~文章来源地址https://www.toymoban.com/news/detail-533841.html
到了这里,关于uniapp小程序点击按钮打开图片/全屏播放视频组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!