របៀប​តម្លើង​ក្បាលចាក់ 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

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