记录一次video crossorigin 未设置致使的问题

在使用video进行全景视频播放时,发现视频全景跨域报错!image.png跨域

排查报错提示视频不支持 HLS 360 video ,但咱们录制的视频是转成mp4格式的,因而再video标签上加上type浏览器

this.myPlayer = this.$video('myVideo', {
 //肯定播放器是否具备用户能够与之交互的控件。没有控件,启动视频播放的惟一方法是使用autoplay属性或经过Player API。
 controls: true,
 //自动播放属性,muted:静音播放
 autoplay: "true",
 //建议浏览器是否应在<video>加载元素后当即开始下载视频数据。
 preload: "auto",
 //设置视频播放器的显示宽度(以像素为单位)
 width: "800px",
 //设置视频播放器的显示高度(以像素为单位)
 height: "400px",
 controls: false,
 sources: \[ // 视频源
 {
 src: src,
 type: 'video/mp4'
 }
 \]

而后尝试仍是发现不行,
发现第二条报错有提示,视频存在跨域数据,可能没法加载,因而开始排查代码,以video为中心,发现了一个 "crossorigin" 属性,
crossorigin 属性设置或返回视频的 CORS 设置。
加上该属性,发现错误解决,舒服ide

相关文章
相关标签/搜索