記錄一次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

相關文章
相關標籤/搜索