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('waiting', handleEvent);
video.addEventListener('abort', handleEvent);
video.addEventListener('volumechange', handleEvent);
video.addEventListener('play', handleEvent);
video.addEventListener('seeking', handleEvent);
video.addEventListener('canplaythrough', handleEvent);
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);
}
});
<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;
}