[Update 06/05/16] Hướng dẫn tích hợp AncPlayer Media cho Wordpress

18:14 - 6.5.16 | 2 nhận xét

Hướng dẫn tích hợp AncPlayer Media cho Wordpress
TViệc sử dụng AncPlayer cho wordpress khá là tiện lợi nhờ việc Wordpress có thể tạo Metabox sẽ dễ dàng cho ai dành code viết auto encode link.
Trước khi tích hợp bạn nên lưu lại 1 theme để đề phòng.

Sau đây là các bước cài đặt.
Bạn mở theme tìm file single.php hoặc content-single.php. 

I. AncPlayer cho PC/WEB

Thêm trước thẻ </head>
<link href='http://vjs.zencdn.net/4.6.4/video-js.css' rel='stylesheet'/>
<style>
.vjs-captions.vjs-text-track{
font-size: 15px;
font-weight: bold;
}
@charset "utf-8";

.vjs-res-button {
float: right;
line-height: 3em;
}

ul li.vjs-menu-title.vjs-res-menu-title:hover {
cursor: default;
background-color: transparent;
color: #CCC;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}


.vjs-res-button .vjs-control-text {
width: auto;
height: auto;
clip: auto;
}

</style>


Tìm <?php the_content(); ?>
Đây là file hiện nội dung bài viết.

Thay bằng:


Thay bằng:
<div id="anc_pl"></div> <!-- Hiện thị player -->
<div id="anc_tp"></div> <!-- Hiện thị server phim -->
<div id="anc_data"><?php the_content(); ?></div> <!-- Noi dung bài viết trang item -->
<script type='text/javascript'>//<![CDATA[
var szk = {gk:{'width' : '100%','height': '420','player': 'http://www.phim85.com/player2.swf','proxy' : 'http://www.phim85.com/plugins/proxy.swf','skin':'','autoplay' : 'true','logo' : '','position' : 'top-left','margin' : '20','site': 'Xem Phim Online Tại www.phim23.com'},sv:{'list_sv': 'youtube.com,anc.yl,phim23.g,=m18,=m23,goo.gl,anc.you,kenhphimtruyen.com,anc.ps,yourupload.com,picasaweb.google.com,dailymotion.com,zing.vn,=m24,drive.google.com,vivo.phim28.net,clip.vn,kpt.nct,phimsoc.z','name_sv': 'Youtube,List_Y,VIP PRO 2,VIP 1,VIP 2,Google,Youtube 2,HTML5,Picasa 1,ENGSUB,Picasa 2,Daily,ZingHD,VIP Thuyết minh,VIP PRO,Youtube2,Clip,Nhanh VN,ZingHD 2','acolor': '#fff','bgcolor': '#80B500','svcolor': ''}};
function setActive(){aObj=document.getElementById("list_tap").getElementsByTagName("a");for(i=0;i<aObj.length;i++)0<=document.location.href.indexOf(aObj[i].href)&&(aObj[i].className="tap_active")}window.onload=setActive;
//]]></script>
<script src='//googledrive.com/host/0B1E03wIepX7YVjhsRnJZT280cWs' type='text/javascript'/>
<script src='http://vjs.zencdn.net/4.6.4/video.js'/>

<script type='text/javascript'>
//<![CDATA[
(function(_V_){var methods={extend:function(destination,source){for(var prop in source){if(!source.hasOwnProperty(prop)){continue;}
if(typeof source[prop]=='object'&&null!==source[prop]){destination[prop]=methods.extend(destination[prop]||{},source[prop]);}else{destination[prop]=source[prop];}}
return destination;},res_label:function(res){return(/^\d+$/.test(res))?res+'p':res;}};_V_.ResolutionMenuItem=_V_.MenuItem.extend({init:function(player,options){options.label=methods.res_label(options.res);options.selected=(options.res.toString()===player.getCurrentRes().toString());_V_.MenuItem.call(this,player,options);this.resolution=options.res;this.on('click',this.onClick);player.on('changeRes',_V_.bind(this,function(){if(this.resolution==player.getCurrentRes()){this.selected(true);}else{this.selected(false);}}));}});_V_.ResolutionMenuItem.prototype.onClick=function(){var player=this.player(),video_el=player.el().firstChild,current_time=player.currentTime(),is_paused=player.paused(),button_nodes=player.controlBar.resolutionSelector.el().firstChild.children,button_node_count=button_nodes.length;if(player.getCurrentRes()==this.resolution){return;}
if('none'==video_el.preload){video_el.preload='metadata';}
player.src(player.availableRes[this.resolution]).one('loadedmetadata',function(){player.currentTime(current_time);if(!is_paused){player.play();}});player.currentRes=this.resolution;while(button_node_count>0){button_node_count--;if('vjs-current-res'==button_nodes[button_node_count].className){button_nodes[button_node_count].innerHTML=methods.res_label(this.resolution);break;}}
player.trigger('changeRes');};_V_.ResolutionTitleMenuItem=_V_.MenuItem.extend({init:function(player,options){_V_.MenuItem.call(this,player,options);this.off('click');}});_V_.ResolutionSelector=_V_.MenuButton.extend({init:function(player,options){player.availableRes=options.available_res;_V_.MenuButton.call(this,player,options);}});_V_.ResolutionSelector.prototype.createItems=function(){var player=this.player(),items=[],current_res;items.push(new _V_.ResolutionTitleMenuItem(player,{el:_V_.Component.prototype.createEl('li',{className:'vjs-menu-title vjs-res-menu-title',innerHTML:'Chất lượng'})}));for(current_res in player.availableRes){if('length'==current_res){continue;}
items.push(new _V_.ResolutionMenuItem(player,{res:current_res}));}
items.sort(function(a,b){if(typeof a.resolution=='undefined'){return-1;}else{return parseInt(b.resolution)- parseInt(a.resolution);}});return items;};_V_.plugin('resolutionSelector',function(options){if(!this.el().firstChild.canPlayType){return;}
var player=this,sources=player.options().sources,i=sources.length,j,found_type,settings=methods.extend({default_res:'',force_types:false},options||{}),available_res={length:0},current_res,resolutionSelector,default_resolutions=(settings.default_res&&typeof settings.default_res=='string')?settings.default_res.split(','):[];while(i>0){i--;if(!sources[i]['data-res']){continue;}
current_res=sources[i]['data-res'];if(typeof available_res[current_res]!=='object'){available_res[current_res]=[];available_res.length++;}
available_res[current_res].push(sources[i]);}
if(settings.force_types){for(current_res in available_res){if('length'==current_res){continue;}
i=settings.force_types.length;while(i>0){i--;j=available_res[current_res].length;found_types=0;while(j>0){j--;if(settings.force_types[i]===available_res[current_res][j].type){found_types++;}}
if(found_types<settings.force_types.length){delete available_res[current_res];available_res.length--;break;}}}}
if(available_res.length<2){return;}
for(i=0;i<default_resolutions.length;i++){if(available_res[default_resolutions[i]]){player.src(available_res[default_resolutions[i]]);player.currentRes=default_resolutions[i];break;}}
player.getCurrentRes=function(){if(typeof player.currentRes!=='undefined'){return player.currentRes;}else{try{return res=player.options().sources[0]['data-res'];}catch(e){return'';}}};current_res=player.getCurrentRes();if(current_res){current_res=methods.res_label(current_res);}
resolutionSelector=new _V_.ResolutionSelector(player,{el:_V_.Component.prototype.createEl(null,{className:'vjs-res-button vjs-menu-button vjs-control',innerHTML:'<div class="vjs-control-content"><span class="vjs-current-res">'+(current_res||'Chất lượng')+'</span></div>',role:'button','aria-live':'polite',tabIndex:0}),available_res:available_res});player.controlBar.resolutionSelector=player.controlBar.addChild(resolutionSelector);});})(videojs);
//]]></script>
<script type='text/javascript'>
videojs( &#39;#playerayer&#39;, { plugins : { resolutionSelector : {
default_res : &#39;360p&#39;
} } }, function() {
var player = this;
player.on( &#39;changeRes&#39;, function() {
});
});
     
