Html5 video tagının videoadan resim almak için oluşturduğumu fonksiyonda video crossorring değerini anonymous rağmen php tarafından header Access-Control-Allow-Origin:* yapmama rağmen canvas.toDataURL(); hata vermektedir. Bir türlü çözemedim. Yardımcı olursanız, sevinirim. Kolay gelsin...
<?php
// Allow from any origin
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
?>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Meku">
<title>Tek Video Gösterimi</title>
</head>
<body>
<div class="previewBox">
<button id ="posterOlustur">Resim Oluştur</button>
<div class="preview">
</div>
</div>
<!--
video etiketine crossorigin="anonymous" verdiğim zaman video oynamıyor.
Vermediğim zaman javascript kodundanki
img.src = canvas.toDataURL();
satır çalışmıyor.
"Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported"
hatası veriyor.
Access-Control-Allow-Origin:* olması gereliyor fakat
Yukarıdaki php header fonksiyonun etkisi olmuyor.
htacces ile denedim Access-Control-Allow-Origin değişmedi.
Kod denemesini localhost ile yapıyorum etkisi varmıdır bilmiyorum.
-->
<video width="400" controls>
<source src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script>
$('#posterOlustur').click(function(){
var
img= new Image,
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
video = $('video').get(0);
img.crossorigin ="anonymous";
canvas.width = 320;
canvas.height = 180;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
img.src = canvas.toDataURL();
img.onload=function(){
$('.preview').html(img);
}
});
</script>
</body>
</html>
