如何在画布动画下的画布上播放视频？答案

【问题标题】：How do I get a video to be play on the canvas under my canvas animation?如何在画布动画下的画布上播放视频？
【发布时间】：2013-03-08 04:42:54
【问题描述】：

如何在画布动画下的画布上播放视频？

例如this 剪辑。

所以这个动画沿着视频的底部移动。

代码：

  <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>

【问题讨论】：

标签： javascript html animation canvas

【解决方案1】：

我认为您不需要在画布中播放视频。只需在您的 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.

【讨论】：

这不会在视频顶部显示文本。它将视频向右移动并在创建的空间中制作动画。 jsfiddle.net/bS79G/195