Hi everyone.
in my bsp i have a directory CONTENT with some videos in it
I also have a directory THUMBNAIL with the preview of these videos
i'd like to do it in an html page index.html loaded on localServer on port 3000
this is the code
<div id="videoDiv" class="row">
<div class="col-md-6">
<div class="form-group">
<video width="640" height="360" muted controls id="videoPlayer" hwz="on">
<source id='currentVID' type="video/mp4">
</video>
</div>
</div>
</div>
<canvas width="640" height="360" id="canvas" style="overflow:auto"></canvas>
<script>function check() {
noThumb = content.filter(function (el) {
return thumbnail.indexOf(el + '.png') == -1
});
//take files that haven't a thumbnail
var player = _("videoPlayer")
noThumb.foreach(vid=>{
player.src = 'CONTENT/' + vid
// currentVID.setAttribute('src', 'CONTENT/' + vid);
player.load();
player.onloadedmetadata = function () {
player.currentTime = player.duration / 2;
};
player.onseeked = function () {
var canvas = _('canvas');
var video = _('videoPlayer');
canvas.style.backgroundColor = '00f';
canvas.width = 640;
canvas.height = 360;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 640, 360);
let img =canvas.toDataURL();
...
HERE I SAVE THE THUMBNAIL ON SD/thumbnail
...
</script>
}
my problem is that Canvas doesn't generate any image. i tried this code in localhost and it works.
can't figure out what and where the issue is
maybe html version? i noticed that the <video> tag looks different on browser and on brightsign
thanks for your help (hope soon)
