H5模仿微信，播放音频

https://www.haorooms.com/post/html5_weixinyy

一些问题：

转自：https://blog.csdn.net/weixin_41767649/article/details/79918139

去掉视频字节为0的video ,Uncaught (in promise) DOMException: Failed to load because no supported source was f

 

Uncaught (in promise) DOMException: Failed to load because no supported source was found.
出现上边的错误一方面是从后台获取到的video的字节数是0，是一个空的视频

判断视频是否可以下载，在项目中遇到一个问题，从手机端上船到数据库的视频，有的事0字节的视频，根本无法播放，控制台报错：Uncaught (in promise) DOMException: Failed to load because no supported source was found.
解决办法：
判断视频的networkState，如果值等于3，则不播放，跳过
- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
判断视频的资源长度，如果为NAN，那就是无法播放，但是这个有可能受网络状态的限制，在网络不好的时候，获取视频的时长需要一定的时间，所以，这个判断并不是很准确。 
- Media.duration; //当前资源长度 流返回无限

我用的是vue写的项目：则用ev.target来获取视频的状态

videoChanging: function (ev) { 
if (!this.$refs.video) { return } 
//更换video的src 
if(this.videosrcTwo){ 
var status = this.$refs.video.ended 
if(status){ 
if(this.$refs.video.src == this.videosrcOne){ 
this.$refs.video.src = this.videosrcTwo 
console.log('ev.target.networkState', ev.target.networkState) 
console.log('ev.target.duration', ev.target.duration) 
this.$refs.video.play() 
}else{ 
this.$refs.video.src = this.videosrcOne 
} 
} 
if(ev.target.ended){ 
this.playing = false 
// this.replay =true 
} 
} else { 
this.isLoop = true 
} 
在上边添加一行代码就可以： 
if(ev.target.networkState == 3) return this.$refs.video.src = this.videosrcOne 
以下是我获取的当前播放视频的结果：这种结果都会无法播放` 
ev.target.networkState 3 
ev.target.duration NaN

转自：https://blog.csdn.net/WangMouMouMouMou/article/details/80509896

（video、audio）关于 Uncaught (in promise) DOMException: The play() request was interrupted by a call to

 

连续点击播放按钮的报错问题：

解决思路：获取两次点击的时间差，如果大于100ms就return，直接退出

 

//-------------播放视频

var videoPlayer = document.getElementById("videoCon");

var lastRunTime = Date.now();
var currentTime = Date.now();
var protectTime = 100;//设置保护性延时 单位毫秒，不要小于50 建议100以上
if((currentTime - lastRunTime) < protectTime){
        return;//两次执行太过频繁，直接退出
}
if(videoPlayer.paused){
videoPlayer.play();
}else{
videoPlayer.pause();
}
lastRunTime=Date.now();