របៀប​តម្លើង​ក្បាលចាក់ 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 របស់​អ្នក​ជា​ការ​ស្រេច៕