캔버스 애니메이션으로 캔버스에서 비디오를 재생하려면 어떻게해야합니까?

캔버스 애니메이션으로 캔버스에서 비디오를 재생하려면 어떻게해야합니까?캔버스 애니메이션으로 캔버스에서 비디오를 재생하려면 어떻게해야합니까?

예를 들어이 클립 : 비디오의 하단 http://trailers.apple.com/movies/marvel/ironman3/ironman3-tlr2_h480p.mov

그래서이 애니메이션 이동합니다.

코드 :

<html> 
     <head> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> 
     <script type="text/javascript"> 
      var context; 
      var text = ""; 
      var textDirection =""; 

      $(function() 
      { 
       context = document.getElementById("cvs").getContext("2d");    
       setInterval("animate()", 360); 

       textDirection ="right"; 
       textXpos = 5; 
       text = "This is my video..";  
      }); 

      function animate() {    
       // Clear screen 
       context.clearRect(0, 0, 500, 500); 
       context.globalAlpha = 1; 
       context.fillStyle = '#fff'; 
       context.fillRect(0, 0, 500, 500);  

       var metrics = context.measureText(text); 
       var textWidth = metrics.width; 

       if (textDirection == "right") { 
        textXpos += 10; 

        if (textXpos > 500 - textWidth) { 
         textDirection = "left"; 
        } 
       } 
       else { 
        textXpos -= 10; 

        if (textXpos < 10) { 
         textDirection = "right"; 
        }      
       } 

       context.font = '20px _sans'; 
       context.fillStyle = 'black'; 
       context.textBaseline = 'top'; 
       context.fillText (text, textXpos, 180);  
       }  
       </script> 
      </head> 
      <body> 
      <div id="page"> 
       <canvas id="cvs" width="500" height="500"> 
        Your browser does not support the HTML 5 Canvas. 
       </canvas> 
      </div> 
      </body> 
     </html>

출처

2013-03-19 user2186669

나는 당신이 캔버스에서 동영상을 재생할 필요가 있다고 생각하지 않습니다. HTML에 비디오 요소를 만들고 CSS를 사용하여 캔버스 요소를 배치하십시오.

HTML :

<div id="page"> 
    <video id="video" autoplay loop> 
    <source id='mp4' 
    src="http://media.w3.org/2010/05/sintel/trailer.mp4" 
    type='video/mp4'> 
    <source id='webm' 
    src="http://media.w3.org/2010/05/sintel/trailer.webm" 
    type='video/webm'> 
    <source id='ogv' 
    src="http://media.w3.org/2010/05/sintel/trailer.ogv" 
    type='video/ogg'> 
    <p>Your user agent does not support the HTML5 Video element.</p> 
    </video> 
    <canvas id="cvs" width="500" height="500"> 
    Your browser does not support the HTML 5 Canvas. 
    </canvas> 
</div>

CSS :

#cvs { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
}

Fiddle.

출처

2013-03-19 14:23:28

동영상 상단에 텍스트가 표시되지 않습니다. 비디오를 오른쪽으로 이동하고 생성 된 공간에서 애니메이션을 수행합니다. http://jsfiddle.net/bS79G/195/ – user2186669

죄송합니다. 저장을 누르지 않았습니다. 지금 사용해보십시오 : http://jsfiddle.net/jBHCN/1/ –

캔버스 애니메이션으로 캔버스에서 비디오를 재생하려면 어떻게해야합니까?

답변

관련 문제