一款专为HTML5打造的简易播放器MoovieJS

没有花哨的界面,简洁扁平的布局,自由调整、可自定义外挂字幕,这就是专为电影打造的HTML5专用播放器MoovieJS!

uTools 1624846574580 - 一款专为HTML5打造的简易播放器MoovieJS

此播放器是国外大神布鲁诺·维埃拉打造,简洁好用,站长一看到就喜欢上此界面,大家可以去Demo站体验一下!

Demo:https://demo.buyao.vip/moovie/

使用:

1.1、直接引用CDN:

<!--Javascript-->
<script src="https:[email protected]/js/moovie.min.js"></script> 
<!--CSS-->
<link rel="stylesheet" href="https:[email protected]/css/moovie.min.css">

直接引用显示的是英文界面,切也许要上传icons文件夹,否则无UI显示,因此还是需要下载源码。(不推荐)

1.2、下载JS/CSS

源码下载:点击下载

然后引入JS、CSS

2、HTML

<video id="example" poster="<<path-to-poster>>">
<source src="<<path-to-file.mp4>>" type="video/mp4">
<!--如果没有外挂字幕,可以不要下面两行,如果有多个字幕可以增加下面行数-->
<track kind="captions" label="Portuguese" srclang="pt" src="<<path-to-caption.vtt>>">
<track kind="captions" label="English" srclang="en" src="<<path-to-caption.vtt>>">
你的浏览器不支持HTML5播放 </video>

3、初始化播放器

const Moovie = require('mooviejs');
 var demo = new Moovie({
      selector: "#example",
      dimensions: {
           width: "100%"
      },
      icons: {
         path: "<path/to/icons/folder>"
      }
 });

更多其他设置,请参照https://github.com/BMSVieira/moovie.js