視頻Javascript，HTML5，效果
[英]video Javascript, HTML5, efect
問題描述
我目前正在處理立體聲並排視頻，用戶可以選擇他要在視頻上添加的效果（黑白，棕褐色，浮雕（仍未完成））。黑色和白色，當我單擊正常按鈕時，我的視頻顯示得非常好，然后單擊黑色和白色按鈕，我嘗試產生黑白效果，但是顯示給我的結果是N / b..normal .. .. N / b ...正常... N / b ...正常，我看不出問題出在哪里，我需要幫助，謝謝:)
<!DOCTYPE html>
<meta charset=utf-8 />
<script src="video.js" type="text/javascript"></script>
<link href="video-js.css" rel="stylesheet" type="text/css">
<title>Mon projet </title>
<h1> <marquee>Streaming </marquee></h1>
<center>
<h1> Choisir effet </h1>
<span id="cvsModeLbl">Mode:</span>
<input type="button" id="cvsbtnNormal" value="Normal" />
<input type="button" id="cvsbtnBW" value="Black & White" />
<h1> Vidéo Side by side</h1>
<video id=v controls loop width="500" height="400">
<source src=video2.mp4 type=video/mp4>
<source src=video2.webm type=video/webm>
<source src=video2.ogg type=video/ogg>
</video>
<canvas id=c width="500" height= "400"></canvas>
<style> c { background: black; } </style>
<script>
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var back = document.createElement('canvas');
var backcontext = back.getContext('2d');
var back1 = document.createElement('canvas');
var backcontext1 = back1.getContext('2d');
v.crossOrigin = 'anonymous';
var cw,ch;
cw = v.width;
ch = v.height;
back.width=cw;
back.hight=ch;
back1.width=cw;
back1.height=ch;
var effectNormal = document.getElementById("cvsbtnNormal");
var effectBw = document.getElementById("cvsbtnBW");
effectNormal.addEventListener("click", myFunction);
effectBw.addEventListener("click", myFunction1);
function myFunction(){
context.clearRect(0,0,500,400);
// First, draw it into the backing canvas
context.drawImage(v,0,0,cw,ch);
setTimeout(function(){ myFunction() }, 0);
}
function myFunction1(){
context.clearRect(0,0,500,400);
context.drawImage(v,0,0,cw,ch);
// Grab the pixel data from the backing canvas
var idata = context.getImageData(0,0,cw,ch);
var data = idata.data;
// Loop through the pixels, turning them grayscale
for(var i = 0; i < data.length; i+=4)
{
var r = data[i],
g = data[i+1],
b = data[i+2],
gray = (r+g+b)/3;
data[i] = gray;
data[i+1] = gray;
data[i+2] = gray;
}
idata.data = data;
// Draw the pixels onto the visible canvas
context.putImageData(idata,0,0);
// Start over!
setTimeout(function(){ myFunction1(); }, 0);
}
</script>
2 個解決方案
解決方案1
1 2018-01-12 12:26:04
var to1, to2;
function myFunction(){
clearTimeout(to1)
clearTimeout(to2)
context.clearRect(0,0,500,400);
// First, draw it into the backing canvas
context.drawImage(v,0,0,cw,ch);
to1 = setTimeout(function(){ myFunction() }, 10);
}
function myFunction1(){
clearTimeout(to1)
clearTimeout(to2)
context.clearRect(0,0,500,400);
context.drawImage(v,0,0,cw,ch);
// Grab the pixel data from the backing canvas
var idata = context.getImageData(0,0,cw,ch);
var data = idata.data;
// Loop through the pixels, turning them grayscale
for(var i = 0; i < data.length; i+=4)
{
var r = data[i],
g = data[i+1],
b = data[i+2],
gray = (r+g+b)/3;
data[i] = gray;
data[i+1] = gray;
data[i+2] = gray;
}
idata.data = data;
// Draw the pixels onto the visible canvas
context.putImageData(idata,0,0);
// Start over!
to2 = setTimeout(function(){ myFunction1(); }, 10);
}
解決方案2
0 2018-01-12 12:31:56
如果您首先單擊“常規”按鈕，由於setTimeout() ， function()將盡可能快地執行，並且無法停止。
如果您隨后單擊“黑白”按鈕，由於setTimeout() ， function1()也將盡可能快且頻繁地執行，並且無法停止。
這兩個函數在爭奪CPU時間時以交替的方式修改畫布。
請考慮僅使用1個“渲染循環”，並使用停止按鈕突破循環。
與其使用setTimeout ，不如考慮使用requestAnimationFrame並檢查視頻時間，如此處所述： https : //stackoverflow.com/a/17048103/3931225
JavaScript html5視頻
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.