របៀប​ដាក់​ Videos Playlist ក្នុង Blogger

សួស្ដី ប្រិយមិត្ត​ប្លក់អាក្បាលធំ ដោយសារ​ចង់​ឲ្យ​អ្នក​ប្រើ​ Blogger ខ្មែរ​យើង​ឆាប់​ចេះ​ប្រើ ដូច្នេះ​ខ្ញុំ​បាន​លើក​យក​គន្លឹះ Blogger ល្អ​ក្នុង​ន័យ​ប្រើប្រាស់​ឲ្យ​ដល់​កម្រិត​កំពូល ប្រើ​ឲ្យ​អស់​លទ្ធភាព​ដែល blogger បើក​ឲ្យ​ប្រើ។ កាលពី​មុន​ខ្ញុំ​ធ្លាប់​បង្ហាញ​ពី​របៀប​ដាក់​កូដ Videos Playlist ដែល​អាច​ចុច​លើ​វីដេអូ​បន្តបន្ទាប់​ដោយ​មិន​បាញ់​ចាកចេញ​ពី Post ដដែល​នោះ។ ឥឡូវ​ខ្ញុំ​បាន​ឃើញ​មាន​ Videos Playlist មួយ​ទៀត​ប្រហាក់ប្រហែល​មុន​ដែរ តែ​ដំណើរ និង​រូបរាង​ល្អជាង​មុន​បន្តិច​ត្រង់​ចំណុច ៖
- មាន​ Button ជ្រើសរើស​គុណភាព​វីដេអូ
- ដំណើរការ​ជា​មួយ​ពពួក​អេក្រង់ Touch Screen បាន​ល្អ

៙ របៀប​ដាក់ Videos Playlist ក្នុង Blogger [Version 2] ៖

- LogIn ចូល​ក្នុង​គណនី Blogger របស់​អ្នក
- ចូល​ទៅ Blogger Dashboard >> Template >> Edit Template

- ចុច​លើ​តំបន់​​កូដ  ដើម្បី​ចុច​ Ctrl + F នោះ​ប្រអប់​ស្វែងរក​នឹង​លេច​ឡើង។
- វាយ​ពាក្យ​ស្វែងរក​ស្លាក  </head>  រួច​ចុច Enter
-  ដាក់​កូដ​ខាង​ក្រោយនេះ ពី​លើក​ ស្លាក  </head> រួច Save ។

 <script src='http://jwpsrv.com/library/o3BeDjJfEeKT8yIACp8kUw.js'/>
<script src='https://dl.dropboxusercontent.com/s/1sbu88nx2qddejf/jw6-touchscroll.min.js'/>
<script src='http://www.dev.powered-by-haiku.co.uk/jw-html-config/jwplayer/v6/jwplayer.js' type='text/javascript'/>
<script src='http://www.dev.powered-by-haiku.co.uk/jw-html-config/jwplayer/jwplayer-html-config.min.js' type='text/javascript'/>
<script src='http://p.jwpcdn.com/6/5/jwplayer.js?ver=3.8.1' type='text/javascript'/>
<script src='http://powered-by-haiku.co.uk/wp-includes/js/jquery/jquery.js?ver=1.10.2' type='text/javascript'/>
<script src='http://powered-by-haiku.co.uk/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1' type='text/javascript'/>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

- រួច Save template ។

៙ របៀប​ចាត់ចែង​វីដេអូ​ក្នុង អត្ថបទ Post ឬ Page ៖

- បើក​យក Post ថ្មីមួយ
- ចុច​លើ Tab HTML  រួច​បិទភ្ជាប់ កូដ​ខាង​ក្រោយ​ចូល

<div id="playerSpuurExoMyae">
</div>
<script type="text/javascript">
jwplayer('playerSpuurExoMyae').setup({ playlist: [

{"file": "https://www.youtube.com/watch?v=LeDwDd20wEA","title": "5 - The Journey of Flower ","description": "","image": "http://i.ytimg.com/vi/LeDwDd20wEA/0.jpg"},
{"file": "https://www.youtube.com/watch?v=X6XXia5B2Wg","title": "1 - The Journey of Flower ","description": "","image": "http://i.ytimg.com/vi/X6XXia5B2Wg/0.jpg"},
{"file": "https://www.youtube.com/watch?v=EYKO1za5mX0","title": "2 - The Journey of Flower ","description": "","image": "http://i.ytimg.com/vi/EYKO1za5mX0/0.jpg"},
{"file": "https://www.youtube.com/watch?v=Pj3q0ZChgFE","title": "3 - The Journey of Flower ","description": "","image": "http://i.ytimg.com/vi/Pj3q0ZChgFE/0.jpg"},
{"file": "https://www.youtube.com/watch?v=TvyXFnfjvVw","title": "4 - The Journey of Flower ","description": "","image": "http://i.ytimg.com/vi/TvyXFnfjvVw/0.jpg"},
{"file": "https://www.youtube.com/watch?v=hfXZ6ydgZyo","title": "6 - The Journey of Flower ","description": "","image": "http://i.ytimg.com/vi/hfXZ6ydgZyo/0.jpg"},
{"file": "https://www.youtube.com/watch?v=0xkhmd303DA","title": "7 - The Journey of Flower ","description": "","image": "http://i.ytimg.com/vi/0xkhmd303DA/0.jpg"},

],
listbar: {position: 'bottom',size: 300},
width: '100%',
aspectratio: '16:9',
skin: 'beelden',
});var jwp = jwplayer(playerSpuurExoMyae);
jwtube.patch(jwp);
</script>

