前端

分享一个专注于电影的HTML5播放器

CV工程师
4分钟读完

说到电影播放器（这里只说网页版），我能想到的有CMP4播放器，这是一个基于flash的播放器，想当年也是火的一塌糊涂，懂得都懂。还有ckplayer，这个播放器的功能很强大，如果是深度定制一下的话还是非常不错的，除此以外还有dplayer播放器，这个播放器我个人感觉是目前用的最多的，很苹果cms的站长都在用dplayer播放器，加上记忆播放、哔哩哔哩弹幕、P2P加速以及自动下一集（虽然记忆播放和自动下一集）基本上所有播放器都可以加，但是现在人家就是都在用dplayer，这个作者的博客我之前有看过，一个二次元大佬。不过今天并不是说以上这些播放器的，而是说GitHub的另一款开源HTML5播放器：Moovie.js


◼️ 它具有以下特征:

  • 🔧 完全可定制且易于使用
  • 💎 内置 字幕偏移量动态调整 功能
  • 🎬 内置支持 .vtt 和 .srt 字幕文件
  • 🕹 内置 Plugins, 使用你真正需要的代码
  • 🎯 内置 CustomEvents, 可以添加多个当前时间事件
  • 🖊 使用我们的 API dynamically 添加曲目/字幕
  • 🗃 即时添加曲目 / 字幕（无需服务器或上传）locally
  • 🌠 动态调整速度
  • 🛠 标准化事件 / 快捷方式 / API
  • 🖌 自定义标题
  • 💪 无依赖，使用 VanillaJS 构建
  • 🌎 在所有现代浏览器中测试
  • 💻 响应式
  • 🗃 集成 webtorrent.js, dash.js, Shaka Player and hls.js
  • 🌎 控件的国际化 (i18n)

◼️ 演示地址:

https://mooviejs.com/

◼️ 引入式使用:

这种方法很适合想看看效果的朋友。
1 - 引入 JavaScript 文件.

<script src="path/to/moovie.js"></script>

2 - 引入样式.

<link rel="stylesheet" href="path/to/moovie.css">

3 - 设置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>>">
  您的浏览器不支持video标签。
</video>

4 - 初始化.

document.addEventListener("DOMContentLoaded", function() {
   var demo = new Moovie({
     selector: "#example",
     dimensions: {
          width: "100%"
     }
   });
});
注意: 不要忘记引入 "icons" 文件夹.

◼️ 使用NPM安装:

如果有定制的需求，推荐使用这种方法。
1 - 安装npm包

npm i mooviejs

2 - 引用样式.

<link rel="stylesheet" href="path/to/moovie.css">

3 - 设置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>>">
  您的浏览器不支持video标签。
</video>

4 - 初始化.

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

◼️ 使用CDN:

推荐使用
您可以使用我们的 CDN（由 JSDelivr 提供）用于 JavaScript 和 CSS 文件。

// Javascript
<script src="https://cdn.jsdelivr.net/gh/BMSVieira/moovie.js@latest/js/moovie.min.js"></script>

// CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BMSVieira/moovie.js@latest/css/moovie.min.css">

更多的API使用方法还是看官方文档吧。

◼️ 地址:

Github地址：https://github.com/BMSVieira/moovie.js/

您可能感兴趣的：