VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because t

背景:使用videojs第三方插件,用于播放视频,videojs被封装成一个组件,通过点击事件达到如下目的:点击更改组件的src,以达到动态切换视频的效果。

出现问题:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because t_第1张图片

点击事件不能实现视频的切换,控制台爆红如下:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because t_第2张图片

中文翻译: 

VIDEOJS:错误:(代码:4 MEDIA_ERR_SRC_NOT_SUPPORTED)无法加载媒体,原因可能是服务器或网络出现故障,也可能是格式不受支持。

未捕获(承诺中)DOMException:由于找不到支持的源,无法加载。

解决思路:

 一、现有代码逻辑分析

页面布局:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because t_第3张图片

页面逻辑:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because t_第4张图片

封装的组件,核心代码:

主要是监听传过来的src是否改变,改变了之后对  当前播放器进行重置reset() -> load() -> play()。

因为load() 方法重新加载音频/视频元素。
load() 方法用于在更改来源或其他设置后对音频/视频元素进行更新。

watch(() => props.src, (now) => {
  if (now) {
    videoPlayer.pause()
    // videoPlayer.dispose()
    videoPlayer.reset()
    setTimeout(() => {
      videoPlayer.src([
        {
          src: props.src,
          type: "application/x-mpegURL"
        }
      ])
      videoPlayer.load()
      videoPlayer.play()
    }, 10)
  }
})

封装的组件,完整代码:





解决办法:

根据现有代码进行分析,发现传过来的视频的数据类型type写法有误。因为vediojs的播放器有三个参数,第二个参数使用js进行赋值的时候,type字段可以不写,如果写了传过来的视频流的数据格式一定要满足,否则不成功。

所以解决办法就是把type去掉。

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because t_第5张图片

备注:

videojs方法接收3个参数:

  • 第一个是dom节点的ID名称。
  • 第二个是一些配置项的内容。
  • 第三个则是自定义插件的配置,通常会在videojs 挂载后执行,也可以理解为videojs的 mounted 阶段。

你可能感兴趣的:(视频,vue.js,音视频)