របៀប​តម្លើង​និង Embed វីដេអូ

សួស្ដី​អ្នក​ទាំង​អស់​គ្នា ថ្ងៃ​នេះ​ខ្ញុំ​សូម​បង្ហាញ​ពី​របៀប Embed វីដេអូ ពី Website ផ្សេងៗ និង​របៀប​ក្នុង​ការ Play វីដេអូ​របស់​អ្នក​ជា​មួយ JW Player លើស​ពី​នេះ​ទៅ​ទៀត​អ្នក​គ្រាន់​តែ​ប្រើ​ប្រាស់​កូដ​មួយ​បន្ទាត់​ប៉ុណ្ណោះ​ក្នុង​ការ Post ដើម្បី​អោយ​វីដេអូ​បង្ហាញ តោះ! កុំ​ចាំ​យូរ​រៀន​តម្លើង​ជា​មួយ​ខ្ញុំ​នៅ​ខាង​ក្រោម។

១.ចូល​ទៅ​កាន់ Theme ចុច​សញ្ញា ▼ រួច​យក​ពាក្យ Edit HTML
២.ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </head>

<style type="text/css">
#rst-player:not(.jwplayer){position:relative;overflow:hidden;width:100%;height:100%;padding-top:56.25%;background:#000000}
#rst-player iframe#embed-player{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
</style>

៣.ចម្លង​កូដ​ខាង​ក្រោម​ដាក់​ពី​ខាង​លើ </body>

<script type="text/javascript">
//<![CDATA[
const rstVideoPlayer = {
    getAttr: (el, attr) => {
        return el.getAttribute(attr);
    },
    removeAttr: (el, ...attrs) => {
        attrs.forEach(attr => el.removeAttribute(attr));
    },
    loadJWScriptTag: (srctag, opt) => {
        if (opt === true) {
            const scrEl = document.createElement('script');
            scrEl.type = 'text/javascript';
            scrEl.src = srctag;
            document.body.appendChild(scrEl);
        }
    },
    init: function (opt) {
        const playerDiv = document.getElementById('rst-player');
        let self = this;
        if (playerDiv) {
            const videoId = self.getAttr(playerDiv, 'data-id');
            const videoUrl = self.getAttr(playerDiv, 'data-url');
            const videoPoster = self.getAttr(playerDiv, 'data-image');
            const dataPlayer = self.getAttr(playerDiv, 'data-player');
            let checkAutoplay = opt.autoplay === true ? "?autoplay=1" : "";
            let url = '';
            switch (dataPlayer) {
            case "dailymotion":
                url += `https://www.dailymotion.com/embed/video/${videoId + checkAutoplay}`
                break;
            case "googledrive":
                url += `https://drive.google.com/file/d/${videoId}/preview`
                break;
            case "odnoklassniki":
                url += `https://ok.ru/videoembed/${videoId + checkAutoplay}`
                break;
            case "rumble":
                url += `https://rumble.com/embed/${videoId}`
                break;
            case "vimeo":
                url += `https://player.vimeo.com/video/${videoId + checkAutoplay}`
                break;
            case "youtube":
                url += `https://www.youtube.com/embed/${videoId + checkAutoplay}`
                break;
            default:
                url += videoUrl ?? "about:blank"
                break;
            }
            if (dataPlayer === "jw") {
                const player = jwplayer('rst-player');
                player.setup({
                    "file": videoUrl || `https://bigf.bigo.sg/asia_live/V4s7/${videoId}.mp4`,
                    "image": videoPoster,
                    "width": "100%",
                    "height": "100%",
                    "aspectratio": "16:9",
                    "autostart": opt.autoplay === true ? true : false,
                    "mute": false,
                    "logo": {
                        "file": opt.logo,
                        "hide": false,
                        "position": "top-left"
                    }
                });
            } else {
                playerDiv.innerHTML = `<iframe id="embed-player" src="${url}" width="100%" height="100%" allow="autoplay; fullscreen" loading="lazy"></iframe>`;
                self.removeAttr(playerDiv, 'data-id', 'data-url', 'data-image', 'data-player');
            }
        }
    }
};
rstVideoPlayer.loadJWScriptTag('https://cdn.jwplayer.com/libraries/IDzF9Zmk.js', true);
window.onload = function () {
    rstVideoPlayer.init({
        autoplay: false,
        logo: "https://assets-jpcust.jwpsrv.com/watermarks/RUjIlP0s.png"
    });
};
//]]>
</script>

កំណត់​សម្គាល់៖
- autoplay: true Autoplay វីដេអូ​ដោយ​ស្វ័យ​ប្រវត្តិ ឬ false បិទ Autoplay
- logo: រូបភាព Logo នៅ​លើ JW Player ខាង​លើ​ឈៀង​ខាង​ឆ្វេង
៤.ចុច Icon Save រួច​ចាក​ចេញ​ពី​ផ្ទាំង Edit HTML

៥.ជ្រើសរើស​កូដ​ណា​មួយ​ខាង​ក្រោម ដាក់​ចូល​ទៅ​កាន់ Blog Post (HTML View)
+ Embed វីដេអូ​ពី Website ផ្សេងៗ

<div id="rst-player" data-id="x8fk3rq" data-player="dailymotion"></div>

<div id="rst-player" data-id="0Bwh7cTp2lB3PRmgtODRWOENEb28" data-player="googledrive"></div>

<div id="rst-player" data-id="4782018661043" data-player="odnoklassniki"></div>

<div id="rst-player" data-id="v3ccruu" data-player="rumble"></div>

<div id="rst-player" data-id="208621116" data-player="vimeo"></div>

<div id="rst-player" data-id="nAvDh3to9oY" data-player="youtube"></div>

<div id="rst-player" data-url=""></div>

កំណត់​សម្គាល់៖
ប្រសិន​បើ Website ដែល​អ្នក​ចង់ Embed វីដេអូ​មិន​មាន​ក្នុង​កូដ​ខាង​លើ​សូម​ប្រើ​ប្រាស់​កូដ​ខាង​ក្រោម​បង្អស់​រួច Paste កូដ Embed វីដេអូ​នៃ Website នោះ​ចូល​ទៅ​ក្នុង​ចន្លោះ data-url ។

+ Play វីដេអូ​ជា​មួយ JW Player ដោយ​ប្រើ File .mp4 ឬ .m3u8

// Video ID ពី​តំណរភ្ជាប់ https://bigf.bigo.sg/asia_live/V4s7/XXXXXX.mp4
<div id="rst-player" data-id="XXXXXX" data-player="jw"></div>
<div id="rst-player" data-id="XXXXXX" data-image="https://image.tmdb.org/t/p/w1280/1foT5oMWmutKx4tgNUARVtywL6O.jpg" data-player="jw"></div>

// Video ពី​តំណរភ្ជាប់​ផ្សេងៗ
<div id="rst-player" data-url="https://vjs.zencdn.net/v/oceans.mp4" data-player="jw"></div>
<div id="rst-player" data-url="https://vjs.zencdn.net/v/oceans.mp4" data-image="https://image.tmdb.org/t/p/w1280/1foT5oMWmutKx4tgNUARVtywL6O.jpg" data-player="jw"></div>

កំណត់​សម្គាល់៖
- data-id វីដេអូ ID ៦ខ្ទង់​នៃ​តំណរភ្ជាប់ https://bigf.bigo.sg/asia_live/V4s7/XXXXXX.mp4
- data-url តំណរភ្ជាប់ File .mp4 ឬ .m3u8
- data-image រូបភាព​នៅ​លើ JW Player

សូម​អរគុណ​ជួប​គ្នា​ពេល​ក្រោយ​ទៀត៕