
分享一个专注于电影的HTML5播放器
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
andhls.js
- 🌎 控件的国际化 (i18n)
◼️ 演示地址:
◼️ 引入式使用:
这种方法很适合想看看效果的朋友。
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使用方法还是看官方文档吧。
◼️ 地址:
您可能感兴趣的:
前言 使用nodejs的人越来越多了,相应的基于nodejs的框架也就越来越多,就像php很火,然后就出来了 Laravel 、ThinkPHP,java很火,出来了 spring 框架,由此可见,nodejs的框架在未来只会越来越多,而Eggjs就是阿里开发的一个基于nodejs的企业级框架,有兴趣的朋友可以去看一下。当然一个框架的好坏不仅取决于框架自身的设计,更多的则是对其它服务的兼容性,就像如果一个新出的框架不兼容mysql,那么这个框架即便再好又有什么用呢?提到了MySQL,就得进入我们的正题: redis 了,redis实在是太火了,各种微信公众号发布的教程类视频广告几乎有一半都是关于redis的,什么分布式啊、高并发的、12306啊等等,导致我现在看到redis就烦,不过玩归玩闹归闹,redis该用还是要用。so,egg怎么使用redis呢? egg-redis egg-redis是Egg框架下基于 ioredis 的Redis客户端(支持Redis Portocal)。 GitHub地址:https://github.com/eggjs/egg-redis 食用方法 安装egg-redis 安装egg-redis非常的简单,一句话: npm
2
min read
前言之前有了解到tailwindcss,发现还是很好用的,虽说网上最这种css方式异议颇多,但并不妨碍我对它的喜爱。然而在使用过程中还是产生了一些问题。最主要的就是tailwindcss样式太大了,如何压缩?如何去除多余的样式?生产环境中如何使用? 开发环境首次接触这个tailwind时当然是打开官方文档,查看安装使用教程,发现安装方式分为nodejs和cdn,为了测试效果,我就选择了cdn的方式,直接引用css文件,然后测试了一下像container、p-2这些,发现还是蛮好用的,但是这个cdn文件有将近4兆的大小,于是下载到本地,本地开发时引用本地的css文件,虽然依然很大,但是没有了网络的限制,所以直接开始了页面的制作。 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> 使用方法很简单,就是html页面应用这个css文件即可。 生产环境随着页面逐渐制作完毕,我也到了把本地网页部署到服务器的时刻,所以开始考虑优化了,首先使用这种cdn的方式肯定是不可取了,即便带宽允许,但是加载很多无效的样式,实在是有点浪费,于是看文档如何优化,这也就到了使用node的时候。
6
min read
起因 最近有做跨境电商的朋友想要一个一键大小写转换的工具,具体来说就是把一句英语的所有单词首字母大写,这还不是有手就行?于是我分分钟就写了一个一键把所有单词的所有字母转换成大写和一个一键把所有单词的字母转换成小写的工具,简简单单!然而,我卡在了所有单词的首字母转大写这里。好吧,我收回我之前说的话。这个工具需要算法了。 核心 先说说怎么实现全部字母转大写和小写吧,基本上所有的语言都支持一键转大写和小写,在JavaScript中,方法为:String.toUpperCase() 和 String.toLowerCase(),也就是说放一个文本域,获取到文本域的值,然后使用上面两个方法来赋值就可以了。首字母转大写的话就在于如何让程序识别出来第一个字母,然后转大写。 分析 首先来看这个句子: this is my computer 需要转换的字母分别为:t、i、m和c,t我们可以直接转换第一个字母,那么我们就需要分析如何获取到i、m和c,他们都有一个共同的特点,就是前面有个空格,所以我们就可以从这一点下手,找空格。只要找到空格,就可以设置空格的后面一个字母为大小。好了,分析完成,开始写算法。 算法 根据空格,
5
min read
为什么要不用密码登陆服务器 对于自己常用的服务器来说,每次登陆服务器都需要输入密码确实很费劲,所以如何可以不使用密码登陆Linux服务器呢?不使用密码当然会使用其他东西了,例如:公钥私钥,所以问题就变成了如何使用公钥登陆Linux服务器,根据原理我们可以知道,首先我们需要生成一对公钥和私钥,之后将公钥写入服务器,登陆时携带私钥即可登陆。 生成密钥对 mac下生成密钥对 如果是在mac下,可以直接在终端输入: ssh-keygen -t rsa 然后直接回车就可以了。 windows下生成密钥对 如果是windows,那么如果说有安装vs code的话,可以在vs code中打开终端,然后输入: ssh-keygen -t rsa 之后回车即可,如果没有安装vs code的话,需要看下有没有安装git,如果安装了,可以在桌面右键打开git bash,然后输入以上命令。 生成的密钥对在当前用户的.ssh文件夹下,mac用户下在终端输入: cd cd .ssh ls 即可看到,我在终端输入这三条命令后,显示: config id_
2
min read