SOURCE

console 命令行工具 X clear

                    
>
console
const loadVideo = document.querySelector('button');
const video = document.querySelector('video');
const eventLog = document.querySelector('.event-log-contents');
let source = null;

function handleEvent(event) {
  
    eventLog.textContent = eventLog.textContent + `${event.type}\n`;
  if(event.type = 'progress'){
    console.log(video.buffered)
  }
}

video.addEventListener('loadstart', handleEvent);
video.addEventListener('progress', handleEvent);
video.addEventListener('canplay', handleEvent);
video.addEventListener('loadeddata', handleEvent);
// video.addEventListener('timeupdate', handleEvent);
video.addEventListener('waiting', handleEvent);
video.addEventListener('abort', handleEvent);
video.addEventListener('volumechange', handleEvent);
video.addEventListener('play', handleEvent);
video.addEventListener('seeking', handleEvent);
video.addEventListener('canplaythrough', handleEvent);

// var captureStream = video.captureStream();
loadVideo.addEventListener('click', () => {

    if (source) {
        video.load();
    } else {
        loadVideo.textContent = "Reset example";
        source = document.createElement('source');
        source.setAttribute('src', 'http://upos-hz-mirrorbsyu.acgvideo.com/upgcxcode/07/90/10169007/10169007-1-16.mp4?e=ig8euxZM2rNcNbhB7WdVhoMz7WUVhwdEto8g5X10ugNcXBB_&deadline=1565844321&gen=playurl&nbs=1&oi=241722625&os=bsyu&platform=html5&trid=3c28ea97f46f45e7ac7f3e82bfa9d54b&uipk=5&upsig=04dbbd4ee5a563d73fcdb8fb21c5fe17&uparams=e,deadline,gen,nbs,oi,os,platform,trid,uipk&mid=0');
        source.setAttribute('type', 'video/webm');
        video.appendChild(source);
    }
});
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event -->

<div class="example">

    <button type="button">Load video</button>
    <video controls width="250"></video>

    <div class="event-log">
        <label>Event log:</label>
        <textarea readonly class="event-log-contents"></textarea>
    </div>

</div>
.event-log-contents {
  width: 18rem;
  height: 5rem;
  border: 1px solid black;
  margin: .2rem;
  padding: .2rem;
}

.example {
  display: grid;
  grid-template-areas:
              "button log"
              "video  log";
}

button {
  grid-area: button;
  width: 10rem;
  margin: .5rem 0;
}

video {
  grid-area: video;
}

.event-log {
  grid-area: log;
}

.event-log>label {
  display: block;
}