- 可以正常播放网络视频(均为mp4格式的)。但播放本地视频,就一直是加载中,从相册选择本地视频,原有的视频会自动重新播放,且弹幕一直停留在屏幕上:
- <template>
- <view>
- <view class="status_bar">
- <view class="top_view"></view>
- </view>
- <page-head :title="title"></page-head>
- <view class="page-body">
- <view class="page-section">
- <video class="myvideo" :autoplay="autoplay" id="myvideo" :src="src" @error="videoErrorCallback" controls="false" muted
- danmu-list="danmuList" enable-danmu danmu-btn></video>
<view class="uni-list">
<view class="uni-list-cell">
<view>
<view class="uni-label">弹幕内容</view>
</view>
<view class="uni-list-cell-db">
<input id="dminput" @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕"/>
</view>
</view>
</view>
<view class="btn-area">
<button @tap="bindSendDanmu" class="page-body-button" form-type="submit">发送弹幕</button>
<button @tap="bindButtonTap()" class="page-body-button" >选择视频</button>
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from "../../components/page-head.vue"
export default {
data(){
return{
title:'视频',
autoplay:false,
src:'http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4',//本地视频'../../static/video/video_pt.mp4'
videoContext:'',
inputValue: '',
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
]
}
},
onReady:function(res){
this.videoContext = uni.createVideoContext('myvideo');
},
components:{
pageHead
},
methods:{
videoErrorCallback:function(e){
console.log('视频错误信息:' + e.target.errMsg);
},
bindButtonTap:function () {
uni.chooseVideo({
sourceType:['album','camera'],
maxDuration:60,
camera:['front','back'],
success:function(res){
this.src = res.tempFilePath;
console.log('视频选择完成,路径为'+res.tempFilePath)
console.log('当前视频播放源路径为'+this.src)
}
})
},
bindInputBlur:function (e) {
this.inputValue = e.target.value
// console.log(this.inputValue)
},
bindSendDanmu:function () {
var self = this;
self.videoContext.sendDanmu({
text:self.inputValue,
color:self.getRandomColor()
});
},
getRandomColor:function () {
const rgb = []
for (let i =0;i<3;i++) {
let color = Math.floor(Math.random()*256).toString(16)
color = color.length == 1? '0'+color:color
rgb.push(color)
}
return '#'+rgb.join('');
}
},
}
</script>
<style>
.myvideo{
width: 100%;
}
</style>
控制台打印信息:
15:13:23.659 App Hide at App.vue:10
15:13:27.296 App Show at App.vue:7
15:13:27.452 视频选择完成,路径为/storage/emulated/0/DCIM/Camera/temp_uuid_0dbb47063d43214d07a62c4fc012db7b.mp4 at pages/video/video.vue:70
15:13:27.484 当前视频播放源路径为/storage/emulated/0/DCIM/Camera/temp_uuid_0dbb47063d43214d07a62c4fc012db7b.mp4 at pages/video/video.vue:71
清寒 (作者)
示例里面的可以,试过了
2018-08-28 12:27
最爱滕小厨
本地视频是指手机里的视频还是指项目static文件夹下的视频,static文件夹下的视频App里如何播放
2019-01-22 23:42
5***@qq.com
回复 最爱滕小厨: 请问您解决了吗?static文件夹下的视频App里如何播放呀?
2019-11-29 10:49
1***@qq.com
回复 5***@qq.com: 同问
2020-01-02 16:55
z***@163.com
同问,static文件夹下的视频播放不了
2020-03-10 15:37
z***@163.com
也不知道是文件大小的问题,还是文件格式的问题,还是就是不能播。给的例子都是网络地址视频文件的,没法测试本地是不是能播
2020-03-10 15:43
2***@qq.com
回复 z***@163.com: App平台:如果使用的视频路径为本地路径,需要配置资源为释放模式:在 manifest.json 文件内 app-plus 节点下新增 runmode 配置,设置值为liberate
2020-11-16 13:59