html5 캔버스에 그림 그리기

Detect play event in youtube wrapped via MediaElement.js에 대한 후속 질문입니다. 질문에서 재생 또는 클릭 이벤트를 감지하려고했으나 교차 출처 문제 (어쩌면) 때문에 할 수 없습니다.html5 캔버스에 그림 그리기

<!DOCTYPE html> 
<html> 
<head> 
    <title>video in canvas</title> 
    <link rel="stylesheet" href="mediaelementplayer.css" /> 

    <script src="jquery.js"></script> 
    <script src="mediaelement-and-player.min.js"></script> 

    <script> 
    $(document).ready(function() { 
    $('#v').mediaelementplayer(); 

    var v = $('#v')[0]; 
    var canvas = $('#c')[0]; 
    var context = canvas.getContext('2d'); 

    console.log('play event entered'); 
    draw(v, context, 640, 360); 
    }); 

    function draw(v, c, w, h) { 
    // if(v.paused || v.ended) return false; 
    console.log("draw event entered"); 
    c.drawImage(v, 0, 0, w, h); 
    setTimeout(draw, 20, v, c, w, h); 
    } 
    </script> 
</head> 

<body> 
    <video width="640" height="360" id="v" preload="none"> 
    <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI"/> 
    </video> 
    <canvas id="c" width="640" height="360"></canvas> 
</body> 
</html>

누구 캔버스에 유튜브 스트림을 그리는 다른 유망한 방법을 알고 : 나는 또한 당신이, 다음과 같이 (공백이됩니다) 복사되지 않습니다 캔버스에 직접 유튜브 클립을 그리는 것을 발견? 감사.

출처

2013-01-06 clwen

당신은 < 비디오를 다른 도메인에서 오는 > 또는 <IMG>을 그리는 캔버스 drawImage을 사용할 수 없습니다.

은 아마 당신은 할 수 프록시 유튜브는 서버를 통해 스트림하지만 유튜브 TOS에 있다면 그것은 아마 나는 그들이 자신의 사이트 사람들이 프록시 방지하기 위해 뭔가를 할 수있는 것 같아요 유튜브 TOS에 대해

출처

2013-01-06 23:31:01 lostsource

간다. 사람들이 특정 사이트를 프록시하는 것을 피할 수 있는지 궁금합니다 (SO에 대한 다른 질문을 열 수도 있습니다)? – clwen

이것은 흥미로운 https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS에서 읽을 수 있습니다. 그러나 특정 HTTP 헤더로 회신하는 서버 (이 경우 YouTube)에 따라 다릅니다 – lostsource

html5 캔버스에 그림 그리기

답변

관련 문제