清寒
清寒
  • 发布:2018-08-27 15:21
  • 更新:2020-06-28 10:34
  • 阅读:11100

video 无法播放本地视频

分类:uni-app
可以正常播放网络视频(均为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-27 15:21 负责人:无 分享
已邀请:
Neil_HL

Neil_HL

你试试hello uniapp里面的示例,选择接口-媒体-视频,这里可以添加一个本地视频进行播放.
update src确实存在一些问题,我们正在排查

  • 清寒 (作者)

    示例里面的可以,试过了

    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

2***@qq.com

2***@qq.com

本地视频可以加载,加载地址不能写成这样 ../../static/video/*.mp4'
应该写成编译之后的地址:'/static/video/
.mp4'

1***@qq.com

1***@qq.com - 大可

我是播放手机里的视频 播放不了

4***@qq.com

4***@qq.com

别试了,本地的mp4就是不给播,

该问题目前已经被锁定, 无法添加新回复