uniapp solicita la interfaz de red para obtener el video, reproducir la música, mostrar la imagen y mostrar el texto.

API de Django de interfaz de backend:

Dirección de solicitud: 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))

index.vue del lado de la aplicación:

Consulte el tutorial del sitio web oficial: vídeo | sitio web oficial de uni-app

Tenga en cuenta que si no se puede reproducir la música, cambie el enlace de la dirección de la música en los datos json en la API en segundo plano.

<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>