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>