</script>

II. AncPlayer cho MOBILE

Thêm trước thẻ </head>
<link href='http://vjs.zencdn.net/4.6.4/video-js.css' rel='stylesheet'/>
<style>
.vjs-captions.vjs-text-track{
font-size: 15px;
font-weight: bold;
}
@charset "utf-8";

.vjs-res-button {
float: right;
line-height: 3em;
}

ul li.vjs-menu-title.vjs-res-menu-title:hover {
cursor: default;
background-color: transparent;
color: #CCC;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}


.vjs-res-button .vjs-control-text {
width: auto;
height: auto;
clip: auto;
}

</style>


Tìm <?php the_content(); ?>
Đây là file hiện nội dung bài viết.

Thay bằng:

Thay bằng:
<div id="anc_pl"></div> <!-- Hiện thị player -->
<div id="anc_tp"></div> <!-- Hiện thị server phim -->
<div id="anc_data"><?php the_content(); ?></div> <!-- Noi dung bài viết trang item -->
<script type='text/javascript'>//<![CDATA[
var szk = {gk:{'width' : '100%','height': '420','player': 'http://www.phim85.com/player2.swf','proxy' : 'http://www.phim85.com/plugins/proxy.swf','skin':'','autoplay' : 'true','logo' : '','position' : 'top-left','margin' : '20','site': 'Xem Phim Online Tại www.phim23.com'},sv:{'list_sv': 'youtube.com,anc.yl,phim23.g,=m18,=m23,goo.gl,anc.you,kenhphimtruyen.com,anc.ps,yourupload.com,picasaweb.google.com,dailymotion.com,zing.vn,=m24,drive.google.com,vivo.phim28.net,clip.vn,kpt.nct,phimsoc.z','name_sv': 'Youtube,List_Y,VIP PRO 2,VIP 1,VIP 2,Google,Youtube 2,HTML5,Picasa 1,ENGSUB,Picasa 2,Daily,ZingHD,VIP Thuyết minh,VIP PRO,Youtube2,Clip,Nhanh VN,ZingHD 2','acolor': '#fff','bgcolor': '#80B500','svcolor': ''}};
function setActive(){aObj=document.getElementById("list_tap").getElementsByTagName("a");for(i=0;i<aObj.length;i++)0<=document.location.href.indexOf(aObj[i].href)&&(aObj[i].className="tap_active")}window.onload=setActive;
//]]></script>
<script src='//googledrive.com/host/0B1E03wIepX7YVTg1a0hwWVJIb3M' type='text/javascript'/>
<script src='http://vjs.zencdn.net/4.6.4/video.js'/>

<script type='text/javascript'>//<![CDATA[
     
        function HDtoggle () {
       
   var HD1 = false;
   /* It is the variable which tells us that that HD video is getting played or not.
  HD1 = false ---> video is not HD
  HD1 = true ----> video is HD */
       
             videojs.HD = videojs.Button.extend({
           /* @constructor */
               init: function(player, options){
                 videojs.Button.call(this, player, options);
                 this.on('click', this.onClick);
               }
             });
         
/* Changing sources by clicking on HD button */
/* This function is called when HD button is clicked */
            videojs.HD.prototype.onClick = function() {
         
         
         var HDsrc = $("#playerayer").find( "video" ).attr("HD");
 /* Value of HD attribute in video tag is saved in HDsrc. */
         var noHDsrc = $("#playerayer").find( "video" ).attr("nonHD");
 /* Value of nonHD attribute in video tag is saved in noHDsrc. */
         
if (HD1) { /* If video is not HD */
         var css = document.createElement("style");
         css.type = "text/css";
         css.innerHTML = ".vjs-control.vjs-HD-button { color: silver; font-weight:normal; text-shadow: 0 0 5em #fff;}";
  /* Changing the HD button to initial styling when we play non HD video by clicking on HD button.*/
         document.body.appendChild(css);
         videojs("playerayer").src([{type: "video/mp4", src: noHDsrc }]);

         videojs("playerayer").play();
 /* This automatically plays the video when we click on HD button to change the source.*/
         HD1 = false;
         }
         else { /* if video is HD */
         var css = document.createElement("style");
         css.type = "text/css";
         css.innerHTML = ".vjs-control.vjs-HD-button { color: #36D8DE; font-weight:bold; text-shadow: 0 0 1em #fff;}";
/*This css applies when HD video is played. You can easily change the blue color of HD button by changing the value of color above. If you would like to remove the shadow from HD button, remove text-shadow from above.*/
document.body.appendChild(css);
         videojs("playerayer").src([{type: "video/mp4", src: HDsrc }]);
         videojs("playerayer").play();
          /*This automatically plays the video when we  click on HD button to change the source.*/
 HD1 = true;
         }
         
         };
     
 /* Create HD button */
 var createHDButton = function() {
               var props = {
                   className: 'vjs-HD-button vjs-control',
                   innerHTML: '<div class="vjs-control-content">' + ('HD') + '</div>',
                   role: 'button',
                   'aria-live': 'polite',
                   tabIndex: 0
                 };
           
               return videojs.Component.prototype.createEl(null, props);
             };
     
 /* Add HD button to the control bar */
         var HD;
             videojs.plugin('HD', function() {
               var options = { 'el' : createHDButton() };
               HD = new videojs.HD(this, options);
               this.controlBar.el().appendChild(HD.el());
             });
     
          /* Set Up Video.js Player */
 var vid = videojs("playerayer", {
              plugins : { HD : {} }
            });
         
}
    HDtoggle();
//]]></script> 
Tiếp theo thêm CSS để hiện thi server thêm vào style.css của theme bạn đang sử dụng:

id{font-size:0px;display:none;width:0;height:0;}
#logoplayer {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4oS0jvVpd5TZ9NxBtocHeIUm_n4QHkF-k0p78uZKZkvBnGPcH97L1oh97XgelY4sg5HqTI6JI1KEs8B_Zu0xKpyR1aWOYdLA6qCQPF5g2OvYmRuQMb5udf6c8MJ89FCTXTv-Mk99Swmj5/s1600/ancplayer.png) no-repeat;float:right;display:inline-block;position:absolute;width:220px;height:60px;filter:alpha(opacity=45);opacity:.45;}
#anc_tp {background:#FAFAFA;border:1px solid #0095B3;border-radius:5px;padding:5px 0;overflow:hidden;position:relative;width:99%;float:left;}
#list_tap{display:inline-block;line-height:16px;width:auto;padding:0 7px;}
#list_tap ul{list-style:none;margin:0;padding:0;clear:both;}
#list_tap ul li{float:left;margin-right:10px;font-weight:700;font-size:12px;text-align:left;}
#list_tap ul li.sev{color:#702526;background:url(http://3.bp.blogspot.com/-iy4-GBSe6Yg/U48Fzxa1RmI/AAAAAAAAQr8/pngFU0ajvxk/s1600/server.png) no-repeat scroll 0 0 transparent;display:inline-block;float:left;height:16px;margin-right:5px;margin-top:4px;padding-left:23px;}
.a_tap {background:none repeat scroll 0 0 #151515;color:#F9F9F9;display:inline-block;min-width:20px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;text-align:center;margin:2px 0;padding:2px 3px;text-decoration:none}
.tap_active, .a_tap:hover{background:#0295F6;color:#fff;display:inline-block;min-width:20px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;text-align:center;margin:2px 0;padding:2px 3px;text-decoration:none}
.sv_active{color:#0095B3;background: url(http://3.bp.blogspot.com/-iy4-GBSe6Yg/U48Fzxa1RmI/AAAAAAAAQr8/pngFU0ajvxk/s1600/server.png) no-repeat scroll 0 0 transparent;display:inline-block;float:left;height:16px;margin-right:5px;margin-top:4px;padding-left:23px;}

Vậy là xong lưu theme kiểm tra thành quả.
Chúc thành công :D

16/05/2016: Update ver 5.0
Hãy Like để ủng hộ Website
Like để chia sẻ bài viết tới mọi người.
Soft-24h.com - Download Free Software
Bài viết: [Update 06/05/16] Hướng dẫn tích hợp AncPlayer Media cho Wordpress
Thời gian: 2016-05-06T18:14:00+07:00
Nhãn: ,
Xếp hạng: 5 trên 2 đánh giá

Chú ý: Mọi nhận xét chèn link tới website/blog khác ko liên quan đến yêu cầu hỗ trợ, chia sẻ đều bị xóa mà không cần báo trước

2 nhận xét:

  1. Pc ok rồi anh . Nhưng Player cho mobile thì không Responsive được . Có cách nào chỉnh cho nó giống như trên blogger không ?

    Trả lờiXóa

Thành công từ Website/Blog của bạn là động lực cho chúng tôi phát triển
Hãy chung sức vì 1 cộng đồng Blogger hùng mạnh.
AncPlayer, anc media, webphim blogspot, templates phim blogspot, teamplates blogspot, blogger, blogspot, anc music, play phim blogger, play mobile
  • soft-24h.com - ANCPLAYER MEDIAsoft-24h.com - FREE SOFTWARE DOWNLOAD
    Địa chỉ: Hà Nội,
    Việt Nam
  • MobileHotline: 01234567890
  • EmailEmail: soft-24h@gmail.com
    Support Y!H:Yahoosoft-24h
Hãy Like để ủng hộ Website
Like để chia sẻ bài viết

Liên kết link

Anime Hay, Modskinlmht, Xemtivinhanh, Phim HD, Truyen Ola, Nhạc DJ,
click top