uniapp请求网络接口获取播放视频播放音乐显示图片显示文字

王家视频教程图书馆

已于 2023-05-08 16:05:17 修改

阅读量350

点赞数

分类专栏： Uniapp 文章标签： uni-app 音视频

于 2023-05-08 16:04:43 首次发布

本文链接：https://blog.csdn.net/qq_35622606/article/details/130560827

版权

Uniapp 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

后台接口django API：

请求地址：http://192.168.0.105:8000/testjson/

def testjson(request):
    data = {
    'yy': 'http://m10.music.126.net/20230508153727/e449fe6e85027f3acbdcf0be160a46b6/ymusic/0f52/5252/0e52/882b491a3ee8bcf233ce98b64dd1c6e8.mp3',
    'sp': 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
    'tp': 'https://upload-images.jianshu.io/upload_images/5809200-a99419bb94924e6d.jpg',
    'wz': '猛志逸四海，骞翮思远翥。 —— 陶渊明',
    }
    return HttpResponse(json.dumps(data))

app端index.vue:

参考官网教程：video | uni-app官网

注意音乐如果播放不出来请更换后台api中json数据中的·音乐地址链接

<template>
		<view class="flex">
			<text>{{itemList.yy}}<br/></text>
			<audio style="text-align: left" :poster="img" :src="itemList.yy" name="红日" author="李克勤" action="pause" controls></audio>
			<text>{{itemList.sp}}<br/></text>
			<video id="myVideo" :src="itemList.sp"controls></video>
			<text>{{itemList.tp}}<br/></text>
			<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="aspectFit" :src="itemList.tp"></image>
			<br/><text>{{itemList.wz}}<br/></text>
		</view>

</template>

<script>
	export default {
		data() {
			return {
				itemList: [],
				img:'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png'
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			 getList() {
				uni.request({
			        url: 'http://192.168.0.105:8000/testjson/', 
					method:'GET',
			        success: (res) => {
			            console.log(res.data);
			             this.itemList =res.data;
						 
			        }
			    });
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>