后台接口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>