បង្កើតការផ្សាយ​​វីដេអូ

ក្រោយ​ពី​មាន​ទំព័រ​នៃ​កម្មវិធី​ជា​ភាសា​ JavaScript សំរាប់​ជួយ​សំរួល​ក្នុង​ការសរសេរ​កូដចុះ​ផ្សាយ​វីដេអូរួច​ហើយ យើង​ត្រូវ​ធ្វើការ​កែ​សំរួល​មួយ​ចំនួន​ទៀត នៅ​ក្នុង​គេហទំព័រ​របស់​យើង ដើម្បី​អាច​ចុះ​ផ្សាយ​វិដេអូ និង​​ឬ​អត្ថបទ​ផ្សេង​ៗ​​​អោយ​នៅ​លាយ​ឡំ​ជាមួយ​គ្នា​បាន​​។ ហើយ​គ្រប់​ការចុះផ្សាយ​ជា​វីដេអូ​ទាំងឡាយ​នឹង​ត្រូវ​​មាន​សញ្ញា​សំគាល់​ជា​រូប​​ចាក់​វីដេអូ (play icon) នៅ​លើ​នោះ​។

ជាដំបូង​ឡើយ យើង​ត្រូវ​ធ្វើយ៉ាង​ណា​អោយ​គេហទំព័រ​របស់​យើង​អាច​ធ្វើការ​កត់​សំគាល់​បាន​រវាង​​ការចុះផ្សាយ​ជា​អត្ថបទ​ និង​ការចុះផ្សាយ​ជា​វីដេអូ​​ដែល​ត្រូវ​បាន​បង្កប់​​នូវ​អត្តសញ្ញាណ​ពិសេស​ម្យ៉ាង​​ដែល​ជា​ពាក្យ​ថា «__video-id__»​ ។ ពិនិត្យ​កម្មវិធី​ខាង​ក្រោម​នេះ៖

.mobile .img-frame{
  width:100%;
}
.img-frame{
  display:block;
  overflow:hidden;
  width:50%;
  float:left;
  margin:0 10px 5px 0;
  position:relative;
}
.play-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width:20% !important;
  min-height:auto;
}

#KBPlayer{
  border-radius:4px;
  padding:2.5% 2% 1.5%;
  background:black;
  text-align:left;
  margin-bottom:20px;
}
#relatedPosts{
  background:#404040;
  padding:10px 10px 10px;
  height:360px;
  overflow-y:scroll;
  margin-bottom:3px;
}
#relatedPosts a div{
  height:60px;
  padding:10px;
  margin:2px 0 2px;
  width:100%;
  border-radius:4px;
  color:white;
}
#relatedPosts a div:hover{
 background:#282828;
 color:orange;
}
#relatedPosts a:hover{
  text-decoration:none;
}
#relatedPosts a div img{
  float:left;
  height:95%;
  width:120px;
  margin-right:7px;
  border:1px solid white;
  border-radius:2px;
  padding:0;
}

KBclass.prototype.createSummaryAndThumb = function (pID,postLink,postTitle,postDate){
  var div = document.getElementById(pID);
  var str = $('#'+pID).html();  

  var imgtag = "";
  var img = div.getElementsByTagName("img");

  if(img.length>=1) {
    if(str.indexOf('__video-id__') != -1){ 
      imgtag = '';
      imgtag += '';
      imgtag += '';
      imgtag += '';
    }else{
      imgtag = '';
    } 
  }else{
    img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqyBk4cRKpkG3fGeA7VfaOO8oqqorD9y6OYea4qKym33HpbksGjJLdAn3cWjnp8c1Dw1i-BdoAtaIWgcK_x6Lbhv4E7vRMS_53vVwkKqQ4tuDpvCGeOoMZ2PiaKpkCAvD1CNaYkp99tEue/s1600/Capture.png";
    imgtag = '';  
  }

  this.summary = '
';
  this.summary += '
'+postTitle+'
';
  this.summary += '
'+postDate+'
';
  this.summary += '
';

  div.innerHTML = imgtag+this.summary;
}

KBclass.prototype.createThumb = function (postContent){
  var div = document.createElement( 'div' );
  div.innerHTML = postContent;
  var img = div.getElementsByTagName("img");
  
  if(img.length>=1) {
    return img[0].src;
  }
  else{
    return ("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpaWn3DC3tAnGN9TBh_RZ2QursVnkzggJ-gUpvyMeM3K6XCg_BtyJ0PAqLSMEBlkzQEZxJobsSVL6jxbITeaV7OMBVtC-uFNpoxXiO8FgoqhpTeCjxFZy9Dx75VEs9EMggeudbwAvUBv1y/s1600/picture.jpg");
  }  
}

KBclass.prototype.getPost = function (json){
  this.postUrl = [];
  this.postTitle = [];
  this.postThumb = [];
  this.postDate = [];
  this.postIdList = [];
  this.postData = [];

  var postList = json.feed.entry;

  this.totalPost = json.feed.openSearch$totalResults.$t;
  this.postList = postList;
  for(var i=0; i < postList.length; i++){
  for (var j = 0; j < postList[i].link.length; j++) {
    if (postList[i].link[j].rel == 'alternate') {
       this.postUrl.push(postList[i].link[j].href);
      break;
    }
  }
  var postContent = postList[i].content.$t;
  this.postData.push(postContent);
  this.postIdList.push(this.postList[i].id.$t);
  this.postTitle.push(postList[i].title.$t);
  this.postThumb.push(this.createThumb(postContent));
  this.postDate.push(postList[i].published.$t);
  }
}

