ដាក់ Responsive HTML5 Mp4 វីដេអូ

ស្វាគមន៍​សារ​ជា​ថ្មី នៅ​ក្នុង​អត្ថបទ​មុន​ខ្ញុំ​បាន​លើកយក​គន្លឹះ​ក្នុង​ការ Embed វីដេអូ​ជា​លក្ខណៈ Iframe ចំណែក​ក្នុង​អត្ថបទ​នេះ​វិញ​ខ្ញុំ​នឹង​បង្ហាញ​អ្នក​ទាំងអស់​គ្នា​ពី​របៀប​ក្នុង​ការ​ដាក់​វីដេអូ​ជា File .mp4 ម្ដង។

១.ចូល​ទៅកាន់ Theme => Edit HTML រួច​ចម្លង​កូដ​ខាងក្រោម​ដាក់​ពី​ខាងលើ </head>
<style type="text/css">
#video-player{position:relative;overflow:hidden;width:100%;height:100%;border-radius:5px}
.video-container{border:4px solid #ff0000}
.video-responsive{position:relative;overflow:hidden;width:100%;height:100%;padding-top:56.25%;background-color:rgb(0,0,0)}
.video-responsive video{position:absolute;top:0;left:0;width:100%;height:100%}
</style>
២.ចម្លង​កូដ​ខាងក្រោម​ដាក់​ពី​ខាងលើ </body> បន្ទាប់​មក​ចុច Icon Save រួច​ចាកចេញ​ពី​ផ្ទាំង Edit HTML
<script type="text/javascript">
$('#video-player').each(function () {
    let $this = $(this),
        zeroIndex = 0,
        buildVideo = "";
    buildVideo += '<div class="video-container">';
    buildVideo += '<div class="video-responsive">';
    buildVideo += '<video class="video-mp4" width="100%" height="100%" controls playsinline webkit-playsinline>';
    buildVideo += '<source src="' + sourceFile[zeroIndex] + '" type="video/mp4">';
    buildVideo += '</video>';
    buildVideo += '</div></div>';
    $this.html(buildVideo);
});
</script>
៣.ចម្លង​កូដ​ខាងក្រោម​ដាក់​ក្នុង Blog Post ដោយ​ប្ដូរ​ទៅជា HTML view
<div id="video-player"></div>
<script>
let sourceFile = ["https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"];
</script>
៤.ផ្លាស់ប្ដូរ Link Video .mp4 ខាងលើ​រួច​ចុច​ពាក្យ Publish ជា​ការ​ស្រេច៕

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

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

មតិយោបល់

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

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