បើនិយាយពីពាក្យ Blogger ហើយស្វែងរកក្នុង Google ប្រហែលលោកអ្នកយល់ថាជា Wordpress តែសម្រាប់អ្នកសរសេរ ប្លក់នោះប្រាកដជាដឹងថាពាក្យ Blogger ចង់សំដៅដល់ប្រព័ន្ធសរសេរមាតិកាដែលឥតគិតថ្លៃរបស់ google ដែលមានដំណរអាសយដ្ឋាន blogspot។ ក្នុងគន្លឹះនេះយើងលើកបង្ហាញពីកូដចាក់និងបង្ហាញវីដេអូជា list បញ្ជីវីដេអូដែលធ្វើឲ្យការចាក់វីដេអូពិប្រភពនានា ងាយស្រួលចុចមើល បែបជារឿងភាគ បែបជាវីដេអូបង្រៀនផ្សេងៗជាដើម។
បើយើងធ្វើការយកកូដ embedded ពី youtube មកដាក់ក្នុងអត្ថបទប្លក់របស់យើង នោះយើងមិនអាចមើលជា list ដូចមើលក្នុងគេហទំព័រ youtube ទេ ដែលជាហេតុមានការពិបាកមើល។ ដូច្នេះហើយក៏កើតជាសេវាកម្ម ឬគេហទំព័រនានាអាចឲ្យយើងយក link របស់ youtube playlist ទៅដាក់ដើម្បីបង្ហាញជា list ដ៏ស្រស់ស្អាតតាមការច្នៃប្រតិដ្ឋនានា តែសកម្មភាពនេះជាសកម្មភាបអស់លុយ បើគ្រាន់តែចង់បង្ហាញ youtube playlist ក្នុងប្លក់ក៏ត្រូវអស់លុយដែរ ចឹងយើងរៀនដាក់កូដដោយខ្លួនឯងវិញ។
សូមបញ្ជាក់ថាការដាក់កូដនេះ ជូនដើរ ជួនមិនដើរ អាស្រ័យទៅតាមប្រភេទ template ដែលលោកអ្នកប្រើជាមួយ Blogger ហ្នឹងជាចំណុចពិបាកមួយ ចឹងមុនធ្វើសូម backup template របស់ Blogger លោកអ្នក ជាមុនសិន។
របៀបដាក់កូដ Playlist សម្រាប់blogger ៖
ជំហានទី 1. ចូលទៅកាន់ផ្ទាំងគ្រប់គ្រងអ្នកសរសេរប្លុកហើយចុចលើ Theme > Edit Html > ហើយបន្ទាប់មកចុច CTRL + F ដើម្បីស្វែងរក ស្លាក
<head>
<head> ។
HTML
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css' integrity='sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
ជំហានទី 3. ចុចផ្នែកខាងក្នុងកូដម្ដងទៀត រួចចុច CTRL + F ហើយស្វែងរកពាក្យស្លាកបិទ </head>។ ហើយបន្ទាប់មកចម្លង និងបិទភ្ជាប់ស្គ្រីបទាំងនេះនៅខាងលើ/មុនពេលបិទ ។
កូដ
<style type='text/css'>
.sd_player{margin-top:5px;width:100%;height:100%;overflow:hidden;font-size:12px;background-color:#000}
.sd_player *{margin:0;padding:0}
.sd_player a{text-decoration:none}
.sd_player li{list-style:none}
.sd_video{width:100%;background-color:#000;position:relative;overflow:hidden}
.sd_loading{position:absolute;text-align:center;bottom:41.5%;right:44%;color:#FBC02D;font-size:500%;z-index:9999;display:none;background-color:#;padding:5px}
.sd_video iframe{width:100%;height:100%;position:absolute;top:0;left:0;display:none;background-color:#000}
.sd_server{width:100%;height:100%;position:absolute;top:0;left:0;display:none}
.sd_server video{width:100%;height:100%;background-color:#000}
.sd_list{width:100%;overflow:auto;border-top:1px solid #333}
.sd_list li{clear:both;border-left:5px solid #444;border-bottom:1px solid #333;overflow:hidden;cursor:pointer}
.sd_list .selected{border-left:4px solid #FBC02D;background-color:#222222;border-right:2px solid #FBC02D}
.sd_list img{float:left;width:50px;height:45px}
.sd_list div{text-indent:10px;color:#fff}
.sd_list div h2{width:100%;font-size:120%;text-align:left;margin:0;font-weight:400;color:#fff}
.sd_list div p{width:100%;color:#fff!important;font-size:100%}
.sd_list div p a{color:#fff!important;margin-left:10px;line-height:1.7em;}
.sd_control{width:100%;height:35px;line-height:30px;background-color:#444;text-align:center;padding-top: 5px;}
.sd_btn{height:23px;line-height:20px;padding:8px 14px;color: #fff;background-color:#FBC02D;cursor:pointer;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin-left:2px;margin-right:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;text-transform:uppercase}
.sd_control .active{background-color:#000}
.sd_desktop .sd_video{float:left;height:100%}
.sd_desktop .sd_videos{float:left;height:100%}
.sd_desktop .sd_btn span{display:none}
.sd_desktop .sd_list{border-top:0}
.sd_desktop .sd_btn{padding:2px 10px;margin-left:5px;margin-right:5px}
.sd_player i.fab.fa-google-drive{background:linear-gradient(to right, #1FA463 60%,#FFD04B 85%,#4688F4 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.sd_player i.fab.fa-mixcloud{color:#A6FF1D}
.sd_player i.fab.fa-youtube{color:#DA5E4C}
.sd_player i.fab.fa-vimeo{color:#1ab7ea}
.sd_player i.fas.fa-video{color:#3E8B79}
.sd_player i.fab.fa-facebook{color:#3b5998}
</style>
<script type='text/javascript'>
var options = {
'player_container': '#player',
'player_ratio': '16:9',
'player_mobile_on_width': '600',
'player_desktop_video_width': '70%',
'automatic_response': false
}
</script>
កូដ
<script type='text/javascript'>
//<![CDATA[
function Video_player(i){if("undefined"!=typeof $){if(void 0!==i.player_list){var e,s,d=[],t=[],n=[],a=[],l="",o=0,f=0,r=7,c=4,p=50,v=$(i.player_container),h=v.width(),_=i.player_ratio.split(":");_=_[1]/_[0];for(var u=0;u<i.player_list.length;u++)d.push(i.player_list[u].file),t.push(i.player_list[u].title),n.push(i.player_list[u].description),a.push(i.player_list[u].image);l+='<div class="sd_player">',l+='<div class="sd_video"><span class="sd_loading" ><i class="fas fa-spinner fa-pulse fa-fw"/></span>',l+='<iframe id="video_player" src="" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>',l+='<div class="sd_server"></div>',l+="</div>",l+='<div class="sd_videos">',l+='<ul class="sd_list"></ul>',l+='<div class="sd_control">',l+='<span class="sd_prevPage sd_btn"><i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i></span>',l+='<span class="sd_prev sd_btn"><i class="fas fa-chevron-left"></i></span>',l+='<span class="sd_next sd_btn"><i class="fas fa-chevron-right"></i></span>',l+='<span class="sd_nextPage sd_btn"><i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i></span>',l+="</div>",l+="</div>",l+="</div>",v.html(l),l="";for(u=0;u<t.length;u++)l+="<li>",l+='<img style="width: 80px !important; height: 50px !important; " src="',m(d[u])?l+="http://i3.ytimg.com/vi/"+m(d[u])+"/hqdefault.jpg":d[u].indexOf("vimeo")>-1?l+="https://i.imgur.com/nJXkbuG.png":d[u].indexOf("vid")>-1?l+="https://i.imgur.com/nJXkbuG.png":d[u].indexOf("google")>-1?l+="https://i.imgur.com/nJXkbuG.png":l+=a[u],l+='" />',l+="<div>",l+='<h2 style="text-align:left;">',l+='<i class="',m(d[u])?l+="fab fa-youtube":d[u].indexOf("vimeo")>-1?l+="fab fa-vimeo":d[u].indexOf("google")>-1?l+="fab fa-google-drive":d[u].indexOf("sd")>-1?l+="fas fa-video":d[u].indexOf("vid")>-1?l+="fab fa-facebook":l+="fa-file",l+="",l+='"></i> ',l+=t[u]+"</h2>",l+="</div>",l+="</li>";v.find(".sd_list").html(l);for(u=0;u<t.length;u++)d[u].indexOf("vimeo")>-1&&$.ajax({type:"GET",url:"http://vimeo.com/api/v2/video/"+d[u].substring(d[u].lastIndexOf("/")+1)+".json",jsonp:"callback",dataType:"jsonp",indexValue:u,success:function(i){var e=i[0].thumbnail_large;v.find(".sd_list").find("li").eq(this.indexValue).find("img").attr("src",e)}});$.getScript("http://f.vimeocdn.com/js/froogaloop2.min.js"),$.getScript("http://www.youtube.com/iframe_api");var g=!1;window.onYouTubeIframeAPIReady=function(){w()},v.find(".sd_list").click(function(){s=!0}),v.find(".sd_list").find("li").outerHeight(p),v.find(".sd_list").find("li").each(function(i){$(this).click(function(){var e,t;(o=i,v.find(".sd_list").find("li").eq(i).hasClass("selected"))||(v.find(".sd_list").find("li").removeClass("selected").eq(i).addClass("selected"),v.find("li").find("div").find("h2").removeClass("sele").eq(i).addClass("sele"),e=d[i],t=e,v.find(".sd_server").find("video").remove(),v.find(".sd_server").hide(),v.find("iframe").attr("src","").hide(),v.find(".sd_loading").show(),m(e)?(t="https://www.youtube.com/embed/"+m(e)+"?autoplay=0&loop=1&showinfo=0&rel=0&enablejsapi=1",s&&(t="https://www.youtube.com/embed/"+m(e)+"?autoplay=1&loop=1&showinfo=0&rel=0&enablejsapi=1"),v.find("iframe").attr("src",t).show(),g&&w()):e.indexOf("vimeo")>-1?(t="https://player.vimeo.com/video/"+e.substring(e.lastIndexOf("/")+1),s?v.find("iframe").attr("src",t+"?api=1&player_id=video_player&autoplay=1").show():v.find("iframe").attr("src",t+"?api=1&player_id=video_player").show(),void 0!==v.find("iframe")[0].addEvent&&v.find("iframe")[0].addEvent("ready",function(i){v.find("iframe")[0].addEvent("finish",function(){s=!0,C()})})):e.indexOf("google")>-1?v.find("iframe").attr("src",t).show():e.indexOf("vid")>-1?v.find("iframe").attr("src",t).show():(l="",l+=s?'<video width="100%" height="100%" controls autoplay>':'<video width="100%" height="100%" controls>',l+='<source src="'+t.replace(".ogg",".mp4")+'" type="video/mp4">',l+='<source src="'+t.replace(".mp4",".ogg")+'" type="video/ogg">',l+="</video>",v.find(".sd_server").show().html(l),v.find("video").bind("ended",function(){s=!0,C()})),v.find("iframe").load(function(){v.find(".sd_loading").hide()}),y())})}),y(),$(window).resize(function(){b()}),b(),v.find(".sd_list").scroll(function(){x($(this))}),x(v.find(".sd_list")),v.find(".sd_prevPage").click(function(){$(this).hasClass("active")&&(f=v.find(".sd_list").scrollTop()-e*v.find(".sd_list").find("li").outerHeight(),f=Math.ceil(f/p),v.find(".sd_list").animate({scrollTop:f*p},500))}),v.find(".sd_prev").click(function(){o>0&&(o--,y(),k("prev"),v.find(".sd_list").find("li").eq(o).trigger("click"))}),v.find(".sd_next").click(function(){o<d.length-1&&(o++,y(),k("next"),v.find(".sd_list").find("li").eq(o).trigger("click"))}),v.find(".sd_nextPage").click(function(){$(this).hasClass("active")&&(f=v.find(".sd_list").scrollTop()+e*p,f=Math.ceil(f/p),v.find(".sd_list").animate({scrollTop:f*p},500))}),v.find(".sd_list").animate({scrollTop:0},10),v.find(".sd_list").find("li").eq(0).trigger("click"),$(document).ready(function(){$("").remove()})}}else alert("Please insert jQuery library!");function m(i){return i.indexOf("watch?v")>-1?i.substring(i.indexOf("?v=")+3):(i.indexOf("youtube")>-1||i.indexOf("youtu.be")>-1)&&i.substring(i.lastIndexOf("/")+1)}function w(){g=!0,new YT.Player("video_player",{events:{onStateChange:function(i){switch(i.data){case YT.PlayerState.ENDED:s=!0,C()}}}})}function y(){o>0?v.find(".sd_prev").addClass("active"):v.find(".sd_prev").removeClass("active"),o<d.length-1?v.find(".sd_next").addClass("active"):v.find(".sd_next").removeClass("active")}function b(){$(window).width()<i.player_mobile_on_width||!i.automatic_response?(e=c,i.automatic_response&&v.width($(window).width()),v.removeClass("sd_desktop"),v.find(".sd_list").height(e*p),v.find(".sd_video").height(v.find(".sd_video").width()*_),v.find(".sd_video").width("100%"),v.find(".sd_videos").width("100%")):(e=r,v.addClass("sd_desktop"),v.width(h),v.find(".sd_list").height(e*(p-.8)),v.find(".sd_video").height(v.find(".sd_videos").outerHeight()),v.find(".sd_video").css("width",i.player_desktop_video_width),v.find(".sd_videos").css("width",100-parseInt(i.player_desktop_video_width)+"%"))}function x(i){i.scrollTop()>0?v.find(".sd_prevPage").addClass("active"):v.find(".sd_prevPage").removeClass("active"),i[0].scrollHeight>=i.outerHeight()+i.scrollTop()+5?v.find(".sd_nextPage").addClass("active"):v.find(".sd_nextPage").removeClass("active")}function k(i){var s=v.find(".sd_list").scrollTop(),d=s+v.find(".sd_list").outerHeight(),t=v.find(".sd_list").find("li").eq(o).offset().top-v.find(".sd_list").find("li").eq(o).parent().offset().top+v.find(".sd_list").find("li").eq(o).outerHeight();return(t+s+10>=d+v.find(".sd_list").find("li").eq(o).outerHeight()||t<1)&&(f=o*p,"prev"==i&&(f=(o-e+1)*p),v.find(".sd_list").animate({scrollTop:f},500)),!0}function C(){o<d.length-1&&(o++,y(),k("next"),v.find(".sd_list").find("li").eq(o).trigger("click"))}}var timer=setInterval(function(){"undefined"!=typeof options&&(new Video_player(options),clearInterval(timer))},50);
//]]>
</script>
កូដ
<div id="player" style="width: 100%;"></div>
<script type="text/javascript">
//<![CDATA[
options.player_list = [
{"file": "//ok.ru/videoembed/1241617730233","title": " Ep 01-02","description": ""},
{"file": "https://www.youtube.com/watch?v=7DrECLTJdM8","title": "????????????? - ?????","description": "","image": ""},
{"file": "https://www.youtube.com/watch?v=JMBNcZ9iv_U","title": "????????????? - Rith Acoustic","description": "","image": ""},
{"file": "https://www.youtube.com/watch?v=sUnouxXKYaw","title": "?????????????? - ??? ?????????","description": "","image": ""},
{"file": "https://vimeo.com/208621116","title": "?????? - STEP","description": "","image": ""},
{"file": "https://www.facebook.com/video/embed?video_id=10153231379946729", "title": "How to Share with Just Friend", "description": "", "image": "" },
{"file": "https://docs.google.com/file/d/0B-9xsGqNKunnUWcxUzFxMm1LaXc/preview","title": "GoogleDrive Demo Video","description": "","image": ""},
]; var player = new Video_player(options);
//]]>
</script>
ប្ដូរតាមបំណង៖
ជំនួសតំណភ្ជាប់របស់អ្នក EX: ( https://www.youtube.com/watch?v=7DrECLTJdM8) ចំណងជើង និងការពិពណ៌នាត្រូវតែផ្លាស់ប្តូរអាស្រ័យលើចំណងជើង និងព័ត៌មានភាពយន្តរបស់អ្នក។ ប្រសិនបើអ្នកចង់បានបញ្ជីវីដេអូខាងក្រោមបន្ថែមទៀត គ្រាន់តែចម្លងបន្ទាត់មួយដែលចាប់ផ្តើមដោយ { ហើយចុងគឺ } ហើយបិទភ្ជាប់វាខាងក្រោមតាមដែលអ្នកចង់បាន។
ឧទាហរណ៍៖ {"file": " //ok.ru/videoembed/1241617730233 ", title ": " Ep 01-02"," description ": ""}សូមបញ្ជាក់ថា ដោយសារកូដនេះFree និងចាស់ហើយដូច្នេះអត់ដើរជាមួយសេវាកម្មមួយចំនួន ក្នុងគន្លឹះនេះខ្ញុំផ្ដោតតែជាមួយ youtube តែប៉ុណ្ណោះ!!! បើចង់ឲ្យដើរបានច្រើន គួរតែទិញក្បាលចាក់វីដេអូ មានខ្មែរយើងគាត់ធ្វើលក់ សូមស្វែងរកដោយខ្លួនឯង។
__________________
ប្រភពី https://khmerueteams.blogspot.com/2022/04/how-to-make-video-playlist-on-blogger.html
No comments
Post a Comment