របៀប​តម្លើង​ក្បាលចាក់ JW Player

JW Player គឺ​ជា Video Plugin មួយ​ដ៏​ពេញនិយម វេបសាយ​ជា​ច្រើន​បាន​ប្រើប្រាស់​វា​សម្រាប់​ធ្វើ​ការ​ចាក់​វីដេអូ​ផ្សេងៗ វា​អាច Support File Type ជា​ច្រើន​ដូចជា៖ .mp3, mp4, .webm, .m3u8, hls... តោះ! កុំ​បង្អង់​យូរ​ទៅ​មើល​របៀប​តម្លើង​ជាមួយ​ខ្ញុំ​ទាំងអស់​គ្នា​នៅ​ខាងក្រោម​នេះ​តែ​ម្ដង។




១.ចូល​ទៅ​កាន់ Theme --> Edit HTML
២.ចម្លង​កូដ​ខាងក្រោម​ដាក់​ពី​ខាងលើ </body> បន្ទាប់​មក​ចុច Icon Save រួច​ចាកចេញ​ពី​ផ្ទាំង Edit HTML
<script src='https://cdn.jsdelivr.net/gh/RithiSethTes/BloggerCodes@main/JWPlayer/index.js' type='text/javascript'></script>
<script type='text/javascript'>
const homePageUrl = "<data:blog.homepageUrl/>";
const getBlogPostImage = () => {
    let hasImage = {
        isTrue: "<b:if cond='data:view.featuredImage'>true</b:if>",
        isUrl: "<data:view.featuredImage/>"
    }
    if (hasImage.isTrue === "true") {
        return hasImage.isUrl;
    }
}
</script>
<script type='text/javascript'>
//<![CDATA[
const vidElem = document.querySelector('#jw-player');
const vidJw = jwplayer('jw-player');
const movieElem = document.querySelector('#movie');
const movieJw = jwplayer('movie');
const logoImage = `https://assets-jpcust.jwpsrv.com/watermarks/RUjIlP0s.png`;
const createCustomLogo = () => {
    let logo = {
        file: logoImage,
        hide: false,
        margin: "20",
        position: "top-left",
        link: homePageUrl
    }
    return logo;
}
const loadJwPlayer = () => {
    try {
        if (vidElem) {
            vidJw.setup({
                file: file.src,
                logo: createCustomLogo(),
                image: getBlogPostImage()
            })
        } else if (movieElem) {
            movieJw.setup({
                logo: createCustomLogo(),
                captions: {
                    fontSize: 14,
                    backgroundOpacity: 0,
                    edgeStyle: "raised"
                },
                playlist: [{
                    image: getBlogPostImage(),
                    file: movie.src,
                    captions: [{
                            label: movie.subtitles[0].lang,
                            file: movie.subtitles[0].src,
                            default: true
                        },
                        {
                            label: movie.subtitles[1].lang,
                            file: movie.subtitles[1].src
                        }
                    ]
                }]
            })
        }
    } catch (e) {
        console.log(`Error! ការកំណត់របស់អ្នកមិនត្រឹមត្រូវទេ។`)
    }
};
window.addEventListener('DOMContentLoaded', loadJwPlayer);
//]]>
</script>
៣.ចម្លង​កូដ​ខាងក្រោម​ដាក់​ចូល Blog Post ឬ Page ដោយ​ប្ដូរ​ទៅ​ជា HTML View
* វីដេអូ File Stream.m3u8 ឬ វីដេអូ File.mp4 ដែល​គ្មាន Subtitles
<div id="jw-player"></div>
<script>
file = {
    src: "https://live.ams.com.kh/app/stream/playlist.m3u8"
};
</script>
* វីដេអូ File.mp4 ដែល​អាច​ដាក់ Subtitles បាន
<div id="movie"></div>
<script>
movie = {
    src: "url-file.mp4",
  	subtitles: [
        {
            lang: "ភាសាខ្មែរ",
            src: "url-subtitles"
        },
        {
            lang: "អង់គ្លេស",
            src: "url-subtitles"
        }
    ]
};
</script>
* ចំណាំ
- url-file.mp4 គឺ​ជា Link Video .mp4
- url-subtitles គឺ​ជា Link Subtitles ដែល​មាន​កន្ទុយ Extension .srt ឬ .vtt

៤.ចុច Publish Post របស់​អ្នក​ជា​ការ​ស្រេច៕

ទេស រិទ្ធិសិត

​​  ខ្ញុំ​បាទ​ឈ្មោះ ទេស រិទ្ធិសិត ជា​អ្នក​សរសេរ​កំណត់​ហេតុ​បណ្តាញ​ប្លក់ហ្គ័រ ដោយ​ផ្ដល់​ឲ្យ​អ្នក​ទាំង​អស់​គ្នា​អាច​សិក្សា​ស្វែង​យល់​អំពី​គន្លឹះ​ដែល​ទាក់​ទង​ទៅ​នឹង​ប្លក់ហ្គ័រ។

មតិយោបល់

  1. តើធ្វើដូចម្តេចដើម្បីទទួលបាន url-file.mp4 ?

    ReplyDelete
    Replies
    1. អាច​ប្រើសេវាកម្ម Cloud Storage ឬ Hosting ដែល​គេ​ដាក់លក់​នៅ​លើ Internet តែ​បើ​ចង់​ប្រើតិចតួចអាច Upload Video ជាមួយ Google Drive។

      Delete
  2. How to get url-file.mp4 from google drive?

    ReplyDelete
    Replies
    1. You need to create google drive API Key to access the media file.

      Delete
  3. This comment has been removed by the author.

    ReplyDelete

ដើម្បី​បញ្ចេញ​មតិ​សូម​អាន​ លក្ខ​ខណ្ឌ​និង​កិច្ច​ព្រម​ព្រៀង​ ជា​មុន​សិន​!