Ionic 3，videojs-panorama在Android中不支持，出现错误DOMException:无法在上执行'texImage2D'

问题描述

使用时出现此错误视频全景

Dom异常:无法在"WebGLRenderingContext"上执行"texImage2D":视频元素包含跨域数据，并且可能无法加载.

https://github.com/yanwsh/videojs-panorama


(function (window, videojs) { var player = window.player = videojs('videojs-panorama-player', {}, function () { }); var videoElement = document.getElementById("videojs-panorama-player"); var width = videoElement.offsetWidth; var height = videoElement.offsetHeight; player.width(width), player.height(height); player.panorama({ clickAndDrag: true, backToVerticalCenter: false, backToHorizonCenter: false, clickToToggle: true, maxLat: -10, initLat: -10, initLon: -270, rotateX: -Math.PI, NoticeMessage: (isMobile()) ? "please drag and drop the video" : "please use your mouse drag and drop the video", videoType: "fisheye", callback: function () { player.play(); } }); }(window, window.videojs));

解决方案

此处解释"CORS"的概念: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

Stack-Overflow上有一个较早的线程在这里讨论:在.htaccess中启用cors

简而言之，大多数Web服务器都很高兴，只要您提供它们两行文件，名为".htaccess"，包含以下两行:

标题添加Access-Control-Allow-Origin"*"

Header add Access-Control-Allow-Methods:"GET，POST，OPTIONS，DELETE，PUT"

I am getting this error when usingvideos-panorama

Dom Exception: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.

https://github.com/yanwsh/videojs-panorama

<code>


(function (window, videojs) { var player = window.player = videojs('videojs-panorama-player', {}, function () { }); var videoElement = document.getElementById("videojs-panorama-player"); var width = videoElement.offsetWidth; var height = videoElement.offsetHeight; player.width(width), player.height(height); player.panorama({ clickAndDrag: true, backToVerticalCenter: false, backToHorizonCenter: false, clickToToggle: true, maxLat: -10, initLat: -10, initLon: -270, rotateX: -Math.PI, NoticeMessage: (isMobile()) ? "please drag and drop the video" : "please use your mouse drag and drop the video", videoType: "fisheye", callback: function () { player.play(); } }); }(window, window.videojs));

解决方案

The concept of "CORS" is explained here:https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

There is an earlier thread here on Stack-Overflow discussing this here:enable cors in .htaccess

To boil it all down, most webservers are happy, if you just supply them witha two-line file named".htaccess", containing these 2 lines:

Header add Access-Control-Allow-Origin "*"

Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

这篇关于Ionic 3，videojs-panorama在Android中不支持，出现错误DOMException:无法在上执行'texImage2D'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！