Dear my friends, today I am going to show how to set up PLAYLIST style in to blogger and normally we used for drama movies or some firm.
This playlist has supported the video, such as Facebook, Vimeo, Youtube and Google Drive. I hope that in this tutorial, you can make it by yourself. In this playlist code, I think that it may not work very well with the Responsive template.
How To Install Playlist Step by Step:
- Go to Firefox/Google Chrome browser, on the address bar, you type www.blogger.com then press Enter Key on the Keyboard.
- Login with your Gmail Account.
- On the Blogger Dashboard, you click on Template button
- Before you edit the code you have to backup your template > Backup/Restore > Download full template.
- After you backup finish you just click on Edit HTML and drag your mouse courser into the code area.
- Click Ctrl+F and type </head> on the search box after that you press Enter Key for search it.
The Code for installing it into your template:
Copy and paste this code above </head><script language='javascript' 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> <style type='text/css'> .sd_player{ min-width: 300px; width: 100%; height: 100%; overflow: hidden; font-family: sans-serif,arial; font-size: 12px;word-spacing: 2px; background-color: #2c3e50; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.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: 40%; right: 47%; color: orange;font-size:200%; z-index: 9999; display: none; background-color: #; padding: 5px;}.sd_video iframe{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none; background-color: #000;}.sd_server{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none;}.sd_server video{ width: 100%; height: 100%; background-color: #000; }.sd_list { width: 100%; overflow: auto;}.sd_list{ border-top: 1px solid #333;}.sd_list li{ clear: both; border-left: 5px solid #444444; border-bottom: 1px solid #333; overflow: hidden; cursor: pointer;}.sd_list .selected{ border-left: 5px solid #f1c40f;background:#7f8c8d } .sd_list li:hover{ border-left: 5px solid #f1c40f;background:#34495e;}.sd_list img{ float: left; width: 60px; height: 45px;}.sd_list div{ text-indent: 10px; color: #fff;}.sd_list div h2{ width: 100%; font-size: 120%; text-align:left; margin-top: 12px; font-weight: normal; color: #fff;}.sd_list div h2 .sele{color: #000 } .sd_list div p{ width: 100%; color: #777; font-size: 100%;}.sd_control { width: 100%; height: 25px; line-height: 25px; background-color: #444444; text-align: center;}.sd_btn{ height: 20px; line-height: 20px; padding: 2px 5px; background-color: #676767; 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; }.sd_control .active{ background-color: #fff;}.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 .fa{ margin-left: 0px;} </style>
- Copy and paste this code above </body>
<script type='text/javascript'>var $ = jQuery.noConflictundefined);jQuery.fn.exists = functionundefinedcallback) { var args = [].slice.callundefinedarguments, 1); if undefinedthis.length) { callback.callundefinedthis, args); } return this;}; //<![CDATA[ function Video_playerundefinedopt){; /* check jquery library */ifundefinedtypeof $ == "undefined"){ alertundefined"Please insert jQuery library!"); return;} /* variables */ifundefinedtypeof opt.player_list == "undefined"){ return;} var files = [];var titles = [];var descriptions = [];var images = [];var html_ = "";var video_count = 0;var scroll_step = 0;var list_item;var list_item_desktop = 7;var list_item_mobile = 4;var item_height = 50;var player = $undefinedopt.player_container);var width_ = player.widthundefined);var ratio = opt.player_ratio.splitundefined':');ratio = ratio[1]/ratio[0];var autocontinue; /* read options */forundefinedvar i=0; i<opt.player_list.length; i++){ files.pushundefinedopt.player_list[i].file); titles.pushundefinedopt.player_list[i].title); descriptions.pushundefinedopt.player_list[i].description); images.pushundefinedopt.player_list[i].image); } /* create html */html_ += '<div class="sd_player">';html_ += '<div class="sd_video"><span class="sd_loading" ><i class="fa fa-pulse fa-connectdevelop fa-fw"/></span>';html_ += '<iframe id="video_player" src="" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>';html_ += '<div class="sd_server"></div>';html_ += '</div>';html_ += '<div class="sd_videos">';html_ += '<ul class="sd_list"></ul>';html_ += '<div class="sd_control">';html_ += '<span class="sd_prevPage sd_btn"><i class="fa fa-chevron-left"></i><i class="fa fa-chevron-left"></i><span> prevPage</span></span>';html_ += '<span class="sd_prev sd_btn"><i class="fa fa-chevron-left"></i><span> prev</span></span>';html_ += '<span class="sd_next sd_btn"><span>next </span><i class="fa fa-chevron-right"></i></span>';html_ += '<span class="sd_nextPage sd_btn"><span>nextPage </span><i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i></span>';html_ += '</div>';html_ += '</div>';html_ += '</div>';player.htmlundefinedhtml_); /* is youtube */function is_youtubeundefinedvideo_link){ ifundefinedvideo_link.indexOfundefined'watch?v')>-1){ return video_link.substringundefinedvideo_link.indexOfundefined"?v=")+3); }else ifundefinedvideo_link.indexOfundefined'youtube')>-1 || video_link.indexOfundefined'youtu.be')>-1){ return video_link.substringundefinedvideo_link.lastIndexOfundefined"/")+1); } return false;} /* create list */html_ = '';forundefinedvar i=0; i<titles.length; i++){ html_ += '<li>'; html_ += '<img style="width: 80px !important; height: 50px !important; " src="'; ifundefinedis_youtubeundefinedfiles[i])){ html_ += 'http://i3.ytimg.com/vi/'+ is_youtubeundefinedfiles[i])+'/hqdefault.jpg'; }else ifundefinedfiles[i].indexOfundefined"vimeo")>-1){ html_ += ''; }else ifundefinedfiles[i].indexOfundefined"google")>-1){ html_ += 'https://4.bp.blogspot.com/-uHZq1qMLOTg/V_UcnrspqgI/AAAAAAAAAe0/vh6f9Mw0o2QAJjD7vUDR3IZOkQ5Q1y5aQCLcB/s1600/Online-Video-Icon.png'; }else{ html_ += images[i]; } html_ += '" />'; html_ += '<div>'; html_ += '<h2 style="text-align:left">'; html_ += '<i style="color:#f1c40f" class="fa '; ifundefinedis_youtubeundefinedfiles[i])){ html_ += 'fa-youtube'; }else ifundefinedfiles[i].indexOfundefined"vimeo")>-1){ html_ += 'fa-vimeo-square'; }else ifundefinedfiles[i].indexOfundefined"google")>-1){ html_ += 'fa-google'; } else ifundefinedfiles[i].indexOfundefined"vid")>-1){ html_ += 'fa-video-camera'; } else{ html_ += 'fa-file'; } html_ += ''; html_ += '"></i> '; html_ += titles[i]+'</h2>'; html_ += '<p>'+descriptions[i]+'</p><span></span>'; html_ += '</div>'; html_ += '</li>';}player.findundefined'.sd_list').htmlundefinedhtml_); forundefinedvar i=0; i<titles.length; i++){ ifundefinedfiles[i].indexOfundefined"vimeo")>-1){ $.ajaxundefined{ type:'GET', url: 'http://vimeo.com/api/v2/video/' + files[i].substringundefinedfiles[i].lastIndexOfundefined"/")+1) + '.json', jsonp: 'callback', dataType: 'jsonp', indexValue: i, success: functionundefineddata){; var thumbnail_src = data[0].thumbnail_large; player.findundefined'.sd_list').findundefined'li').equndefinedthis.indexValue).findundefined'img').attrundefined'src',thumbnail_src); } }); //console.logundefined'http://vimeo.com/api/v2/video/' + files[i].substringundefinedfiles[i].lastIndexOfundefined"/")+1) + '.json') }} //vimeo detect when video is end $.getScriptundefined'http://f.vimeocdn.com/js/froogaloop2.min.js'); //youtube detect when video is end $.getScriptundefined'http://www.youtube.com/iframe_api'); var youtube_end_load = false;function youtube_endundefined){ youtube_end_load = true; new YT.Playerundefined'video_player', { events: { 'onStateChange': function onPlayerStateChangeundefinedevent) { switchundefinedevent.data) { case YT.PlayerState.ENDED: autocontinue = true; autocontinue_nextundefined); //console.logundefined'Youtube is ended.'); break; } } } });}window.onYouTubeIframeAPIReady = function undefined) { youtube_endundefined);} /* load video */function load_videoundefinedvideo){; var video_url = video; player.findundefined'.sd_server').findundefined'video').removeundefined); player.findundefined'.sd_server').hideundefined); player.findundefined'iframe').attrundefined'src','').hideundefined); player.findundefined'.sd_loading').showundefined); ifundefinedis_youtubeundefinedvideo)){ /* youtube */ video_url = "http://www.youtube.com/embed/"+is_youtubeundefinedvideo)+"?autoplay=0&loop=1&showinfo=0&rel=0&enablejsapi=1"; ifundefinedautocontinue){ video_url = "http://www.youtube.com/embed/"+is_youtubeundefinedvideo)+"?autoplay=1&loop=1&showinfo=0&rel=0&enablejsapi=1"; } player.findundefined'iframe').attrundefined'src',video_url).showundefined); ifundefinedyoutube_end_load){ youtube_endundefined); } }else ifundefinedvideo.indexOfundefined"vimeo")>-1){ /* vimeo */ video_url = "https://player.vimeo.com/video/"+video.substringundefinedvideo.lastIndexOfundefined'/')+1); ifundefinedautocontinue){ player.findundefined'iframe').attrundefined'src',video_url+"?api=1&player_id=video_player&autoplay=1").showundefined); }else{ player.findundefined'iframe').attrundefined'src',video_url+"?api=1&player_id=video_player").showundefined); } ifundefinedtypeof undefinedplayer.findundefined'iframe')[0]).addEvent != "undefined"){ undefinedplayer.findundefined'iframe')[0]).addEventundefined'ready', functionundefinedplayer_id) { undefinedplayer.findundefined'iframe')[0]).addEventundefined'finish', functionundefined){ autocontinue = true; autocontinue_nextundefined); //console.logundefined"Vimeo is ended"); }); }); } }else ifundefinedvideo.indexOfundefined"google")>-1){ /* google */ player.findundefined'iframe').attrundefined'src',video_url).showundefined); } else ifundefinedvideo.indexOfundefined"vid")>-1){ /* vid */ player.findundefined'iframe').attrundefined'src',video_url).showundefined); } else{ /* server */ html_ = ''; ifundefinedautocontinue){ html_ += '<video width="100%" height="100%" controls autoplay>'; }else{ html_ += '<video width="100%" height="100%" controls>'; } html_ += '<source src="'+video_url.replaceundefined'.ogg','.mp4')+'" type="video/mp4">'; html_ += '<source src="'+video_url.replaceundefined'.mp4','.ogg')+'" type="video/ogg">'; html_ += '</video>'; player.findundefined'.sd_server').showundefined).htmlundefinedhtml_); player.findundefined"video").bindundefined"ended", functionundefined){ autocontinue = true; autocontinue_nextundefined); //console.logundefined"Server is ended"); }); } player.findundefined'iframe').loadundefinedfunctionundefined){ player.findundefined'.sd_loading').hideundefined); });} /* change video */player.findundefined'.sd_list').clickundefinedfunctionundefined){ autocontinue = true;});player.findundefined'.sd_list').findundefined'li').outerHeightundefineditem_height);player.findundefined'.sd_list').findundefined'li').eachundefinedfunctionundefinednum){ $undefinedthis).clickundefinedfunctionundefined){ video_count = num; ifundefinedplayer.findundefined'.sd_list').findundefined'li').equndefinednum).hasClassundefined'selected')){return;}; player.findundefined'.sd_list').findundefined'li').removeClassundefined'selected').equndefinednum).addClassundefined'selected'); player.findundefined'li').findundefined'div').findundefined'h2').removeClassundefined'sele').equndefinednum).addClassundefined'sele'); load_videoundefinedfiles[num]); selectundefined); });}); /* select video */function selectundefined){ ifundefinedvideo_count>0){ player.findundefined'.sd_prev').addClassundefined'active'); }else{ player.findundefined'.sd_prev').removeClassundefined'active'); } ifundefinedvideo_count<files.length-1){ player.findundefined'.sd_next').addClassundefined'active'); }else{ player.findundefined'.sd_next').removeClassundefined'active'); }}selectundefined); /* size */function sizeundefined){ ifundefined$undefinedwindow).widthundefined)<opt.player_mobile_on_width || !opt.automatic_response){ list_item = list_item_mobile; ifundefinedopt.automatic_response){ player.widthundefined$undefinedwindow).widthundefined)); } player.removeClassundefined'sd_desktop'); player.findundefined'.sd_list').heightundefinedlist_item*undefineditem_height)); player.findundefined'.sd_video').heightundefinedplayer.findundefined'.sd_video').widthundefined)*ratio); player.findundefined'.sd_video').widthundefined'100%'); player.findundefined'.sd_videos').widthundefined'100%'); }else{ list_item = list_item_desktop; player.addClassundefined'sd_desktop'); player.widthundefinedwidth_); player.findundefined'.sd_list').heightundefinedlist_item*undefineditem_height-0.8)); player.findundefined'.sd_video').heightundefinedplayer.findundefined'.sd_videos').outerHeightundefined)); player.findundefined'.sd_video').cssundefined'width',opt.player_desktop_video_width); player.findundefined'.sd_videos').cssundefined'width',100-parseIntundefinedopt.player_desktop_video_width)+'%'); } }$undefinedwindow).resizeundefinedfunctionundefined){ sizeundefined);}); sizeundefined); /* scroll */function scrollundefinedt){ ifundefinedt.scrollTopundefined)>0){ player.findundefined'.sd_prevPage').addClassundefined'active'); }else{ player.findundefined'.sd_prevPage').removeClassundefined'active'); } ifundefinedt[0].scrollHeight >= t.outerHeightundefined)+t.scrollTopundefined)+5){ player.findundefined'.sd_nextPage').addClassundefined'active'); }else{ player.findundefined'.sd_nextPage').removeClassundefined'active'); }}player.findundefined'.sd_list').scrollundefinedfunctionundefined){ scrollundefined$undefinedthis));});scrollundefinedplayer.findundefined'.sd_list')); /* view */function viewundefineddirection){ var viewTop = player.findundefined'.sd_list').scrollTopundefined); var viewBottom = viewTop + player.findundefined'.sd_list').outerHeightundefined); var elTop = player.findundefined'.sd_list').findundefined'li').equndefinedvideo_count).offsetundefined).top-player.findundefined'.sd_list').findundefined'li').equndefinedvideo_count).parentundefined).offsetundefined).top; var elBottom = elTop + player.findundefined'.sd_list').findundefined'li').equndefinedvideo_count).outerHeightundefined); ifundefinedundefinedelBottom+viewTop+10 >= viewBottom+player.findundefined'.sd_list').findundefined'li').equndefinedvideo_count).outerHeightundefined))||undefinedelBottom < 1)){ scroll_step = video_count*undefineditem_height); ifundefineddirection == 'prev'){ scroll_step = undefinedvideo_count-list_item+1)*undefineditem_height); } player.findundefined'.sd_list').animateundefined{scrollTop:scroll_step},500); } return true;} /* CONTROL BUTTONS *//* prevPage */player.findundefined'.sd_prevPage').clickundefinedfunctionundefined){ ifundefined$undefinedthis).hasClassundefined'active')){ scroll_step = player.findundefined'.sd_list').scrollTopundefined)-list_item*player.findundefined'.sd_list').findundefined'li').outerHeightundefined); scroll_step = Math.ceilundefinedscroll_step/item_height); player.findundefined'.sd_list').animateundefined{scrollTop:scroll_step*undefineditem_height)},500); }});/* prev */player.findundefined'.sd_prev').clickundefinedfunctionundefined){ ifundefinedvideo_count>0){ video_count--; selectundefined); viewundefined'prev'); player.findundefined'.sd_list').findundefined'li').equndefinedvideo_count).triggerundefined'click'); }});/* next */player.findundefined'.sd_next').clickundefinedfunctionundefined){ ifundefinedvideo_count<files.length-1){ video_count++; selectundefined); viewundefined'next'); player.findundefined'.sd_list').findundefined'li').equndefinedvideo_count).triggerundefined'click'); }});/* nextPage */player.findundefined'.sd_nextPage').clickundefinedfunctionundefined){ ifundefined$undefinedthis).hasClassundefined'active')){ scroll_step = player.findundefined'.sd_list').scrollTopundefined)+list_item*item_height; scroll_step = Math.ceilundefinedscroll_step/item_height); player.findundefined'.sd_list').animateundefined{scrollTop:scroll_step*undefineditem_height)},500); }}); player.findundefined'.sd_list').animateundefined{scrollTop:0},10);player.findundefined'.sd_list').findundefined'li').equndefined0).triggerundefined'click');$undefineddocument).readyundefinedfunctionundefined){$undefined'script[src^="https://dl.dropboxusercontent.com/s/8v04o4srg4rr4fr/jj.js"]').removeundefined); }); function autocontinue_nextundefined){ ifundefinedvideo_count<files.length-1){ video_count++; selectundefined); viewundefined'next'); player.findundefined'.sd_list').findundefined'li').equndefinedvideo_count).triggerundefined'click'); }} } var timer = setIntervalundefinedfunctionundefined){ ifundefinedtypeof options != 'undefined'){ new Video_playerundefinedoptions); clearIntervalundefinedtimer); } },50); //]]> </script>
- Finally, you just copy and paste this code into you blog post and page, choose HTML mode.
<div id="player" style="width: 100%;"></div><script language="javascript" type="text/javascript">options.player_list = [ {"file": "https://www.facebook.com/video/embed?video_id=1137629952982032","title": "01. Achha Reyeak Sne Part 01","description": "","image": "https://1.bp.blogspot.com/-N7PpFDgJez0/V_bgjAUDFxI/AAAAAAAAAhE/3PEhnurjLT4E_jwVUZumXv37uXniAadjwCLcB/s1600/Love%2Bof%2BWonder.jpg"}, {"file": "https://www.youtube.com/watch?v=dmaXbYFOh9E","title": "02. Achha Reyeak Sne Part 02","description": "","image": ""}, {"file": "https://vimeo.com/182078437","title": "03. Achha Reyeak Sne Part 03","description": "","image": ""}, {"file": "https://docs.google.com/file/d/0B55D-OOo0ht5bGR2YncyNjM2T2M/preview","title": "04. Achha Reyeak Sne Part 04","description": "","image": ""}, ]; var player = new Video_playerundefinedoptions); </script> <br /><div style="clear: both;"></div>
- *Notice:
- 1137629952982032is the facebook video ID. you just replace it with your video ID.
- https://1.bp.blogspot.com/-N7PpFDgJez0/V_bgjAUDFxI/AAAAAAAAAhE/3PEhnurjLT4E_jwVUZumXv37uXniAadjwCLcB/s1600/Love%2Bof%2BWonder.jpgit is the link image of drama or movie.
- 182078437it is the Vimeo video ID.
- 0B55D-OOo0ht5bGR2YncyNjM2T2Mit is the folder ID in the Google Drive.
source: kimsandiary
Download Scrip Here
0 Comments
Post a Comment