<html>
<head>
<title>Video Browse Preview - RJM Programming - August, 2022 ... thanks to https://jsfiddle.net/p42867ys/ and https://stackoverflow.com/questions/19988272/html5-canvas-drawimage-from-video-not-showing-on-first-draw</title>
<style>
canvas {
display: none;
}

video {
opacity: 0;
width: 0;
height: 0;
}
</style>
<script type=text/javascript>
var playing=false, restart=false;

function myFunction(opening) {
if (opening) {
document.body.style.backgroundColor='lightgreen';
if (!playing && restart) {
document.title='Restarting video play at ' + document.URL + ' at ' + ('' + new Date()) + '.';
document.getElementById('main-video').play();
playing=true;
} else {
document.title='You got to ' + document.URL + ' at ' + ('' + new Date()) + '.';
}
restart=false;
} else {
document.body.style.backgroundColor='yellow';
if (playing) {
document.getElementById('main-video').pause();
playing=false;
restart=true;
document.title='Paused video play at ' + document.URL + ' at ' + ('' + new Date()) + '.';
} else {
document.title='You left ' + document.URL + ' at ' + ('' + new Date()) + '.';
}
}
}

function myCloseFunction() {
if (document.visibilityState === "hidden") {
if (playing) {
document.getElementById('main-video').pause();
playing=false;
restart=true;
document.title='Paused video play at ' + document.URL + ' at ' + ('' + new Date()) + '.';
} else {
document.title='You Left ' + document.URL + ' At ' + ('' + new Date()) + '.';
}
document.body.style.backgroundColor='yellow';
} else {
myFunction(true);
}
}

document.onvisibilitychange = function() {
if (document.visibilityState === "hidden") {
document.title='You Left ' + document.URL + ' At ' + ('' + new Date()) + '.'
document.body.style.backgroundColor='yellow';
if (playing) {
document.getElementById('main-video').pause();
playing=false;
restart=true;
document.title='Paused video play at ' + document.URL + ' at ' + ('' + new Date()) + '.';
} else {
document.title='You Left ' + document.URL + ' At ' + ('' + new Date()) + '.';
}
} else {
myFunction(true);
}
};

document.onpagehide = function() {
if (document.visibilityState === "hidden") {
document.title='You Left ' + document.URL + ' at ' + ('' + new Date()) + '.';
document.body.style.backgroundColor='yellow';
if (playing) {
document.getElementById('main-video').pause();
playing=false;
restart=true;
}
} else {
myFunction(true);
}
};

</script>
</head>
<body onload='onl();' data-onvisibilitychange="myCloseFunction();" data-onpagehide="myFunction(false);" onpageshow="myFunction(true);">
<h1>Video<span id=nowplay></span> Browse Preview</h1>
<h3>RJM Programming - August, 2022</h3>
<h4>Thanks to <a target=_blank title='https://jsfiddle.net/p42867ys/' href='//jsfiddle.net/p42867ys/'>https://jsfiddle.net/p42867ys/</a> and <a target=_blank title='https://stackoverflow.com/questions/19988272/html5-canvas-drawimage-from-video-not-showing-on-first-draw' href='//stackoverflow.com/questions/19988272/html5-canvas-drawimage-from-video-not-showing-on-first-draw'>https://stackoverflow.com/questions/19988272/html5-canvas-drawimage-from-video-not-showing-on-first-draw</a></h4>

<table><tr><td style='vertical-align:top;' id=tdleft>
<input type="file" id="file" name="file" accept="video/*"></td><td style='vertical-align:top;' id=tdmid></td><td id=tdright>

<video onplaying="playing=true;" onpause="playing=false;" onended="playing=false;" id="main-video" controls>
<source type="video/mp4">
</video>

