Uncaught (in promise) DOMException: Failed to load because no supported source was found.
the above error occurs on the one hand, the number of bytes of the video obtained from the background is 0, is an empty video
was used to determine whether the video could be downloaded. In the project, there was a problem that the video from the mobile phone to the database could not be played at all for the 0 byte video. The console reported an error: Uncaught (in promise) DOMException: Failed to load because no supported source was found
solution:
determines the networkState of the video, if the value is equal to 3, it will not play, skip
- Media.networkState; //0. This element is not initialized 1. Normal but not using network 2. Downloading data 3. No resource
found
determines the resource length of the video. If it is NAN, it cannot be played. However, this may be limited by the network state, and it takes a certain amount of time to obtain the length of the video when the network is not good.
- Media.duration; // the current resource length stream returns an infinite
I use the item written by vue: ev.target is used to get the status of the video
videoChanging: function (ev) {
if (! $refs.video) {return}
// replace the SRC of video
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
}
solution:
determines the networkState of the video, if the value is equal to 3, it will not play, skip
- Media.networkState; //0. This element is not initialized 1. Normal but not using network 2. Downloading data 3. No resource
found
determines the resource length of the video. If it is NAN, it cannot be played. However, this may be limited by the network state, and it takes a certain amount of time to obtain the length of the video when the network is not good.
- Media.duration; // the current resource length stream returns an infinite
I use the item written by vue: ev.target is used to get the status of the video
videoChanging: function (ev) {
if (! $refs.video) {return}
// replace the SRC of video
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
This result will not play '
ev.target.networkState 3
ev.target.duration NaN