uniapp+uview 简单实现视频播放

最新推荐文章于 2024-06-04 22:15:00 发布

weixin_43048846

最新推荐文章于 2024-06-04 22:15:00 发布

阅读量765

点赞数

文章标签： uni-app 音视频前端

本文链接：https://blog.csdn.net/weixin_43048846/article/details/131639559

版权

<template>
	<view class="container">
		<view class="myVideo">
			<video id="myVideo" :style="{ height: windowHeight + 'px' }" style="width: 100%;" :src="videourl"
				@error="videoErrorCallback" autoplay="true" show-center-play-btn="false" enable-play-gesture="true" v-if="type == 1">
				<cover-image class="close_video status-bar-height" @click="btn_closeVideo" src="../../static/guanbi.png"></cover-image> 
			</video>
			<u-swiper :list="imgList" bg-color="#000000" border-radius="0" style="height: 100vh;" img-mode="aspectFit" duration="1000" mode='rect' v-else/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,
				videourl: '',
				imgList:[],
				type:''
			}
		},
		onLoad(option) {
			console.log("option==>",option)
			if(option){
				this.type = Number(option.type)
				this.videourl = option.url
				if(this.type == 2){
					// 播放图集列表
				}
			}
			
		},
		onReady() {
			
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.windowHeight = res.windowHeight
				}
			})
		},
		methods: {
			videoErrorCallback: function(e) {
				console.log(e)
			},
			leftClick(){
				
			},
			btn_closeVideo() {
				uni.navigateBack()
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		
	}
	/deep/.u-indicator-item-rect{
		width: 156rpx!important;
		background-color: rgba(255, 255, 255, .28)!important;
	}
	/deep/.u-indicator-item-rect-active{
		background-color: rgba(255, 255, 255, .7)!important;
	}
	/deep/.u-swiper-indicator{
		bottom: 88rpx!important;
	}
	uni-swiper{
		height: 100%!important;
	}
</style>
<style lang="scss">
	.container {
		height: 100%;
	
		.myVideo {
			position: relative;

			.close_video {
				position: absolute;
				top: 10px;
				left: 20px;
				width: 30px;
				height: 30px;
				background: rgba(255, 255, 255, .2);
			}
		}
	}
</style>