<canvas id="video-canvas"></canvas>
</td></tr>
<tr><td colspan=2><br><iframe frameborder=0 id=cbi data-style='border-top:1px solid black;border-bottom:1px solid black;border-left:2px solid yellow;border-right:1px solid yellow;' style='width:173px;height:228px;DISPLAY:NONE;' src='/HTMLCSS/client_browsing.htm?vionly=y'></iframe></td></tr>
</table>
<script type='text/javascript'>
var rvicont='';
var isvideo=false;
var thecanvas = null;
var thecontext = null;
var thevideo = null;


function nowplay() {
document.getElementById('tdleft').style.background='URL(' + thecanvas.toDataURL() + ')';
document.getElementById('tdleft').style.backgroundSize='contain';
document.getElementById('tdleft').style.backgroundRepeat='no-repeat';
document.getElementById('tdleft').style.backgroundPosition='0px 80px';
document.getElementById('tdmid').innerHTML='<br><br><br><br><br><br><-<br>First<br>Frame<br><br>-><br>Video';
thecanvas.style.opacity='0.0';
thecanvas.style.display='none';
thevideo.width = thecanvas.width;
thevideo.height = thecanvas.height;
thevideo.style.width = '' + thecanvas.width + 'px';
thevideo.style.height = '' + thecanvas.height + 'px';
thevideo.style.opacity='1.0';
thevideo.controls = true;
thevideo.style.display='block';
thevideo.play();
}


function onl() {
thecanvas = document.querySelector("#video-canvas");
thecontext = thecanvas.getContext("2d");
thevideo = document.querySelector("#main-video");

document.querySelector("#file").addEventListener('change', function() {

// Object Url as the video source
document.querySelector("#main-video source").setAttribute('src', URL.createObjectURL(document.querySelector("#file").files[0]));

// Load the video and show it
thevideo.load();

// Load metadata of the video to get video duration and dimensions
thevideo.addEventListener('loadedmetadata', function() {
// Set canvas dimensions same as video dimensions
thecanvas.width = thevideo.videoWidth;
thecanvas.height = thevideo.videoHeight;
setTimeout(() => {
thecanvas.style.display = 'inline';
thecanvas.style.border = '2px solid pink';
thecontext.drawImage(thevideo, 0, 0, thevideo.videoWidth, thevideo.videoHeight);
document.getElementById('nowplay').innerHTML=' <button onclick=nowplay(); style="background:URL(' + thecanvas.toDataURL() + ');background-size:cover;background-repeat:no-repeat;">Play</button>'
}, 100);
});

// thecontext.drawImage(thevideo, 0, 0);
// thevideo.addEventListener('canplaythrough', function() {
// thecanvas.style.display = 'inline';
// thecanvas.style.border = '2px solid pink';
// document.title='' + thevideo.videoWidth + ',' + thevideo.videoHeight;
// thecontext.drawImage(thevideo, 0, 0, thevideo.videoWidth, thevideo.videoHeight);
// });

});
}

function afterrvi() {
//alert('Show now');
if (!isvideo) {
document.getElementById('tdleft').style.background='URL(' + rvilook + ')';
document.getElementById('tdleft').style.backgroundSize='contain';
document.getElementById('tdleft').style.backgroundRepeat='no-repeat';
document.getElementById('tdleft').style.backgroundPosition='0px 80px';
}
}

function rvilook() {
if (document.getElementById('resultvi')) {
if (document.getElementById('resultvi').innerHTML != '') {
if (document.getElementById('resultvi').innerHTML.indexOf('video/') != -1) {
rvilook=document.getElementById('resultvi').innerHTML;
isvideo=true;
afterrvi();
} else if (document.getElementById('resultvi').innerHTML.indexOf('image/') != -1) {
rvilook=document.getElementById('resultvi').innerHTML;
isvideo=false;
document.getElementById('resultvi').innerHTML='';
afterrvi();
}
}
}
setTimeout(rvilook, 2000);
}

setTimeout(rvilook, 2000);
</script>
<div id=resultvi style=display:none;></div>
</body>
</html>