{"id":69131,"date":"2025-07-23T03:01:00","date_gmt":"2025-07-22T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69131"},"modified":"2025-07-22T13:23:00","modified_gmt":"2025-07-22T03:23:00","slug":"html-element-preload-attribute-browsing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-element-preload-attribute-browsing-tutorial\/","title":{"rendered":"HTML Element Preload Attribute Browsing Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Element Preload Attribute Browsing Tutorial<\/p><\/div>\n

Two ideas, today, onto yesterday’s HTML Element Preload Attribute Primer Tutorial<\/a> …<\/p>\n

    \n
  1. on iPhone types of mobile the preload=”none”<\/i> video<\/i> used to be reduced to nothing, and this situation was improved via<\/font> …
    \n
    \n<table id=mytable style=\"width:100%;\">
    \n<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>
    \n<tr><th>none<\/th><th>metadata<\/th><th>auto<\/th><\/tr>
    \n<tr><td style=\"width:33%;<\/font>background-color:rgba(255,0,0,0.1);\" id=preloadnone>
    \n<video style=\"width:100%;\" preload=\"none\" controls><source src='\/\/www.rjmprogramming.com.au\/bluetooth_movie.mp4' type='video\/mp4'><\/source><\/video>
    \n<\/td><td style=\"width:33%;<\/font>background-color:rgba(255,255,0,0.1);\" id=preloadmetadata>
    \n<video style=\"width:100%;\" preload=\"metadata\" controls><source src='\/\/www.rjmprogramming.com.au\/bluetooth_movie.mp4' type='video\/mp4'><\/source><\/video>
    \n<\/td><td style=\"width:33%;<\/font>background-color:rgba(0,255,0,0.1);\" id=preloadauto>
    \n<video style=\"width:100%;\" preload=\"auto\" controls><source src='\/\/www.rjmprogramming.com.au\/bluetooth_movie.mp4' type='video\/mp4'><\/source><\/video>
    \n<\/td><\/tr>
    \n<\/table>
    \n<\/code>
    \n … and then there was the matter of …\n<\/li>\n
  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 …
    \n
    \nfunction lookforresult() {
    \n if (document.getElementById('result').innerHTML.indexOf('data:') == 0) {
    \n durl=document.getElementById('result').innerHTML;
    \n document.getElementById('result').innerHTML='';
    \n if (durl.indexOf('data:image\/') == 0) {
    \n document.getElementById('cto').value=durl;
    \n document.getElementById('myif').src='.\/media_preload.html?called=' + Math.floor(Math.random() * 19897865);
    \n document.getElementById('myif').style.display='block';
    \n } else if (durl.indexOf('data:video\/') == 0) {
    \n templates[0]=templates[1].replace(templates[0].split(\" src='\")[1].split(\"'\")[0], durl);
    \n document.getElementById('mysel').value='video';
    \n process(document.getElementById('mysel'));
    \n } else if (durl.indexOf('data:audio\/') == 0) {
    \n templates[1]=templates[1].replace(templates[1].split(\" src='\")[1].split(\"'\")[0], durl);
    \n document.getElementById('mysel').value='audio';
    \n process(document.getElementById('mysel'));
    \n }
    \n }
    \n}
    \n
    \nsetInterval(lookforresult, 5000);<\/code>\n<\/li>\n<\/ol>\n

    … in a second draft<\/a> media_preload.html<\/a> idea<\/a> for you today.<\/p>\n

    \n

    \n

    Previous relevant HTML Element Preload Attribute Primer Tutorial<\/a> is shown below.<\/p>\n

    \"HTML<\/a>

    HTML Element Preload Attribute Primer Tutorial<\/p><\/div>\n

    We have a very simple media …<\/p>\n