Как отобразить спиннер загрузчик в видео при его буферизации? - PullRequest
Новая
       4

Как отобразить спиннер загрузчик в видео при его буферизации?

1 голос
/ 20 февраля 2020

Я создаю тег видео с помощью JavaScript и воспроизводю видео на элементе canvas, который есть в моем документе. 

var v = document.createElement('video');

Я хочу знать, когда видео буферизируется.

Поэтому я пытаюсь смоделировать медленное подключение видео с помощью devtools:

enter image description here

и addEventListener для ожидания события для элемента видео, но это не так Пожар. Также я пытаюсь сделать это с видео js и прослушивать события, но «ожидание» не вызывает у нее утери.

Что я могу сделать? 

document.addEventListener('DOMContentLoaded', function(){
  var v = document.createElement('video');
  v.crossOrigin = 'anonymous';
  v.src = "https://res.cloudinary.com/dwaquopnm/video/upload/v1582007937/blink2013_itacxp.mp4";

	var canvas = document.getElementById('c');
	var context = canvas.getContext('2d');
	var back = document.createElement('canvas');
	var backcontext = back.getContext('2d');
 
	var cw,ch;
  
  console.log({ v });
 
	v.addEventListener('play', function(){
		cw = 200;
		ch = 200;
		canvas.width = cw;
		canvas.height = ch;
		back.width = cw;
		back.height = ch;
		draw(v,context,backcontext,cw,ch);
	},false);
  
  var vd  = videojs(v);
  
  console.log({ vd });
  
  vd.on('play', function() {
    console.log('play!!');
  });
  
  vd.on('waiting', function() {
    console.log('waiting3!!');
  });
  
  vd.on('loadedmetadata', function() {
    console.log('loadedmetadata!!');
  });
  
 
  var btn = document.getElementById('clicker').addEventListener('click', function() {
    v.play();
  });
    
},false);

function draw(v,c,bc,w,h) {
  
	if(v.paused || v.ended)	return false;
	// First, draw it into the backing canvas
	bc.drawImage(v,0,0,w,h);
	// Grab the pixel data from the backing canvas
	var idata = bc.getImageData(0,0,w,h);

	// Draw the pixels onto the visible canvas
	c.putImageData(idata,0,0);
	// Start over!
	setTimeout(draw,20,v,c,bc,w,h);
}
  <button id="clicker">click</button>
  <canvas id="c" ></canvas> 
  
  <script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
...