尝试从视频创建缩略图。
我收到SecurityError任何人都请帮助我。
这是我的脚本
<video id="video" src="<?php echo $file_path; ?>" onerror="failed(event)" controls="controls" preload="none" ></video>
<script type="text/javascript">
var index = 0;
var video = document.getElementById('video');
var starttime = 0.00; // start at 7 seconds
var endtime = 0.00; // stop at 17 seconds
video.addEventListener("timeupdate", function () {
if (this.currentTime >= endtime) {
this.pause();
getThumb();
}
}, false);
video.play();
video.currentTime = starttime;
function getThumb() {
var filename = video.src;
var w = video.videoWidth;//video.videoWidth * scaleFactor;
var h = video.videoHeight;//video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
//document.body.appendChild(canvas);
var data = canvas.toDataURL("image/jpg");
//send to php script
var xmlhttp = new XMLHttpRequest;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log('saved');
}
}
console.log('saving');
xmlhttp.open("POST", 'process_thumb.php', true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send('name=' + encodeURIComponent(filename) + '&data=' + data);
}
</script>
我在Firefox的控制台中收到此错误:
SecurityError: The operation is insecure. thumbnail_process.php:26
getThumb
<anonymous>
任何帮助将不胜感激。
答案 0 :(得分:0)
从其他目录加载图像或视频时,它也被视为本地主机中的跨域请求。因此我们需要将crossOrigin标记设置为video元素,以告知画布加载的视频来自另一个域。这样就不会弄脏画布。
没有crossOrigin标记,可能会加载视频,但画布会变脏。简而言之,受污染的画布无法转换为图像。因此引发了错误。
我尚未尝试此解决方案,但您可以尝试。我在视频中添加了 crossOrigin 标签:
<video id="video" src="<?php echo $file_path; ?>" onerror="failed(event)" controls="controls" preload="none" ></video>
<script type="text/javascript">
var index = 0;
var video = document.getElementById('video');
var starttime = 0.00; // start at 7 seconds
var endtime = 0.00; // stop at 17 seconds
video.crossOrigin = "anonymous";
video.addEventListener("timeupdate", function () {
if (this.currentTime >= endtime) {
this.pause();
getThumb();
}
}, false);
video.play();
video.currentTime = starttime;
function getThumb() {
var filename = video.src;
var w = video.videoWidth;//video.videoWidth * scaleFactor;
var h = video.videoHeight;//video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
//document.body.appendChild(canvas);
var data = canvas.toDataURL("image/jpg");
//send to php script
var xmlhttp = new XMLHttpRequest;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log('saved');
}
}
console.log('saving');
xmlhttp.open("POST", 'process_thumb.php', true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send('name=' + encodeURIComponent(filename) + '&data=' + data);
}
</script>