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

9 comments

  1. im happy that im the first comment you how are you and why you not write long time i miss to read to you thanks you came back
    i have to ask my blog www.ezaay.net was in alexa 45000 and i cheaack today i see it 500000 why ?
    www.ezaay.net

    ReplyDelete
  2. It's very awesome...thanks for sharing..

    ReplyDelete
  3. It will be so great If you can add facebook video service to this script

    ReplyDelete
  4. hi,
    i am using a simplex template,recently i have noticed a funny problem that whenever i post a word with word 'nec' it links automatically to simplexdesign blog,for ex:necessary,bottleneck.
    plz check this link where 'nec'essary word is linked to simplexdesign.blogspot.com
    http://www.trendingindia.com/2011/10/russia-to-launch-four-glonass.html

    ReplyDelete
  5. hi first thnx for this great trick i had a problem i found two code
    from dont know who im gonna need ?

    http://pczreview.blogspot.com/

    ReplyDelete
  6. hello i need ur help, I'm using ur simplesEnews theme and i want to replace TWO COLUMN BOXES with four COLUMN BOXES. please give me instruction. and the width of every column is 250px. without sidebar.
    please give me instruction at my email rajendrakohinoor@gmail.com
    check this image (http://1.bp.blogspot.com/-XNHEdBo8_ng/Tsr9YgHEMZI/AAAAAAAAFSI/3oX2a8KQmWA/s1600/Four+COLUMN+BOXES.bmp)
    please give me advice.

    ReplyDelete
  7. I did follow it and work on youtube but not in vimeo. How can I use other services?

    ReplyDelete
  8. I agree! But I do consider HTML5 to be more than just the spec that the W3C validator checks your document against. Part of html5 media playerinvolves standards for bolt on technology including web workers, CSS3, server sent events, etc. that are going to (I hope) revolutionize the web and do away with the need for 3rd party browser plugins

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers