在使用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 设置。
加上该属性,发现错误解决,舒服


你在看桥下风景
19 声望1 粉丝

前端小虫