{"id":56688,"date":"2022-08-23T03:01:39","date_gmt":"2022-08-22T17:01:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56688"},"modified":"2022-08-22T18:42:48","modified_gmt":"2022-08-22T08:42:48","slug":"file-api-file-and-reader-objects-video-first-frame-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-video-first-frame-tutorial\/","title":{"rendered":"File API File and Reader Objects Video First Frame Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"File API File and Reader Objects Video First Frame Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing_thumbnail.jpg\" title=\"File API File and Reader Objects Video First Frame Tutorial\"   \/><\/a><p class=\"wp-caption-text\">File API File and Reader Objects Video First Frame Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='File API File and Reader Objects Mimetype Tutorial' href='#fapifromt'>File API File and Reader Objects Mimetype Tutorial<\/a>&#8216;s &#8220;Client Browsing&#8221; web application gets enhanced today using the knowledge from two days ago, when we presented <a target=_blank title='Video File Browse Preview Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/video-file-browse-preview-tutorial'>Video File Browse Preview Tutorial<\/a>, and started gleaning a &#8220;first frame&#8221; image given an HTML video element populated with data.<\/p>\n<p>And so we flag the &#8220;Image&#8221; summary element with a thumbnail &#8220;first frame&#8221; image should the user browse for a video file and use &#8230; <\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-primer-tutorial\/'>\n<ul>\n<li><a target=_blank title='File object information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/File'>File<\/a> object &#8230; and &#8230;<\/li>\n<li><a target=_blank title='FileReader object information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/FileReader'>FileReader<\/a> object<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; to display and, as applicably, play that element, whether that be &#8230;<\/p>\n<ul>\n<li>video display and be able to play, as well as adding a thumbnail img (image) that can be clicked to play the video or display a full sized &#8220;first frame&#8221; img (image)<\/li>\n<li>audio display and be able to play<\/li>\n<li>img display<\/li>\n<\/ul>\n<p> &#8230; via <font color=blue>modified<\/font> body onload logic, as per &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var thecanvas = null;<br \/>\n  var thecontext = null;<br \/>\n  var thevideo = null;<\/font><br \/>\n<br \/> <br \/>\nfunction dolhsh() {<br \/>\n  <font color=blue>thecanvas = document.querySelector(\"#video-canvas\");<br \/>\n  thecontext = thecanvas.getContext(\"2d\");<br \/>\n  thevideo = document.querySelector(\"#main-video\");<br \/>\n <br \/> <br \/>\n  if (document.URL.indexOf('vionly=') != -1) {<br \/>\n      document.getElementById('files').accept='video\/*,image\/*';<br \/>\n  }<\/font><br \/>\n<br \/>\n  <font color=blue>document.querySelector(\"#files\").addEventListener('change', function() {<br \/>\n        var xtomt='', xthext='', ixthext=0;<br \/>\n        if (document.querySelector(\"#files\").files[0].type != 'application\/octet-stream') { xtomt=document.querySelector(\"#files\").files[0].type;   }<br \/>\n        if (document.querySelector(\"#files\").files[0].name.indexOf('.') != -1) { xthext='.' + document.querySelector(\"#files\").files[0].name.split('.')[eval(-1 + file.name.split('.').length)].toLowerCase(); }<br \/>\n        if (xthext != '') {<br \/>\n          for (ixthext=0; ixthext&lt;mexts.length; ixthext++) {<br \/>\n            if (mexts[ixthext] == xthext) {<br \/>\n              xtomt=mtypes[ixthext];<br \/>\n        \/\/alert('Tomt=' + tomt);<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n        \/\/alert('xtomt=' + xtomt);<br \/>\n        documentURL=document.URL;<br \/>\n        if (xtomt.indexOf('video\/') != 0 && document.getElementById('sumimg')) {<br \/>\n          document.getElementById('sumimg').innerHTML='Image';<br \/>\n        }<br \/>\n        if (xtomt.indexOf('video\/') == 0) {<br \/>\n        documentURL+='#vionly=y';<br \/>\n    \/\/ Object Url as the video source<br \/>\n    document.querySelector(\"#main-video source\").setAttribute('src', URL.createObjectURL(document.querySelector(\"#files\").files[0]));<br \/>\n<br \/>\n    \/\/ Load the video and show it<br \/>\n    thevideo.load();<br \/>\n<br \/>\n    \/\/ Load metadata of the video to get video duration and dimensions<br \/>\n    thevideo.addEventListener('loadedmetadata', function() {<br \/>\n        \/\/ Set canvas dimensions same as video dimensions<br \/>\n        thecanvas.width = thevideo.videoWidth;<br \/>\n        thecanvas.height = thevideo.videoHeight;<br \/>\n        setTimeout(() =&gt; {<br \/>\n            \/\/thecanvas.style.display = 'inline';<br \/>\n            \/\/thecanvas.style.border = '2px solid pink';<br \/>\n            thecontext.drawImage(thevideo, 0, 0, thevideo.videoWidth, thevideo.videoHeight);<br \/>\n            if (parent.document.getElementById('tdright') || documentURL.indexOf('vionly=') != -1) {<br \/>\n            if (!document.getElementById('ibchkbox').checked && wponeokay) {<br \/>\n              if (document.getElementById('dtli')) {<br \/>\n              if ((document.getElementById('dtli').innerHTML + '~').replace('&lt;hr&gt;','').trim().indexOf('&lt;\/summary&gt;~') != -1) {<br \/>\n                if (document.getElementById('dtli').innerHTML.indexOf('&lt;hr') != -1) {<br \/>\n                document.getElementById('dtli').innerHTML=document.getElementById('dtli').innerHTML.replace('&lt;hr', '&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;&lt;hr');<br \/>\n                } else {<br \/>\n                document.getElementById('dtli').innerHTML+='&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n                }<br \/>\n                if (document.getElementById('sumimg')) {<br \/>\n                  document.getElementById('sumimg').innerHTML='Image&amp;nbsp;&lt;img onclick=\"event.stopPropagation(); document.querySelector(' + \"'\" + 'video' + \"'\" + ').play(); setTimeout(dtlvize,2000); \" style=\"width:60px;border:1px dotted yellow;\" title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n\t\t\t\t  document.getElementById('dtli').open=false;<br \/>\n                }<br \/>\n              }<br \/>\n              }<br \/>\n              ourwois=window.open(wp1,wp2);<br \/>\n              ourwois.document.write('&lt;html&gt;&lt;body&gt;&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n              ourwois.document.title='First frame of video';<br \/>\n            } else if (document.getElementById('dtli')) {<br \/>\n              if ((document.getElementById('dtli').innerHTML + '~').replace('&lt;hr&gt;','').trim().indexOf('&lt;\/summary&gt;~') != -1) {<br \/>\n                if (document.getElementById('dtli').innerHTML.indexOf('&lt;hr') != -1) {<br \/>\n                document.getElementById('dtli').innerHTML=document.getElementById('dtli').innerHTML.replace('&lt;hr', '&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;&lt;hr');<br \/>\n                } else {<br \/>\n                document.getElementById('dtli').innerHTML+='&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n                }<br \/>\n                if (document.getElementById('sumimg')) {<br \/>\n                  document.getElementById('sumimg').innerHTML='Image&amp;nbsp;&lt;img onclick=\"event.stopPropagation(); document.querySelector(' + \"'\" + 'video' + \"'\" + ').play(); setTimeout(dtlvize,2000); \" style=\"width:60px;border:1px dotted yellow;\" title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n\t\t\t\t  document.getElementById('dtli').open=false;<br \/>\n                }<br \/>\n              }<br \/>\n            }<br \/>\n            \/\/document.body.style.background='URL(' + thecanvas.toDataURL() + ')';<br \/>\n            \/\/document.body.style.backgroundRepeat='no-repeat';<br \/>\n            if (parent.document.getElementById('tdright')) {<br \/>\n  parent.document.getElementById('tdright').style.width='' + thecanvas.width + 'px';<br \/>\n  parent.document.getElementById('tdright').style.height='' + thecanvas.height + 'px';<br \/>\n  parent.document.getElementById('tdright').style.background='URL(' + thecanvas.toDataURL() + ')';<br \/>\n  parent.document.getElementById('tdright').style.backgroundSize='contain';<br \/>\n  parent.document.getElementById('tdright').style.backgroundRepeat='no-repeat';<br \/>\n  parent.document.getElementById('tdright').style.backgroundPosition='0px 80px';<br \/>\n            }<br \/>\n            \/\/alert(thecanvas.toDataURL());<br \/>\n            } else if (parent.document.getElementById('tdleft')) {<br \/>\n            if (!document.getElementById('ibchkbox').checked && wponeokay) {<br \/>\n              if (document.getElementById('dtli')) {<br \/>\n              if ((document.getElementById('dtli').innerHTML + '~').replace('&lt;hr&gt;','').trim().indexOf('&lt;\/summary&gt;~') != -1) {<br \/>\n                if (document.getElementById('dtli').innerHTML.indexOf('&lt;hr') != -1) {<br \/>\n                document.getElementById('dtli').innerHTML=document.getElementById('dtli').innerHTML.replace('&lt;hr', '&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;&lt;hr');<br \/>\n                } else {<br \/>\n                document.getElementById('dtli').innerHTML+='&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n                }<br \/>\n                if (document.getElementById('sumimg')) {<br \/>\n                  document.getElementById('sumimg').innerHTML='Image&amp;nbsp;&lt;img onclick=\"event.stopPropagation(); document.querySelector(' + \"'\" + 'video' + \"'\" + ').play(); setTimeout(dtlvize,2000); \" style=\"width:60px;border:1px dotted yellow;\" title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n\t\t\t\t  document.getElementById('dtli').open=false;<br \/>\n                }<br \/>\n              }<br \/>\n              }<br \/>\n              ourwois=window.open(wp1,wp2);<br \/>\n              ourwois.document.write('&lt;html&gt;&lt;body&gt;&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n              ourwois.document.title='First frame of video';<br \/>\n            } else if (document.getElementById('dtli')) {<br \/>\n              if ((document.getElementById('dtli').innerHTML + '~').replace('&lt;hr&gt;','').trim().indexOf('&lt;\/summary&gt;~') != -1) {<br \/>\n                if (document.getElementById('dtli').innerHTML.indexOf('&lt;hr') != -1) {<br \/>\n                document.getElementById('dtli').innerHTML=document.getElementById('dtli').innerHTML.replace('&lt;hr', '&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;&lt;hr');<br \/>\n                } else {<br \/>\n                document.getElementById('dtli').innerHTML+='&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n                }<br \/>\n                if (document.getElementById('sumimg')) {<br \/>\n                  document.getElementById('sumimg').innerHTML='Image&amp;nbsp;&lt;img onclick=\"event.stopPropagation(); document.querySelector(' + \"'\" + 'video' + \"'\" + ').play(); setTimeout(dtlvize,2000); \" style=\"width:60px;border:1px dotted yellow;\" title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n\t\t\t\t  document.getElementById('dtli').open=false;<br \/>\n                }<br \/>\n              }<br \/>\n            }<br \/>\n  parent.document.getElementById('tdleft').style.background='URL(' + thecanvas.toDataURL() + ')';<br \/>\n  parent.document.getElementById('tdleft').style.backgroundSize='contain';<br \/>\n  parent.document.getElementById('tdleft').style.backgroundRepeat='no-repeat';<br \/>\n  parent.document.getElementById('tdleft').style.backgroundPosition='0px 80px';<br \/>\n            \/\/alert(thecanvas.toDataURL());<br \/>\n            } else {<br \/>\n            if (!document.getElementById('ibchkbox').checked && wponeokay) {<br \/>\n              if (document.getElementById('dtli')) {<br \/>\n              if ((document.getElementById('dtli').innerHTML + '~').replace('&lt;hr&gt;','').trim().indexOf('&lt;\/summary&gt;~') != -1) {<br \/>\n                if (document.getElementById('dtli').innerHTML.indexOf('&lt;hr') != -1) {<br \/>\n                document.getElementById('dtli').innerHTML=document.getElementById('dtli').innerHTML.replace('&lt;hr', '&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;&lt;hr');<br \/>\n                } else {<br \/>\n                document.getElementById('dtli').innerHTML+='&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n                }<br \/>\n                if (document.getElementById('sumimg')) {<br \/>\n                  document.getElementById('sumimg').innerHTML='Image&amp;nbsp;&lt;img onclick=\"event.stopPropagation(); document.querySelector(' + \"'\" + 'video' + \"'\" + ').play(); setTimeout(dtlvize,2000); \" style=\"width:60px;border:1px dotted yellow;\" title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n\t\t\t\t  document.getElementById('dtli').open=false;<br \/>\n                }<br \/>\n              }<br \/>\n              }<br \/>\n              ourwois=window.open(wp1,wp2);<br \/>\n              ourwois.document.write('&lt;html&gt;&lt;body&gt;&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n              ourwois.document.title='First frame of video';<br \/>\n            } else if (document.getElementById('dtli')) {<br \/>\n              if ((document.getElementById('dtli').innerHTML + '~').replace('&lt;hr&gt;','').trim().indexOf('&lt;\/summary&gt;~') != -1) {<br \/>\n                if (document.getElementById('dtli').innerHTML.indexOf('&lt;hr') != -1) {<br \/>\n                document.getElementById('dtli').innerHTML=document.getElementById('dtli').innerHTML.replace('&lt;hr', '&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;&lt;hr');<br \/>\n                } else {<br \/>\n                document.getElementById('dtli').innerHTML+='&lt;img title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n                }<br \/>\n                if (document.getElementById('sumimg')) {<br \/>\n                  document.getElementById('sumimg').innerHTML='Image&amp;nbsp;&lt;img onclick=\"event.stopPropagation(); document.querySelector(' + \"'\" + 'video' + \"'\" + ').play(); setTimeout(dtlvize,2000); \" style=\"width:60px;border:1px dotted yellow;\" title=\"First frame of video\" src=\"' + thecanvas.toDataURL() + '\"&gt;&lt;\/img&gt;';<br \/>\n\t\t\t\t  document.getElementById('dtli').open=false;<br \/>\n                }<br \/>\n              }<br \/>\n            }<br \/>\n            parent.document.getElementById('resultvi').innerHTML=thecanvas.toDataURL();<br \/>\n            }<br \/>\n            \/\/document.getElementById('nowplay').innerHTML=' &lt;button onclick=nowplay(); style=\"background:URL(' + thecanvas.toDataURL() + ');background-size:cover;background-repeat:no-repeat;\"&gt;Play&lt;\/button&gt;'<br \/>\n        }, 100);<br \/>\n    });<br \/>\n<br \/> <br \/>\n    } \/\/ end of video check if<br \/>\n<br \/> <br \/>\n  });<\/font><br \/>\n<br \/>\n  if (window.parent != window) {<br \/>\n    document.body.style.backgroundColor='transparent';<br \/>\n    document.getElementById('files').style.marginTop='-10px';<br \/>\n    document.getElementById('files').style.marginLeft='-12px';<br \/>\n    document.getElementById('files').style.backgroundColor='#d7d7d7';<br \/>\n    document.getElementById('distyle').innerHTML='&lt;style&gt; input { -webkit-appearance: border-bevel !important; border: 0 !important; } &lt;\/style&gt;'; \/\/ thanks to https:\/\/forum.webflow.com\/t\/disable-ios-safari-round-corners-on-form-elements\/591<br \/>\n    if (parent.document.getElementById('resultout')) {<br \/>\n      document.getElementById('files').accept='.pdf,.doc,.docx,.htm,.html,.txt';<br \/>\n    } else if (parent.document.getElementById('resultav')) {<br \/>\n      document.getElementById('files').accept='.pdf,audio\/*,video\/*,image\/*';<br \/>\n    } else if (parent.document.getElementById('resultvi') || document.URL.indexOf('vionly=') != -1) {<br \/>\n      document.getElementById('files').accept='video\/*,image\/*';<br \/>\n    }<br \/>\n  }<br \/>\n  if (('' + window.location.hash).replace('#','') != '') {<br \/>\n    document.getElementById('lhsh').innerHTML=window.location.hash.substring(1);<br \/>\n    if (window.parent) {<br \/>\n      if (parent.document.URL.indexOf('macos_say_record.php') != -1) {<br \/>\n        \/\/alert(document.URL);<br \/>\n        if (document.URL.indexOf('\/\/localhost') != -1) {<br \/>\n        document.getElementById('ttag').innerHTML='&lt;iframe style=display:none; name=posttid id=posttid src=\"\"&gt;&lt;\/iframe&gt;&lt;iframe name=tid id=tid onload=actoit(this); style=display:none; src=\"' + document.URL.split('client_browsing')[0] + '..\/Htdocs\/PHP\/animegif\/tutorial_to_animated_gif.php?rand=' + Math.floor(Math.random() * 19876543) + window.location.hash.replace(\/\\ \/g,'%20') + '\"&gt;&lt;\/iframe&gt;';<br \/>\n        } else {<br \/>\n        document.getElementById('ttag').innerHTML='&lt;iframe style=display:none; name=posttid id=posttid src=\"\"&gt;&lt;\/iframe&gt;&lt;iframe name=tid id=tid onload=actoit(this); style=display:none; src=\"' + document.URL.split('client_browsing')[0] + '..\/PHP\/animegif\/tutorial_to_animated_gif.php?rand=' + Math.floor(Math.random() * 19876543) + window.location.hash.replace(\/\\ \/g,'%20') + '\"&gt;&lt;\/iframe&gt;';<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  } else if (parent.window) {<br \/>\n    if (parent.document.URL.indexOf('macos_say_record.php') != -1) {<br \/>\n    if (parent.document.getElementById('lhsh')) {<br \/>\n      if (parent.document.getElementById('lhsh').innerHTML != '') {<br \/>\n        document.getElementById('lhsh').innerHTML=parent.document.getElementById('lhsh').innerHTML;<br \/>\n        if (document.URL.indexOf('\/\/localhost') != -1) {<br \/>\n        document.getElementById('ttag').innerHTML='&lt;iframe style=display:none; name=posttid id=posttid src=\"\"&gt;&lt;\/iframe&gt;&lt;iframe name=tid id=tid onload=actoit(this); style=display:none; src=\"' + document.URL.split('client_browsing')[0] + '..\/Htdocs\/PHP\/animegif\/tutorial_to_animated_gif.php?rand=' + Math.floor(Math.random() * 19876543) + window.location.hash.replace(\/\\ \/g,'%20') + '\"&gt;&lt;\/iframe&gt;';<br \/>\n        } else {<br \/>\n        document.getElementById('ttag').innerHTML='&lt;iframe style=display:none; name=posttid id=posttid src=\"\"&gt;&lt;\/iframe&gt;&lt;iframe name=tid id=tid onload=actoit(this); style=display:none; src=\"' + document.URL.split('client_browsing')[0] + '..\/PHP\/animegif\/tutorial_to_animated_gif.php?rand=' + Math.floor(Math.random() * 19876543) + window.location.hash.replace(\/\\ \/g,'%20') + '\"&gt;&lt;\/iframe&gt;';<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--------------------GETME\">client_browsing.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\">web application<\/a> you can try for yourself.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-video-first-frame-tutorial\/'>File API File and Reader Objects Video First Frame Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fapifromt'>Previous relevant <a target=_blank title='File API File and Reader Objects Mimetype Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-mimetype-tutorial\/'>File API File and Reader Objects Mimetype Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"File API File and Reader Objects Mimetype Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing_mimetype.jpg\" title=\"File API File and Reader Objects Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">File API File and Reader Objects Mimetype Tutorial<\/p><\/div>\n<p>A while back with <a title='File API File and Reader Objects Primer Tutorial' href='#fapifropt'>File API File and Reader Objects Primer Tutorial<\/a> we started on a Client Browsing web application which uses &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-primer-tutorial\/'>\n<ul>\n<li><a target=_blank title='File object information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/File'>File<\/a> object &#8230; and &#8230;<\/li>\n<li><a target=_blank title='FileReader object information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/FileReader'>FileReader<\/a> object<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; excellent Javascript functionality which can access and read Files off your underlying (client) device file system.<\/p>\n<p>It&#8217;s been <a target=_blank title='Search' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client_browsing.htm'>changed a lot over three years<\/a> and today we tackle a <a target=_blank title='Mime information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/MIME'>mimetype<\/a> annoyance we want to work around as we create HTML &#8230;<\/p>\n<ul>\n<li>video<\/li>\n<li>audio<\/li>\n<li>img<\/li>\n<\/ul>\n<p> &#8230; media elements, the first two of which are more likely to natively work if the mimetype is an accurate reflection of the file&#8217;s data.  And yet, often off the FileReader logic, we found it often returned the mimetype &#8220;application\/octet-stream&#8221; (a mimetype often associated with email attachments).  Better would be to use the FileReader file&#8217;s &#8230;<\/p>\n<ul>\n<li>file extension &#8230; and associate that with a more apt &#8230;<\/li>\n<li>usual mimetype &#8230; <font color=blue>as per<\/font> &#8230;<br \/>\n<code><br \/>\n  <font color=blue>var mtypes = [\"audio\/x-aiff\",\"audio\/wav\",\"audio\/x-wav\",\"audio\/x-pn-realaudio\",\"audio\/x-mpegurl\",\"audio\/x-aiff\",\"audio\/mpeg\",\"audio\/mid\",<br \/>\n      \"audio\/basic\",\"audio\/ogg\",\"video\/x-sgi-movie\",\"video\/x-msvideo\",\"video\/quicktime\",\"audio\/mp3\",\"video\/mp4\",\"video\/mpeg\",<br \/>\n      \"video\/x-la-asf\",\"video\/ogg\",\"video\/webm\",\"audio\/mp4\", \"image\/jpeg\", \"image\/jpeg\", \"image\/png\", \"image\/gif\", \"image\/bmp\", \"image\/tif\"];<br \/>\n  var mexts = [\".aiff\",\".wav\",\".wav\",\".ram\",\".m3u\",\".aiff\",\".mp3\",\".rmi\",<br \/>\n      \".snd\",\".ogg\",\".movie\",\".avi\",\".mov\",\".mp3\",\".m4v\",\".mpeg\",<br \/>\n      \".lsx\",\".ogv\",\".webm\",\".m4a\", \".jpg\", \".jpeg\", \".png\", \".gif\", \".bmp\", \".tif\"];<\/font><br \/>\n<br \/>\n    reader[ij].onloadend = (function(mfile) {<br \/>\n      return function(evt) {<br \/>\n      var dp='', ds=dssuffix, slideshowparent=false, ssuffix='0', nsuffix='2', blnks=' ', xhsf='', zhsfs=[];<br \/>\n      <font color=blue>var tomt='video\/mp4', thext='', ithext=0;<\/font><br \/>\n      if (evt.target.readyState == FileReader.DONE) { \/\/ DONE == 2<br \/>\n        <font color=blue>if (mfile.type != 'application\/octet-stream') { tomt=mfile.type;   }<br \/>\n        if (mfile.name.indexOf('.') != -1) { thext='.' + mfile.name.split('.')[eval(-1 + file.name.split('.').length)].toLowerCase(); }<br \/>\n        if (thext != '') {<br \/>\n          for (ithext=0; ithext&lt;mexts.length; ithext++) {<br \/>\n            if (mexts[ithext] == thext) {<br \/>\n              tomt=mtypes[ithext];<br \/>\n            }<br \/>\n          }<br \/>\n        }<\/font><br \/>\n        \/\/ Lots of code follows ... some of which now contains evt.target.result<font color=blue>.replace('application\/octet-stream', tomt).replace('application\/octet-stream', tomt)<\/font> to get around the application\/octet-stream mimetypes<br \/>\n        \/\/<br \/>\n      }<br \/>\n      } };<br \/>\n    })(files[ij]);<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; in such scenarios, to improve on the chances of playing that media file successfully in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html-------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html-------------------GETME\">client_browsing.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\">web application<\/a> you can try for yourself, and perhaps get to see what we mean!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-mimetype-tutorial\/'>File API File and Reader Objects Mimetype Tutorial<\/a>.<\/p-->\n<hr>\n<p id='fapifropt'>Previous relevant <a target=_blank title='File API File and Reader Objects Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-primer-tutorial\/'>File API File and Reader Objects Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"File API File and Reader Objects Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.jpg\" title=\"File API File and Reader Objects Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">File API File and Reader Objects Primer Tutorial<\/p><\/div>\n<p>Thanks to <a target=_blank title='Great link, thanks' href='https:\/\/stackoverflow.com\/questions\/12546775\/get-filename-after-filereader-asynchronously-loaded-a-file'>this great link<\/a> we discovered a better way to combine the wonders of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='File object information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/File'>File<\/a> object &#8230; and &#8230;<\/li>\n<li><a target=_blank title='FileReader object information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/FileReader'>FileReader<\/a> object<\/li>\n<\/ul>\n<p> &#8230; in the scenario of a web application (remaining correct and <font color=blue>asynchronous<\/font> in its) use of an <b>input type=file &#8220;multiple&#8221; browser element<\/b> accessing the wonderful <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'>File API<\/a>, such as &#8230;<\/p>\n<p><code><br \/>\n&lt;head&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  function onl() {<br \/>\n  document.<a target=_blank title='HTML DOM querySelector() Method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselector.asp'>querySelector<\/a>('.readBytesButtons').addEventListener('click', function(evt) {<br \/>\n    if (evt.target.tagName.toLowerCase() == 'button') {<br \/>\n      var startByte = evt.target.getAttribute('data-startbyte');<br \/>\n      var endByte = evt.target.getAttribute('data-endbyte');<br \/>\n      readBlob(startByte, endByte);<br \/>\n    }<br \/>\n  }, false);<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body style=\"background-color:#f0f0f0;\" onload=\"onl();\"&gt;<br \/>\n<b>&lt;input onclick=\"this.value=null;\" onchange=\"document.getElementById('ibut').click();\" style='width:50%;background-color:orange;' type=\"file\" id=\"files\" name=\"file\" accept=\"image\/*,video\/*,audio\/*,application\/*,text\/*\" multiple \/&gt;<\/b><br \/>\n&lt;span class=\"readBytesButtons\"&gt;<br \/>\n  &lt;button style='display:none;' data-startbyte=\"0\" data-endbyte=\"4\"&gt;1-5&lt;\/button&gt;<br \/>\n  &lt;button style='display:none;' data-startbyte=\"5\" data-endbyte=\"14\"&gt;6-15&lt;\/button&gt;<br \/>\n  &lt;button style='display:none;' data-startbyte=\"6\" data-endbyte=\"7\"&gt;7-8&lt;\/button&gt;<br \/>\n  &lt;button id=ibut style='background-color:pink;display:none;'&gt;Send to Server Top Half&lt;\/button&gt;<br \/>\n&lt;\/span&gt;<br \/>\n<\/code><\/p>\n<p>You can see us applying <font color=blue>new ideas<\/font> to our usual readBlob (that we get to output data URIs today) &#8230;<\/p>\n<p><code><br \/>\n  function readBlob(opt_startByte, opt_stopByte) {<br \/>\n    files = document.getElementById('files').files;<br \/>\n    xx=[];<br \/>\n    yy=[];<br \/>\n    ten=500;<br \/>\n    ixy=0;<br \/>\n    awis=[];<br \/>\n    ahis=[];<br \/>\n    awx=[];<br \/>\n    awy=[];<br \/>\n    awid=[];<br \/>\n    reader=[];<br \/>\n    blob=[];<br \/>\n    var ij=0;<br \/>\n    kij=0;<br \/>\n    kkij=0;<br \/>\n    lastiw=0;<br \/>\n    lastih=0;<br \/>\n    if (!files.length) {<br \/>\n      alert('Please select a file!');<br \/>\n      return;<br \/>\n    }<br \/>\n    for (ij=0; ij&lt;files.length; ij++) {<br \/>\n    file = files[ij];<br \/>\n    filen = file.name;<br \/>\n    lasttype = file.type;<br \/>\n    fs.push(file.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + file.name.replace(\/\\\\\/g,'\/').split('\/').length)]);<br \/>\n    start = parseInt(opt_startByte) || 0;<br \/>\n    stop = parseInt(opt_stopByte) || file.size - 1;<br \/>\n<br \/> <br \/>\n    reader.push(new FileReader());<br \/>\n<br \/>\n    \/\/ If we use onloadend, we need to check the readyState.<br \/>\n    \/\/ Thanks to https:\/\/stackoverflow.com\/questions\/12546775\/get-filename-after-filereader-asynchronously-loaded-a-file<br \/>\n    reader[ij].onloadend = <font color=blue>(function(mfile) {<br \/>\n      return <\/font>function(evt) {<br \/>\n      if (evt.target.readyState == FileReader.DONE) { \/\/ DONE == 2<br \/>\n        if (mfile.type.indexOf('image\/') == 0) {<br \/>\n        if (document.getElementById('ibchkbox').checked) {<br \/>\n        if (document.getElementById('gb')) {<br \/>\n        document.getElementById('gb').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');<br \/>\n        } else {<br \/>\n        document.getElementById('icontent').innerHTML+=ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf;<br \/>\n        }<br \/>\n        } else {<br \/>\n        wo=window.open(wp1,wp2);<br \/>\n        wo.document.write(ipre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + isuf);<br \/>\n        wo.document.title = mfile.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + mfile.name.replace(\/\\\\\/g,'\/').split('\/').length)];<br \/>\n        }<br \/>\n        } else if (mfile.type.indexOf('audio\/') == 0) {<br \/>\n        if (document.getElementById('ibchkbox').checked) {<br \/>\n        if (document.getElementById('ab')) {<br \/>\n        document.getElementById('ab').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');<br \/>\n        } else {<br \/>\n        document.getElementById('icontent').innerHTML+=apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('&gt;&lt;', ' id=v' + mfile.name + '&gt;&lt;');<br \/>\n        }<br \/>\n        } else {<br \/>\n        wo=window.open(wp1,wp2);<br \/>\n        wo.document.write(apre + mfile.type + amid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + asuf.replace('&gt;&lt;', ' id=a' + mfile.name + '&gt;&lt;'));<br \/>\n        wo.document.title = mfile.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + mfile.name.replace(\/\\\\\/g,'\/').split('\/').length)];<br \/>\n        }<br \/>\n        } else if (mfile.type.indexOf('video\/') == 0) {<br \/>\n        if (document.getElementById('ibchkbox').checked) {<br \/>\n        if (document.getElementById('vb')) {<br \/>\n        document.getElementById('vb').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');<br \/>\n        } else {<br \/>\n        document.getElementById('icontent').innerHTML+=vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('&gt;&lt;', ' id=v' + mfile.name + '&gt;&lt;');<br \/>\n        }<br \/>\n        } else {<br \/>\n        wo=window.open(wp1,wp2);<br \/>\n        wo.document.write(vpre + mfile.type + vmid + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + vsuf.replace('&gt;&lt;', ' id=v' + mfile.name + '&gt;&lt;'));<br \/>\n        wo.document.title = mfile.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + mfile.name.replace(\/\\\\\/g,'\/').split('\/').length)];<br \/>\n        }<br \/>\n        } else {<br \/>\n        if (document.getElementById('ibchkbox').checked) {<br \/>\n        if (document.getElementById('ib')) {<br \/>\n        document.getElementById('ib').src=evt.target.result.replace('data:;', 'data:' + mfile.type + ';');<br \/>\n        } else {<br \/>\n        document.getElementById('icontent').innerHTML+=opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf;<br \/>\n        }<br \/>\n        } else {<br \/>\n        wo=window.open(wp1,wp2);<br \/>\n        wo.document.write(opre + evt.target.result.replace('data:;', 'data:' + mfile.type + ';') + osuf);<br \/>\n        wo.document.title = mfile.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + mfile.name.replace(\/\\\\\/g,'\/').split('\/').length)];<br \/>\n        }<br \/>\n        }<br \/>\n      } };<br \/>\n    <font color=blue>})(files[ij]);<\/font><br \/>\n<br \/>\n    blob.push(file.slice(start, stop + 1));<br \/>\n    reader[ij].readAsDataURL(blob[ij]);<br \/>\n    kij++;<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; featuring in our proof of concept File API &#8220;Client Browsing&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html_GETME\" title=\"client_browsing.html\">client_browsing.html<\/a> web application&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html\" title=\"Click picture\">live run<\/a> link.  Notice how the File object&#8217;s &#8220;mfile.type&#8221; is used within the FileReader object&#8217;s &#8220;onloadend&#8221; event logic &#8230; a powerful combination of objects in an asynchronous scenario, that asynchronicity ensured by involving a <font color=blue>return<\/font> scenario &#8230; cute,huh?!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45327' onclick='var dv=document.getElementById(\"d45327\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/filereader\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45327' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56680' onclick='var dv=document.getElementById(\"d56680\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mimetype\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56680' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56688' onclick='var dv=document.getElementById(\"d56688\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/thumbnail\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56688' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s File API File and Reader Objects Mimetype Tutorial&#8216;s &#8220;Client Browsing&#8221; web application gets enhanced today using the knowledge from two days ago, when we presented Video File Browse Preview Tutorial, and started gleaning a &#8220;first frame&#8221; image given an &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-video-first-frame-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,14,37],"tags":[113,2051,1993,3531,212,2310,1797,418,419,2655,1840,4071,460,576,590,599,652,760,792,2732,885,997,2311,1273,1319,1369],"class_list":["post-56688","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-audio","tag-blob","tag-browse","tag-browsing","tag-client","tag-details","tag-extension","tag-file","tag-file-api","tag-file-extension","tag-filereader","tag-first-frame","tag-frame","tag-html","tag-image","tag-img","tag-javascript","tag-media","tag-mime","tag-mimetype","tag-operating-system-2","tag-programming","tag-summary","tag-thumbnail","tag-tutorial","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56688"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=56688"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56688\/revisions"}],"predecessor-version":[{"id":56691,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56688\/revisions\/56691"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}