Ionic 3，videojs-panorama在Android中不支持，出现错误DOMException:无法在上执行'texImage2D' [英] Ionic 3 , videojs-panorama not supporting in Android getting error DOMException: Failed to execute 'texImage2D' on
问题描述
使用时出现此错误 视频全景
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 using videos-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 with a 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'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