+ កូដ​ដែល​ត្រូវ​កែ ៖
-  ID វីដេអូ​ក្នុង​ Youtube ត្រូវ​ប្ដូរ​នៅ​ ២ កន្លែង (មើល​ពណ៌​ដែល​ខ្ញុំ​ឧទាហរណ៍)។
- "title": "2 - The Journey of Flower " ជា​កន្លែង​ដាក់​ចំណង​ឲ្យ​វីដេអូ។
- ក្រៅ​ពី​ហ្នឹង ​ទុក​ដដែល​ក៏​បាន។

តើ ID វីដេអូ Youtube នៅ​ឯណា?

ចំណុច​គួរ​ពិចារណា?
បើ​ថ្ងៃ​ណាមួយ Code នោះ​លែង​ដំណើរការ អញ្ចឹង​លោកអ្នក​ត្រូវ Host កូដ​ផ្ទាល់ខ្លួន ជៀសវាង

Adding Youtube Playlist Using JW Player to Blogger

Adding Jw Player to blogger

1. Adding Script to Blogger Template

With this tutorial, it very simple and easy way for somebody who is about video blogging.

Now, let see the following step:

1. Go to Blogger Dashboard >> Template >> Edit Template

2. Click anywhere inside the code area >> press "Ctrl + F" on your keyboard to open the search box

3. Inside the search box past this </head> tags and hit Enter to find it.

4. Just above the </head> past the following code.

<script src='http://jwpsrv.com/library/o3BeDjJfEeKT8yIACp8kUw.js'/>
<script src='https://dl.dropboxusercontent.com/s/1sbu88nx2qddejf/jw6-touchscroll.min.js'/>
<script src='http://www.dev.powered-by-haiku.co.uk/jw-html-config/jwplayer/v6/jwplayer.js' type='text/javascript'/>
<script src='http://www.dev.powered-by-haiku.co.uk/jw-html-config/jwplayer/jwplayer-html-config.min.js' type='text/javascript'/>
<script src='http://p.jwpcdn.com/6/5/jwplayer.js?ver=3.8.1' type='text/javascript'/>
<script src='http://powered-by-haiku.co.uk/wp-includes/js/jquery/jquery.js?ver=1.10.2' type='text/javascript'/>
<script src='http://powered-by-haiku.co.uk/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1' type='text/javascript'/>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

5. Save Template

2. Adding JavaSript to specific Post/Page

Now you add the following script to the specific post/page you want to:

1. Go to blogger dashboard and create a new post/page for your video

2. Tab to the"HTML" area and past the following script:

<div id="playerSpuurExoMyae">
</div>
<script type="text/javascript">
jwplayer('playerSpuurExoMyae').setup({ playlist: [

{"file": "https://www.youtube.com/watch?v=76yuTxhp-hQ","title": "249.Short Question and Answer [Ven San Sochea]","description": "","image": "http://i.ytimg.com/vi/76yuTxhp-hQ/0.jpg"},
{"file": "https://www.youtube.com/watch?v=_AUqp0fLyVE","title": "244.Short Question and Answer [Ven San Sochea] ","description": "","image": "http://i.ytimg.com/vi/FcLXb0yb3Sw/0.jpg"},


],
listbar: {position: 'bottom',size: 200},
width: '100%',
aspectratio: '16:9',
skin: 'beelden',
});var jwp = jwplayer(playerSpuurExoMyae);
jwtube.patch(jwp);
</script>

Note: 1- You just change youtube video ID in the red color, Video ID is the last character of youtube URL like (v=XXXXXX)

          2- For the green color add the same video ID for the thumbnail.

          3- If you want to change the position of your video list just choose one of this ( 'right', 'left', 'bottom')

          4-If you want to add more videos on a list, just copy the hold script where it say "file":xxxx.               Make sure you add video ID to both side "at the red color and green color".

I hope that this tutorail will fully help you. If you still have any questions, please feel free to contact me or write your comment. Don't foreget to subscribe and like facebook page to recieve every post on this site. 

Dhama