HTML Element Preload Attribute Browsing Tutorial

HTML Element Preload Attribute Browsing Tutorial

Two ideas, today, onto yesterday’s HTML Element Preload Attribute Primer Tutorial …

1. on iPhone types of mobile the preload=”none” video used to be reduced to nothing, and this situation was improved via …
   
<table id=mytable style="width:100%;">
<tr><th style="overflow-y:hidden;" colspan=3>Media <select id=mysel onchange=process(this);><option value=video>Video</option><option value=audio>Audio</option><option value=image>Image</option></select> Preload Attribute Effects <iframe class="spag" scrolling="no" onload="limitb(this);" id="cbi" frameborder="0" style="overflow-y:hidden;width:173px;height:218px;margin-top:-204px;" data-accept="video/*audio/*" src="/HTMLCSS/client_browsing.htm"></iframe></th></tr>
<tr><th>none</th><th>metadata</th><th>auto</th></tr>
<tr><td style="width:33%;background-color:rgba(255,0,0,0.1);" id=preloadnone>
<video style="width:100%;" preload="none" controls><source src='//www.rjmprogramming.com.au/bluetooth_movie.mp4' type='video/mp4'></source></video>
</td><td style="width:33%;background-color:rgba(255,255,0,0.1);" id=preloadmetadata>
<video style="width:100%;" preload="metadata" controls><source src='//www.rjmprogramming.com.au/bluetooth_movie.mp4' type='video/mp4'></source></video>
</td><td style="width:33%;background-color:rgba(0,255,0,0.1);" id=preloadauto>
<video style="width:100%;" preload="auto" controls><source src='//www.rjmprogramming.com.au/bluetooth_movie.mp4' type='video/mp4'></source></video>
</td></tr>
</table>

   … and then there was the matter of …
2. content choices were pretty static but we thought that could be bettered by offering the user the chance to browse for local media files themselves …
   
function lookforresult() {
if (document.getElementById('result').innerHTML.indexOf('data:') == 0) {
durl=document.getElementById('result').innerHTML;
document.getElementById('result').innerHTML='';
if (durl.indexOf('data:image/') == 0) {
document.getElementById('cto').value=durl;
document.getElementById('myif').src='./media_preload.html?called=' + Math.floor(Math.random() * 19897865);
document.getElementById('myif').style.display='block';
} else if (durl.indexOf('data:video/') == 0) {
templates[0]=templates[1].replace(templates[0].split(" src='")[1].split("'")[0], durl);
document.getElementById('mysel').value='video';
process(document.getElementById('mysel'));
} else if (durl.indexOf('data:audio/') == 0) {
templates[1]=templates[1].replace(templates[1].split(" src='")[1].split("'")[0], durl);
document.getElementById('mysel').value='audio';
process(document.getElementById('mysel'));
}
}
}

setInterval(lookforresult, 5000);

… in a second draft media_preload.html idea for you today.

Previous relevant HTML Element Preload Attribute Primer Tutorial is shown below.

HTML Element Preload Attribute Primer Tutorial

We have a very simple media …

• video
• audio
• image

… “proof of concept” idea for you today, touching on ideas with web browser web applications concerning the preloading, or not, for media files.

With video and audio elements, this can involve the use of the HTML element attribute …


preload


… while for images, they can be helped with preloading via an HTML link element such as …


<link rel="preload" href="/inhouse_slideshow_css.jpeg" as="image" type="image/jpeg" />


… within the head element.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.