Comment rendre plus rapide et plus accessible une page web contenant du flash ?
Une première réponse serait de ne pas intégrer de flash dans les pages web.
Mais si nous avons réellement besoin de flash et que nous souhaitons partager une vidéo intéressante avec la communauté ?
Nous allons charger l’objet flash à la demande de l’utilisateur.
Voici un hack du plugin wordpress video plugin inspiré de ce qui se fait sur Facebook.
Télécharger l’archive wordpress-video-plugin-hack.tar
hack-minify.js
function LoadContent(page,usediv){try{xmlhttp=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");}catch(e){alert("Error: Could not load page.");}
document.getElementById(usediv).innerHTML='<img src="http://www.benjaminbaudouin.com/wp-content/plugins/wordpress-video-plugin-hack/loading.gif">';xmlhttp.onreadystatechange=function(){if((xmlhttp.readyState==4)&&(xmlhttp.status==200)){document.getElementById(usediv).innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET",page);xmlhttp.send(null);return false;}
function toggle_visibility(id){var e=document.getElementById(id);if(e.style.display=='block')
e.style.display='none';else
e.style.display='block';}
function is_visible(id){var e=document.getElementById(id);if(e.style.display=='block')
return 1;else
return 0;}
inclusion dans wordpress header.php
... wp_head(); ?>
<script type="text/javascript" src="http://www.benjaminbaudouin.com/wp-content/plugins/wordpress-video-plugin-hack/hack-minify.js"></script>
</head> ...
hack de video.php
// Youtube Code
...
define("YOUTUBE_TARGET", "<div id=\"flashobj###URL###\"><a onclick=\"LoadContent('http://www.benjaminbaudouin.com/wp-content/plugins/wordpress-video-plugin-hack/flashobj.php?url=http://www.youtube.com/v/###URL###&width=###WIDTH###&height=###HEIGHT###','flashobj###URL###');toggle_visibility('flashobj###URL###');\"><img class=\"videothumb\" src=\"http://i1.ytimg.com/vi/###URL###/default.jpg\"><span class=\"videothumbplay\"><img id=\"thumbplay###URL###\" src=\"http://www.benjaminbaudouin.com/wp-content/plugins/wordpress-video-plugin-hack/fbvbs43b.png\"></span></a></div>");
...
les images fbvbs43b.png et loading.gif
style.css (thème thematic)
.videothumb {
cursor: pointer;
}
.videothumbplay {
cursor: pointer;
margin-left: -115px;
}
Voila à quoi ressemble le hack une fois implémenté (cliquez sur l’image pour lancer la vidéo):
Follow Me!