我正在尝试使用下面的方法创建视频可视化(仅使用最少的代码来查看可能性):
HTML:
JS:
如果我添加这个,这很容易做到:
尤其是当我使用scriptProcessor节点获得音频数据时,但我想实时更改视频源,而视频标记不支持它。
提前感谢。
HTML:
<canvas id=canvas width=427 height=240></canvas>
JS:
var context = new webkitAudioContext()
, analyser = context.createAnalyser()
, video = document.createElement('video')
, source = context.createMediaElementSource(video)
, canvas = document.getElementById('canvas')
, ctx = canvas.getContext('2d')
;
var loadVideos = function() {
video.src = 'my video.ogg';
source.connect(analyser);
analyser.connect(context.destination);
video.play();
videoVisualization();
}
loadVideos();
function videoVisualization() {
window.webkitRequestAnimationFrame(videoVisualization);
ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);
var freqByteData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqByteData);
for (i = 0; i < freqByteData.length; ++i) {
console.log(freqByteData[5]);
}
}
如果我添加这个,这很容易做到:
<video id=video controls width=427 height=240>
<source src="my video.ogg" type="audio/ogg" />
</video>
尤其是当我使用scriptProcessor节点获得音频数据时,但我想实时更改视频源,而视频标记不支持它。
提前感谢。