KBclass.prototype.setPostVid = function (postId){
  var playlist = document.createElement( 'div' );
  var description = document.createElement( 'div');
  var post = document.getElementById(postId);
  var kbplayer = document.getElementById("KBPlayer");
  var Playlistt = [];

  var str = post.getElementsByClassName("__video-id__")[0].getAttribute("data-id");
  playlist.innerHTML = post.getElementsByClassName("__playlist__")[0].getAttribute("data-pl");
  description.innerHTML = post.getElementsByClassName("__description__")[0].innerHTML;
  
  kbplayer.parentElement.insertBefore(description, kbplayer.nextSibling);
  var startIndex = str.indexOf('{');
  var endIndex = str.indexOf('}');
  var vidId = str.slice(startIndex+1,endIndex);

  if(str.indexOf('googledrive') != -1){
    var iframeSrc = 'https://docs.google.com/file/d/'+vidId+'/preview';
  }else if(str.indexOf('youtube') != -1){
    var iframeSrc = '//www.youtube.com/embed/'+vidId;
  }else if(str.indexOf('dailymotion') != -1){
    var iframeSrc = '//www.dailymotion.com/embed/video/'+vidId+'?logo=0&info=0';
  }else if(str.indexOf('vimeo') != -1){
    var iframeSrc = '//player.vimeo.com/video/'+vidId;
  }else if(str.indexOf('facebookvid') != -1){
    var iframeSrc = 'https://www.facebook.com/video.php?v='+vidId;
  }
   
  if(str.indexOf('facebookvid') != -1){
    var postContent = '
';
    postContent += '
';
    postContent += '
'; 
   }else{
    var postContent = '';
   }
   
  post.innerHTML = postContent;
   
  var Player = post.getElementsByTagName('iframe');
   
  if(str.indexOf('facebookvid') != -1){
    var vidWidth = post.getElementsByTagName('p');
    var Player = post.getElementsByTagName('div');
    Player[0].setAttribute("data-width", vidWidth[0].clientWidth);
  }else{
   var vidWidth = Player[0].clientWidth;
   Player[0].height = vidWidth / 16 * 9;
  } 
   
  str = playlist.innerHTML;
   if(str.indexOf('pl') != -1){
     var startIndex = str.indexOf('[');
     var endIndex = str.indexOf(']');
     this.pl = str.slice(startIndex+1,endIndex);
     document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default/-/'+this.pl+'?alt=json-in-script&start-index=1&max-results=150&callback=getRelatedPost\"><\/script>');
   }   
}

KBclass.prototype.getRelatedPost  = function (json){
  var partTitle = document.getElementsByTagName('title');
  partTitle = partTitle[0].innerHTML;

  this.getPost(json);
  
  document.write('
');
  for(var i=this.postList.length-1;i>-1; i--){
    document.write('');
    document.write('
');
    document.write('');
    document.write(this.postTitle[i]);
    document.write('
');
    document.write(''); 
    if(partTitle.indexOf(this.postTitle[i]) != -1){
      var element = document.getElementById('Part'+i);
      element.style.backgroundColor = '#282828';
      element.style.color = 'orange';
      var focusPart = i;
    }
  }  
  document.write('
');

  var Player = $("#relatedPosts img").css("width");
  var playerHeight = parseInt(Player)/16*9;
  $("#relatedPosts img").css("height",playerHeight);
  $("#relatedPosts div").css("height",playerHeight+20);
 
  element.scrollIntoView();

}

function getPost(json){ 
  KBobject = new KBclass();
  KBobject.postSum = 1000;
  KBobject.getPost(json);
}

function getRelatedPost(json){
  KBobject = new KBclass();
  KBobject.getRelatedPost(json);
}

  
<data:post.body/>

  

ពិនិត្យ​គេហទំព័រ​ជាក់​ស្តែង​៖ https://testing-kb.blogspot.com/2019/04/video-test.html

នៅ​លើបន្ទាត់​លេខ 8 ការសរសេរ​ថា if(str.indexOf('__video-id__') != -1) គឹ​ជាការ​ពិនិត្យ​ការចុះ​ផ្សាយ​និមួយ​ៗ​ថា​វា​មាន​បង្កប់នូវពាក្យ​ថា «__video-id__» ដែរ​ឬទេ​។ ហើយ​បើ​សិន​ជា​មាន​ពាក្យ​នោះ​មែន ការផ្សាយ​នោះ​នឹងត្រូវ​រចនា​ទៅ​តាម​លំនាំ​នៃ​ការផ្សាយ​ជា​វិដេអូ​។

នៅ​លើ​បន្ទាត់​លេខ 11 ការសរសេរ​ថា KBobject.setPostVid("<data:post.id/>"); គឺ​ជា​បញ្ជា​តំរូវ​អោយ​យក​វិធី​ឈ្មោះ «setPostVid» នៅ​ក្នុង​ថ្នាក់​ឈ្មោះ «KBclass» មក​ប្រើ​ ក្នុង​គោល​បំណង​រចនា​ការផ្សាយ​នោះ អោយ​ទៅ​ជាការផ្សាយ​វីដេអូ​៕