Saya mencoba memasang beberapa filter pada video dengan menggambarnya ke kanvas. Masalahnya adalah ketika elemen video tidak terlihat, ia berhenti menggambar. Idealnya saya ingin menyembunyikan semua elemen video.

Saya pikir itu hanya mempengaruhi browser chrome. Juga, sepertinya jika Anda berhenti dan memulainya dengan mouse, masalahnya berhenti.

function drawToCanvas() {
  let vid = document.getElementById('vid1')
  let can = document.getElementById('can1')
  let ctx = can.getContext('2d')
  ctx.drawImage(vid, 0, 0, 400, 224)
  setTimeout(drawToCanvas, 30)
}

document.body.addEventListener("load", drawToCanvas(), false);
html {
  padding: 20px 0;
  background-color: #efefef;
}

body {
  width: 400px;
  padding: 40px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

video {
  width: 400px;
  display: block;
}

#can1 {
  position: absolute;
  top: calc( 100vh + 100px);
}
<canvas id='can1' height=224px width=400px></canvas>


<video autobuffer controls autoplay muted=true id='vid1'>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
<br> Above is the Video element. 
<br> Below is the Canvas

<br><br><br> Why does the canvas below stop when the video is scrolled out of view
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
2
dooderson 3 April 2019, 01:21

1 menjawab

Jawaban Terbaik

Ya, mereka menjeda video yang dibungkam yang ditambahkan ke dokumen saat tidak ada di layar.

Perhatikan bahwa tidak menambahkan video ini sama sekali di dalam dokumen tidak akan mengekspos perilaku ini:

(()=>{
  const vid = document.createElement('video');
  const ctx = document.getElementById('can1')
    .getContext('2d');
    
  ctx.filter = 'sepia(100%)';
  vid.muted = true;
  vid.src = "http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4";
  vid.play().then(anim);

  function anim() {
    requestAnimationFrame(anim);
    ctx.drawImage(vid, 0, 0, 400, 224)
  }
})();
<canvas id='can1' height=224px width=400px></canvas>

Jadi, jika Anda benar-benar membutuhkan elemen video itu juga, Anda dapat memberi makan elemen video asli dengan MediaStream yang diambil dari video di luar layar dan memetakan kontrolnya ke video di luar layar ini.

visibleVid.srcObject = offscreenVid.captureStream();
visibleVid.onpause = e => offscreenVid.pause();
// ...
function begin() {
  const visibleVid = document.getElementById('vid1');
  const offscreenVid = visibleVid.cloneNode(true);
  const can = document.getElementById('can1');
  const ctx = can.getContext('2d');
  ctx.filter = 'sepia(100%)';

  visibleVid.onpause = e => offscreenVid.pause();
  visibleVid.onplaying = e => offscreenVid.play();

  offscreenVid.play().then(() => {
    visibleVid.srcObject = offscreenVid.captureStream ?
      offscreenVid.captureStream() :
      offscreenVid.mozCaptureStream();
    visibleVid.play();
    anim();
  });

  function anim() {
    requestAnimationFrame(anim);
    ctx.drawImage(offscreenVid, 0, 0, 400, 224)
  }
}

onload = begin;
html {
  padding: 20px 0;
  background-color: #efefef;
}

body {
  width: 400px;
  padding: 40px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

video {
  width: 400px;
  display: block;
}

#can1 {
  position: absolute;
  top: calc( 100vh + 100px);
}
<canvas id='can1' height=224px width=400px></canvas>


<video autobuffer controls autoplay muted=true id='vid1' crossorigin="anonymous">
  <!-- we need a crossorigin safe media -->
  <source id="mp4" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" type="video/mp4">
https://stackoverflow.com/questions/55484353/canvas-drawimage-of-autoplayed-video-only-works-when-video-element-is-visible#</video>
<br> Above is the Video element.
<br> Below is the Canvas

<br><br><br> Why does the canvas below stop when the video is scrolled out of view
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Tapi itu banyak overhead untuk browser, dan Anda akan kehilangan kemungkinan untuk mencari dari elemen ini (karena sekarang menyajikan aliran).
Jadi jika Anda benar-benar membutuhkan ini, Anda juga dapat mempertimbangkan untuk melakukan kontrol Anda sendiri, di atas kanvas lain.

Dan akhirnya, mereka jelas hanya melakukan ini untuk video yang dibisukan, jadi jika Anda setuju dengan kehilangan fitur putar otomatis, Anda juga dapat menghapus atribut muted itu dan cukup atur volumenya ke 0:

(() => {
  let vid = document.getElementById('vid1');
  let can = document.getElementById('can1');
  let ctx = can.getContext('2d');

  vid.volume = 0;  // replace muted
  vid.play()
    .catch(() => {
      // in case we're not allowed to play, wait for user approval
      console.log('click anywhere to start playback');
      addEventListener('click',
        e => {console.clear();vid.play()},
        {once:true}
      )
    });
   anim();
   
   function anim() {
    requestAnimationFrame(anim);
    ctx.drawImage(vid, 0, 0, 400, 224)
   }
})();
html {
  padding: 20px 0;
  background-color: #efefef;
}

body {
  width: 400px;
  padding: 40px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

video {
  width: 400px;
  display: block;
}

#can1 {
  position: absolute;
  top: calc( 100vh + 100px);
}
<canvas id='can1' height=224px width=400px></canvas>


<video autobuffer controls autoplay id='vid1'>
  <source id="mp4" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" type="video/mp4">
</video>
<br> Above is the Video element. 
<br> Below is the Canvas

<br><br><br> Why does the canvas below stop when the video is scrolled out of view
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
1
Kaiido 3 April 2019, 07:03