Tích hợp AncPlay Media Player cho Blogspot

Mấy hôm nay có nhiều bạn hỏi mình về cách post phim ,video nhiều tập cho blogspot,chiều rảnh nên ngồi viết bài này hướng dẫn các bạn tích hợp tiện ích AncPlay Media Player vào cho Blogspot.Vậy tiện AncPlay Media Player là gì ? 
Ancplay được phát triển bởi Suzuki_aka, nó cho phép người xem dễ dàng xem nhiều video khác nhau trên bài viết của bạn. Hay nói dễ hiểu hơn nó giống như 1 trình xem video đơn giản, với 1 phần hiển thị video và 1 phần hiển thị danh sách các video. Các bạn chỉ việc click vào danh sách các video và xem. Tiện ích hỗ trợ xem video từ các server:  youtube.com, dailymotion.com Sau khi cài đặt tiện ích này thì bạn sẽ không phải làm thủ công như trước kia là khi ta muốn nhúng 1 đoạn video nào đó vào blog, ta thường quen với việc nhúng code của nó mà server đó cung cấp. Nếu muốn nhúng nhiều video khác nhau thì ta lại dán 1 đoạn code khác nhau. Và nếu bài viết nào đó phải nhúng nhiều đoạn video vào thì sao? Ví dụ như bạn muốn đăng vào blog 40 tập phim của 1 bộ phim chẳng hạn, nếu ta dùng cách thủ công là chèn tất cả 40 đoạn code của 40 video phim vào thì cũng được, nhưng như thế trông bài viết sẽ dài lê thê trông rất thiếu thẩm mỹ.Nên tiện ích AncPlay Media Player là 1 giải pháp tối ưu để giải quyết các vấn đề trên.Hiện nay AncPlay đã ra nhiều phiên bản và cách cài đặt các phiên bản cũng rất khác nhau,mình giới thiệu bản này là rất dễ cài đặt và sử dụng nhất ,các bạn cứ yên tâm cài đặt và làm theo hướng dẫn bên dưới.Không dài dòng nữa bắt đầu thực hiện thôi. 

DEMO

Sau đây là các bước chèn tiện ích vào blog :
B1. Vào trong code template (không cần nhấp mở rộng mẫu tiện ích), sau đó chèn đoạn code bên dưới vào trước thẻ đóng </body> , các bạn có thể chèn ở vị trí khác cũng được, nhưng bắt buộc phải chèn sau tiện ích Blog1 (phần hiển thị bài viết) :

