这是 Detect play event in youtube 包装的后续问题MediaElement.js。我试图检测问题中的播放或点击事件,但由于跨域问题(可能)而无法做到这一点。我还发现你直接将 youtube 剪辑绘制到画布上,它不会被复制(将是空白的),像这样:
<!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>
有人知道在画布上绘制 youtube 流的其他更有前途的方法吗?谢谢。