Create post summary for video post

video post summary
Some readers asked me how to make a frontpage like simplextube2 . The video player is shown directly in homepage . The idea behind this script is similar to other 'readmore' script ,but it focus on video .

First , we set the form for a video post :
video link ...
endofvid
[starttext]
text for description
[endtext]
it means when we have a video post ,we have to post it as exact as this form .For example with a video from youtube :
http://youtube.com/..... endofvid
[starttext]
this is description
[endtext]
The term 'endofvid' is used to marked the end of video link  ,the text in front of this term is video link .

Second ,when creating readmore ,the script will scan all post content ,searching for the term 'endofvid' ,extract the text before this term and determine which service it is belonged . For example ,if the text contain the word ' youtube' ,it means video service provider is youtube . If the text contain 'vimeo' ,it means the video provider is vimeo .

Third , create a video player for the video service we determine above . For example ,if the video link above is belong to youtube ,in this step ,we create a youtube player . After creating video player ,feed the video link to player ,and show it in front page .

Fourth ,delete marked words 'endofvid' ,'[starttext]' ,'[endtext]

Now we move to the script

Insert this code before <body> 

<script type='text/javascript'>
  <!--//--><![CDATA[//><!--
var thumbnail_mode = 'float' ;
 summary_noimg = 50;
 summary_img = 50;
 img_thumb_height = 120;
 img_thumb_width = 192;

function stripHtmlTags(s,max){return s.replace(/&lt;.*?&gt;/ig, '').split(/\s+/).slice(0,max-1).join(' ')}


function createVideo(pID){
    var div = document.getElementById(pID);
    var postcontent = div.innerHTML;
   
    if (postcontent.indexOf("endofvid")!=-1) {
        var vidlink = postcontent.substring(0,postcontent.indexOf("endofvid"));
       
        if (/\.youtube\.com\/watch/i.test(vidlink))
        {               
        var vidid = vidlink.substring(vidlink.indexOf("http://www.youtube.com/watch?v=")+31)
        embedvid = '<object width="450" height="260"><param name="movie" value="http://www.youtube.com/v/'+ vidid + '&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ vidid + '&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="450" height="260"></embed></object>'
        }
        else if (/\.liveleak\.com\/view/i.test(vidlink))
         {
         var vidid = vidlink.substring(vidlink.indexOf("http://www.liveleak.com/view?i=")+31)
        embedvid = '<object width="450" height="260"><param name="movie" value="http://www.liveleak.com/e/'+ vidid + '&hl=en_US&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.liveleak.com/e/'+ vidid + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="450" height="260"></embed></object>'     
        }
        else if (/vimeo\.com\/[0-9]+/i.test(vidlink))
        {
        var vidid = vidlink.substring(vidlink.indexOf("http://vimeo.com/")+17)
        embedvid = '<object width="450" height="260"><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id='+ vidid + '&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://vimeo.com/moogaloop.swf?clip_id='+ vidid + '&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=1&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="450" height="260"></embed></object>'
           }
        else if (/dailymotion\.com\/video/i.test(vidlink))
        {
        var vidid1= vidlink.split("_");
        var vidid= vidid1[0].substring(vidid1[0].indexOf("http://www.dailymotion.com/video/")+33)
        embedvid = '<object width="450" height="260"><param name="movie" value="http://www.dailymotion.com/swf/video/'+ vidid + '?width=&theme=none&foreground=%23F7FFFD&highlight=%23FFC300&background=%23171D1B&start=&animatedTitle=&iframe=0&additionalInfos=0&autoPlay=0&hideInfos=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.dailymotion.com/swf/video/'+ vidid + '?width=&theme=none&foreground=%23F7FFFD&highlight=%23FFC300&background=%23171D1B&start=&animatedTitle=&iframe=0&additionalInfos=0&autoPlay=0&hideInfos=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="450" height="260"></embed></object>'
        }
        else if (/metacafe\.com\/watch/i.test(vidlink))
        {       
        var vidid= vidlink.substring(vidlink.indexOf("http://www.metacafe.com/watch/")+30)
        embedvid = '<embed flashVars="playerVars=showStats=yes|autoPlay=no|" src="http://www.metacafe.com/fplayer/'+vidid+'.swf" width="450" height="260" wmode="transparent" allowFullScreen="true" allowScriptAccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>'
        }       
        else
        {
        vidid="";
        embedvid="";
        }
       
     }
       
       
   
    postcontent = postcontent.replace (vidlink,"");
    postcontent = postcontent.replace("endofvid","");
    postcontent = postcontent.replace("[starttext]","");
    postcontent = postcontent.replace("[endtext]","");
   
    var embedvid1 = '<span class="notxt">'+embedvid+'</span>';
   
    var summary =  embedvid1 + postcontent;
    div.innerHTML = summary;
}




//--><!]]>

</script>

Content of this script is as exact as the explanation above ,step by step . In this script ,there are 5 video service : youtube ,liveleak,vimeo,dailymotion and metacafe . If you want another video service that allow video embedding ,feel free to suggest :D

Now ,move to the body of the post ,find this code

<data:post.body/>

and replace it with
<div expr:id='&quot;summary&quot; + data:post.id' style="margin-top:10px;">            
                                     <data:post.body/>
                                 </div>
                                 <script type='text/javascript'>createVideo(&quot;summary<data:post.id/>&quot;);</script>

Now let's check for the post summary . You can create a post as the structure in step 1 ,insert a video from youtube ,and then see the result of post summary . Does the post show up with post summary and a video player ?

Share this post

Advertisement

0 comments:

Post a Comment