<!-- AncPlay Media Player Start- Chinhtrucblog.Blogspot.Com -->
<script type='text/javascript'>
    //<![CDATA[
    function Media(){this.re=function(e){y=$_(e).innerHTML;y=y.replace(/\[id\]/gi,"<span id='anc_id' style = 'display: none;'>");y=y.replace(/\[\/id\]/gi,"</span>");$_(e).innerHTML=y;z=$_("anc_id").innerHTML;if(z.indexOf("|")==-1&&z.indexOf(";")==-1){z="Xem Full;"+z+"|"}return z};this.pl=function(e,n,r){if(e.indexOf("|")!=-1){var i=function(t,n){return e.split("|")[t].split(";")[n]},s=function(t){return e.split("|")[t].split(";").length},o=e.split("|").length;ii=["0","a","b","c","d","e","f","g","h","i","k","l","m","n","o","p","q","r","s"],ab="",po=" ",t=["Server Youtube: ","Server Videobb: ","Server Clip.vn: ","Server CyWorld: ","Server Zing: ","Server PUB.VN: ","Server Daily:","Server Videozer:","Server 4shared:","Server 2shared:","Server Picasa2:","Server Picasa:"],tt=["youtube.com","videobb.com","clip.vn","cyworld.vn","video.zing.vn","stream.pub.vn","dailymotion.com","videozer.com","4shared.com","2shared.com","anc.ps","picasaweb.google.com"];h=i(0,1)}else{h=e}ot=M.ob(h);if($$_(r,"a").length==0){if(o>1){for(var u=0;u<o;u++){k=i(u,0);for(var a=1;a<s(u);a++){w=i(u,a);if(s(u)==2){ab=""}else{ab=ii[a]}if(k!="Xem Full"){if(w.indexOf("octoshape")!=-1){po+="<a href='#xem_phim?"+k+"' onclick=\"Rload('"+w+"')\"> "+k+ab+" </a> "}else{for(var f=0;f<t.length;f++){if(w.indexOf(tt[f])!=-1){t[f]="<span class='ancplay_fd'>"+t[f]+"</span>";t[f]+="<a href='#xem_phim?"+k+"' onclick=\"M.pl('"+w+"','"+n+"','"+r+"')\"> "+k+ab+" </a> "}}}}else{if(w.indexOf("octoshape")!=-1){po+="<a href='#xem_phim' onclick=\"Rload('"+w+"')\"> Xem Full </a>"}else{po+="<a href='#xem_phim' onclick=\"M.pl('"+w+"','"+n+"','"+r+"')\"> Xem Full </a>"}}}}}for(var l=0;l<t.length;l++){if(t[l].indexOf("</a>")!=-1){$_(r).innerHTML+="<span id='anc_"+l+"'>"+t[l]+"</span><br/>"}}$_(n).innerHTML=ot;$_(r).innerHTML+=po}else{$_(n).innerHTML=ot}};this.ob=function(e){if(e.indexOf(tt[0])!=-1){e=e.replace(/\/watch\?v=/gi,"/embed/");e=e.replace(/\&feature=related/gi,"");obj=o(e)[0]}if(e.indexOf(tt[1])!=-1){e="http://www.videobb.com/e/"+e.match(/([-|~_0-9A-Za-z]+$)/g);obj=o(e)[3]}if(e.indexOf(tt[2])!=-1){obj=o(e)[3]}if(e.indexOf(tt[4])!=-1){e=e.replace(/\/video\//gi,"/player/flvPlayer.swf?=false&xmlFile=");obj=o(e)[3]}if(e.indexOf(tt[5])!=-1||e.indexOf(tt[3])!=-1||e.indexOf(tt[8])!=-1||e.indexOf(tt[9])!=-1){obj=o(e)[2]}if(e.indexOf(tt[6])!=-1){e=e.replace(/\/video\//gi,"/embed/video/");obj=o(e)[0]}if(e.indexOf(tt[7])!=-1){e="http://videozer.com/embed/"+e.match(/([-|~_0-9A-Za-z]+$)/g);obj=o(e)[3]}if(e.indexOf("octoshape")!=-1){obj=o(e)[1]}return obj}}var $_=function(e){if(!document.getElementById){return}else{return document.getElementById(e)}};var $$_=function(e,t){return document.getElementById(e).getElementsByTagName(t)},p_str="",M=new Media;var o=function(e){var t="allowfullscreen='true' allowscriptaccess='always' width='650' height='420' type='application/x-shockwave-flash'",n="src='"+e+"?autoplay=1&showinfo=0&rel=0&fs=1'";return data=["<iframe  "+t+n+" frameborder='0' ></iframe>","<object data='https://sites.google.com/site/flashdautocrazy/player1.swf' name='player' id='player' "+t+"></object>","<object data='https://sites.google.com/site/flashdautocrazy/jw.swf' flashvars = 'autostart=true&backcolor=#000&frontcolor=#8A2BE2&file="+e+"' "+t+"></object>","<embed "+t+n+"></embed>"]}
    //]]>
</script>
<script type='text/javascript'>
    //<![CDATA[
    function Rload(e){player_stream=""+e+"";swfobject.embedSWF("http://cdn.octoshape.net/resources/player/infinitehd/player1.swf",player_id,player_width,player_height,"10.0.0",null,null,params,attributes);swfobject.addDomLoadEvent(fixReference)}M.pl(M.re("Blog1"),"anc_pl","anc_tp");var anc_ida=M.re("Blog1").split("|")[0].split(";")[1];$_("anc_content").innerHTML=$_("anc_nd").innerHTML;var player_id="player";var player_width=200;var player_height=100;var player_stream=""+anc_ida+"";var params={allowFullScreen:true,scale:"scale",allowScriptAccess:"always"};var attributes={id:player_id,name:player_id};var player_dvrMinutes=30;swfobject.embedSWF("https://sites.google.com/site/flashdautocrazy/watch_as3-vfl3xI3-S.swf",player_id,player_width,player_height,"10.0.0",null,null,params,attributes)
    //]]>
</script>
<!-- AncPlay Media Player End -->

B2. Chèn đoạn code sau đây vào trước thẻ  ]]></b:skin> và save template lại.

.id {font-size:1px;display:none}
#list_tap{float:center;background:#eee;text-align:justify;border:1px solid #C2C2C2;width:500px;padding:10px}
#list_tap ul{float:left;list-style:none;margin:5px 0;width:100%;text-algin:left}
#list_tap ul li{float:left;text-algin:left;text-decoration:none;font:bold 12px Tahoma;}
#list_tap ul li.sev{color:#c60;}
#list_tap ul li.ep a.a_tap{color:#262626;padding:0px 5px 0px 8px;}
#list_tap ul li.ep a.a_tap:hover{color:blue}
#list_tap ul li a.active {color:#c20c0c;padding:4px 5px 4px 8px;text-decoration:blink;}
#anc_tp{float:center;width:640px;background:#E0E0E0;border:1px solid #ccc;border-radius:3px 5px;font:bold 12px Tahoma;line-height:24px;color:#c20c0c;overflow:hidden;margin:5px 0;padding:3px 5px 3px 10px}
#anc_tp span{color:RED}

Các ô tô đậm màu vàng các bạn tùy chỉnh kích thước để phù hợp với blog của các bạn


Để trình xem video hiển thị được, bắt buộc bài viết của bạn phải tuân theo mẫu bên dưới :

{Một vài thông tin về video - vị trí 1 }<div align="center" id="anc_pl"></div> <div id="anc_tp"></div> <div id="anc_content"></div>{Một vài thông tin về video - vị trí 2 }[id.]1;link video 1|2;link video 2|[/id.]

- Thông tin về video các bạn có thể đặt ở vị trí 1 hoặc 2 tùy thích. Tùy vào cách bố trí bài viết của các bạn, hoặc có thể sử dụng đồng thời 2 vị trí cùng 1 lúc cũng được.
- phần code highlight là code bắt buộc có trong bài viết.

- Sau đây là hướng dẫn chèn link video vào bài viết. Như trong đoạn code trên ta thấy, chèn link vào bài viết có dạng như bên dưới :

[id]1;link video1|2;link video2|[/id]

- Ví dụ ta có 2 link từ youtube và 2 link từ dailymotion và code mẫu như bên dưới :

[id]1;link youtube1|2;link youtube2|1;link dailymotion1|2;link dailymotion2|[/id]

và phần hiển thị sẽ trông như thế này :

Server Youtube: 1 | 2 |
Server Daily: 1 | 2 |

- Nếu ta thay số 1 và 2 thành Tập 1 và Tập 2 như bên dưới :

[id]Tập 1;link youtube1|Tập 2;link youtube2|Tập 1;link dailymotion1|Tập 2;link dailymotion2|[/id.]

thì phần hiển thị sẽ là như thế này :

Server Youtube: Tập 1 | Tập 2 |
Server Daily: Tập 1 | Tập 2 |

- nếu Tập 1 được chia làm nhiều phần nhỏ thì ta cứ thêm tuần tự link vào, và các link được ngăn cách bằng dấu chấm phẩy. ví dụ như bên dưới :

[id]Tập 1;link youtube1-a;link youtube1-b;link youtube1-c;link youtube1-d|Tập 2;link youtube2|Tập 1;link dailymotion1|Tập 2;link dailymotion2|[/id]

- thì phần hiển thị sẽ như thế này :

Server Youtube: Tập 1a | Tập 1b | Tập 1c | Tập 1d | Tập 2 |
Server Daily: Tập 1 | Tập 2 |

- Tương tự như thế, nếu video có từ nhiều nguồn thì ta cứ việc thêm vào phía sau nó. ví dụ như bên dưới :

[id.]Tập 1;link youtube1-a;link youtube1-b;link youtube1-c;link youtube1-d|Tập 2;link youtube2|Tập 1;link dailymotion1|Tập 2;link dailymotion2|1;link zingmovie1|2;link zingmovie2[/id.]

- và phần hiển thị sẽ là :

Server Youtube: Tập 1a | Tập 1b | Tập 1c | Tập 1d | Tập 2 |
Server Daily: Tập 1 | Tập 2 |
Server Zing: 1 | 2 |

Fandung Blog
Chúc các bạn  thành công.

Tweet

Related Posts

• Loại bỏ Read more ở trang tĩnh (static page)Như các bạn đã biết đối với Blogger thì thủ thuật tóm tắt bài viết tự động với nút Read More và ảnh đại diện là một phầ
• Bài viết mới theo nhãn hiển thị hai cột với hiệu ứng toolipBài viết này mình sẽ hướng dẫn cách tạo widget Bài Mới Nhất Hiển Thị 2 Cột khi rê chuột vào bài viết sẽ có hiệu ứng too
• Tạo hộp thoại thông báo với CSSNhư các bạn đã biết, trong một bài viết dài, ngoài nội dung chính của bài viết. Ta còn thường phải đưa những thông tin
• Tạo nút Back to Top với hiệu ứng từ jQueryHôm nay xin giới thiệu với các bạn tiện ích Back to Top Button khá đẹp, sử dụng hiệu ứng trượt từ jQuery, và đặc biệt l
• Tạo CSS widget label cloud đẹpMột tiện ích khá hay nhằm làm đẹp cho widget label cloud blogspot với CSS full color cho những bạn có sở thích làm
• Thêm Reactions vào bài viết của blogspotBlogspot cung cấp chức năng reactions cho độc giả để họ thể hiện phản ứng của mình khi xem 1 bài viết nào đó. Chức năng

Tích hợp AncPlay Media Player cho Blogspot

4/ 5

Oleh Đỗ Trực

Đỗ Trực Pada 22:40 20 Komentar