How To Easily Integration Video Player MovieJS - For HLS Or M3U8 Files, Support Upload Subtitle Local On Player

Check Live Demos : Check Player

Struktur Code HTML

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="icon" type="image/x-icon" href=" <!-- Favicon Path Here --> "/>
<script> document.title = "Video Player | MoovieJS";</script>	
	
<!-- File Javascript -->	
	
<!-- File Css -->
	
<link rel="dns-prefetch" href=" <!-- URL Address Here --> "/>
<link rel="dns-prefetch" href=" <!-- URL Address Here --> "/>
	
</head>
<body>
<!-- Video Source or Player ID -->

<!-- JavaScript Setup MoovieJS -->

<!-- Included PHP File - Pop-up Ads -->
</body>
</html>

Resource File Library

File Css
https://cdn.codenine.biz.id/mooviejs/assets/css/moovie.css
File Javascript
https://cdn.codenine.biz.id/mooviejs/assets/js/moovie.js
File SVG Icons On Player
https://cdn.codenine.biz.id/mooviejs/assets/icons/
File Example, M3U8/ HLS
https://cdn.codenine.biz.id/mooviejs/assets/video/aquaman-and-the-lost-kingdom-trailer.m3u8
File Example, Subtitles Format VTT
https://cdn.codenine.biz.id/mooviejs/assets/subtitle/aquaman-and-the-lost-kingdom.en.vtt
https://cdn.codenine.biz.id/mooviejs/assets/subtitle/aquaman-and-the-lost-kingdom.jp.vtt
https://cdn.codenine.biz.id/mooviejs/assets/subtitle/aquaman-and-the-lost-kingdom.ph.vtt
https://cdn.codenine.biz.id/mooviejs/assets/subtitle/aquaman-and-the-lost-kingdom.vt.vtt
https://cdn.codenine.biz.id/mooviejs/assets/subtitle/aquaman-and-the-lost-kingdom.id.vtt

Follow Step by Step

#1 - Step Video Source or Player ID

<video id="codenine-player" poster=" <!-- URL Poster or Thumbnail Here --> ">
<track kind="captions" label="English" srclang="en" src=" <!-- URL Subtitle Here --> ">
<track kind="captions" label="Indonesia" srclang="id" src=" <!-- URL Subtitle Here --> ">
<track kind="captions" label="Philippines" srclang="tl" src=" <!-- URL Subtitle Here --> ">
<track kind="captions" label="Japanese" srclang="jp" src=" <!-- URL Subtitle Here --> ">
<track kind="captions" label="Vietnam" srclang="vt" src=" <!-- URL Subtitle Here --> ">
</video>

#2 - Step JavaScript Setup MoovieJS

<script>
var demo = new Moovie({
selector: "#codenine-player",
icons: {
path: " <!-- URL Assets Icons SVG Here --> "
}
});
var video = demo.video;
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(' <!-- m3u8 file here --> ');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() { console.log("Ready to play!"); });
}
</script>

#3 - Step Ads Popup On Player

<?php include './ad_popup.php'; ?>
NOTES : you must create a php file, Example : ad_popup.php
Was this article useful, helpful to you?, Support For My Work