各位大神好,遇到一个视频播放的问题。
以下是复现步骤
导入项目
1、新建一个uni-app项目
2、把以下代码复制到index.vue中
3、运行到手机上(ios14.1)
或
1、打开附件中video_test.zip文件
2、解压
3、导入项目到到hbuilderX
操作
流程1
1、直接点“视频二”,视频可播放
流程2
1、点“视频一”,等待播放
2、点“视频二”,视频无法播放
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{ title }}</text>
<view @click="click1">视频一</view>
<view @click="click2">视频二</view>
<view>当前视频: {{src}}</view>
<video :src="src" :key="src" autoplay></video>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
src:''
};
},
onLoad() {},
methods: {
click1(){
this.src = 'http://fhw-1302811690.cos.ap-guangzhou.myqcloud.com//files/2020115/5a4423e0c5c8b3b6760.mp4'
},
click2(){
this.src = 'https://fhw-1302811690.cos.ap-guangzhou.myqcloud.com/files/20200922/%E8%B1%8C%E8%B1%86%E6%80%9D%E7%BB%B4%E8%AF%BE_36e14e.mp4'
}
}
};
</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;
flex-direction: column;
align-items: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>