sopplayer
Version:
Sopplayer is a sleek and feature-rich HTML5 video player that enhances the visual experience of videos on web pages. It offers compatibility across devices and browsers, supporting various video formats. With intuitive controls and customizable options, S
71 lines (59 loc) • 2.98 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Moovie.js | Movie Focused HTML5 Player</title>
<!-- Bootstrap core CSS -->
<link href="demo-template/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Moovie CSS Style -->
<link rel="stylesheet" type="text/css" href="css/moovie.css">
<!-- GFonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">
</head>
<body style="background-color:#10131a;">
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div style='max-width: 900px; position: relative; margin: 0 auto; margin-top: 0px; margin-top: 0px; margin-top: 43px;'>
<img src="demo-template/images/moovie_white.png" style="max-width: 214px;">
<p style="margin-bottom: 49px; font-size: 28pt; color: white; font-family: Montserrat;">Media player made for movies</p>
</div>
<div style='max-width: 800px; position: relative; margin: 0 auto; margin-top: 0px; margin-top: 64px;'>
<video id="example" poster="https://raw.githubusercontent.com/BMSVieira/moovie.js/main/demo-template/images/poster.png">
<source src="https://mooviehosted.000webhostapp.com/trailer.mp4" type="video/mp4">
<track kind="captions" label="Portuguese" srclang="pt" src="https://raw.githubusercontent.com/BMSVieira/moovie.js/main/demo-template/subtitles/pt.vtt">
<track kind="captions" label="English" srclang="en" src="https://raw.githubusercontent.com/BMSVieira/moovie.js/main/demo-template/subtitles/en.vtt">
<track kind="captions" label="French" srclang="en" src="https://raw.githubusercontent.com/BMSVieira/moovie.js/main/demo-template/subtitles/french.srt">
Your browser does not support the video tag.
</video>
<a class="btn btn-dark" href="https://github.com/BMSVieira/moovie.js" target="_blank" style="margin-top:50px; margin-bottom: 130px;">Download on GitHub</a>
</div>
</div>
</div>
</div>
<!-- Moovie JS Core -->
<script src="js/moovie.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new Moovie({
selector: "#example",
dimensions: {
width: "100%"
},
config: {
storage: {
captionOffset: false,
playrateSpeed: false,
captionSize: false
}
}
});
});
</script>
</body>
</html>