使用video标签报错

1,934 阅读1分钟

第一种报错

报错日志:Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

因为当时我在页面直接写的是 this.$refs.video.play();

原因:
从Chrome50开始,对<video>或<audio>元素的play()调用返回一个Promise。
一个异步返回单个结果的函数。如果回放成功,Promise就会实现,而play事件也会同时触发,对应执行.then。
如果回放失败,Promise将被拒绝,同时会有一个错误消息解释失败,对应执行.catch。

错误发生的过程为:
1.media.play() 开始异步加载video/audio内容。
2.media.pause() 在video/audio没有准备好时中断加载。
3.media.play() 此时进行继续播放,报错。

解决方法

this.$refs.video.load()
let playPromise = this.$refs.video.play()
if (playPromise !== undefined) {
    playPromise.then(() => {
        this.$refs.video.play()
    }).catch(()=> {
       
    })
}

使用此方法就不会再报错了!

第二种报错

TypeError: Failed to set the 'srcObject' property on 'HTMLMediaElement': The provided value is not of type 'MediaStream'

我的页面写的是 this.$refs.video.srcObject = stream;

解决方法

video.srcObject = mediaStream
video.src = URL.createObjectURL(mediaSource)
this.$refs.video.srcObject = local.stream;
this.$refs.video.src = URL.createObjectURL(local.constraints);

第三种报错

Failed to execute ‘createObjectURL’ on ‘URL’: No function was found that matched the signature provided.

解决方法

try{
      video.src = window.URL.createObjectURL(stream);
    }catch(e){
      video.srcObject = stream;
    }

这个报错是因为在浏览器上开启了手机模拟调试。Web SDK 不支持手机模拟调试的。