在html5视频上添加动态水印？

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<style>
  .watermark {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 18px;
    opacity: 0.5;
  }
</style>

var video = document.getElementById('myVideo');
var canvas = document.createElement('canvas');

video.addEventListener('timeupdate', function() {
  var ctx = canvas.getContext('2d');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  ctx.drawImage(video, 0, 0);
  ctx.font = 'bold 24px Arial';
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
  ctx.fillText('水印文本', canvas.width - 200, 50);
  video.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
});

video.style.position = 'relative';
video.parentNode.insertBefore(canvas, video);