整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件——MuiPlayer。
MuiPlayer 是一个开源的HTML5视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节等功能。支持 mp4、m3u8、flv 等多种媒体格式播放，解决大部分兼容问题，同时适应在PC、手机端播放。
使用 npm 安装：
npm i mui-player --save使用 yarn 安装：
yarn add mui-player1 使用 script 标签引入：
<!-- 引入基础样式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>
<!-- 引入基础脚本 mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>
<!-- 指定播放器容器 -->
<div id="mui-player"></div>或者使用模块管理器引入：
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'2 定义播放器容器
<div id="mui-player"></div>3 初始化构建播放器
// 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
var mp = new MuiPlayer({
container:'#mui-player',
title:'标题',
src:'./static/media/media.mp4',
})以上就能为初始化构建一个具有默认配置控件的视频播放器。
更多API基础配置： https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE
更多内容大家可自行前往阅读。
开源地址：https://gitee.com/muiplayer/hello-muiplayer
第一步， 先关注我】
大家好， 我是胡侃侃。
相信绝大部分人心中最好用的浏览器是谷歌Chrome浏览器，它简洁、快速、稳定、而且有着丰富的拓展插件。 然后我这里用了十几年的Chrome吐血推荐Microsoft Edge 浏览器。
而且Microsoft Edge 浏览器本身是基于基于谷歌 Chromium 内核的全新浏览器，具有像Chrome 浏览器一样的高效稳定的特点。 Microsoft Edge浏览器， 最大的优势在于和系统深度整合， 还实现了Chrome账号轻松同步。 Edge内置的网页休眠功能同样也是好用到起飞。 当然用Edge来替换掉手上的国产浏览器也是一个不错的决定。
传送门>>
本篇是基于Chrome和Edge浏览器的插件， 通过使用这些插件来提高浏览器的效率， 让本身已经非常方便的浏览器， 更加强大和增加效率。 本文浏览器插件下载是以Edge浏览器为准， 在Chrome下面有同名的插件， 需要大家自己去搜索一下。 但Chrome因为Google被关闭访问的问题， 所以有些插件获得并没有那么容易。
在Edge外接程序界面直接搜索和下载， 传送门>>
下面我们来点评一下有哪些神级插件， 可以让我们的工作效率得到翻倍提升吧。
一句话点评， ublock origin，比adblock功能更强，资源占用更低。
来自值友的@GN-001的点评，
ublock现在已经非吴下阿蒙了，adblock已经老已了，ublock的元素抓取比较麻烦，adblock方便点，但是adblock太臃肿了，大家打开第一个页面ublock而可以，但adblock无法拦截!而且占用很高！我用adblock很久了后来出现这个问题，我就在群里问了下他们，他们叫我试试ublock后面就再也没有换回去了！ublock的抓取元素是有问题的，多个元素在一起他不能一起抓只能一个一个，但他有个问题，他一次只能抓一个，你重新抓的时候他之前抓的就失效，不知道是我不会操作还是本来就有这个问题！adblock就完全没有这个问题，adblock交互好点！易用点！
传送门>>
传送门>>
老牌广告拦截器， 一款被称为最佳广告拦截的工具，在谷歌开发者商店有着破十亿的下载量，可想而知它是多受欢迎的呢！Adblock的强项就是拦截过滤网页广告，无论是视频广告、横幅广告，还是弹窗广告，它都能有效拦截。
AdBlock 是最好的广告拦截工具，拥有超过 6500 万用户，同时也是最受欢迎的扩展程序之一，下载量已突破 3.5 亿！
传送门>>
Infinity New Tab Pro 让你可以自定义你的新标签页. Infinity新标签页 (Pro) 将原生新标签页替换为您保存的书签，并提供了多种快捷实用的功能。 自定义标签页，可以将网页装扮成类似安卓的应用，支持多种搜索引擎切换，支持切换各种精美壁纸，具有 数据备份同步功能。
谷歌很多功能现在都已经无法使用了， 我过去很多信息都保留在Gmail里面， 这里使用这个可以访问google搜索，gmail，谷歌学术搜索等谷歌产品， 不包含Youtube 谷歌Drive。 传送门>>
有人说： 如果一个浏览器没有安装油猴，那可以说是没有灵魂的。油猴脚本与扩展的功能大致相同，都是赋予浏览器更多实用功能，但相比之下更加轻便。
在Microsoft Edge上面， 油猴叫做Tampermonkey。 最早是Mozilla Firefox的一个附加组件， 在FF上面叫Greasemonkey。它让用户安装一些脚本使大部分HTML为主的网页于用户端直接改变得更方便易用。Greasemonkey可替网页加入些新功能、修正网页错误、组合来自不同网页的数据、或者数繁不及备载的其他功能。写的好的Greasemonkey脚本甚至可让其输出与被修改的页面集成得天衣无缝，像是原本网页里的一部分。
现在油猴也是一个跨浏览器的用户脚本插件， 支持Edge，Chrome，FF等多种主流浏览器。
传送门>>
安装完成油猴以后， 可以看到浏览器右上角有一个油猴的图标， 点击图标， 点击获得新脚本， 即来到了油猴的安装脚本页面。
我这里举个例子， 我看微博， 只想看我关注过的人， 去除一些不需要的微博推荐， 这样的过滤脚本， 在油猴里面叫做， Yet Another Weibo Filter。
我们来到了油猴脚本安装页面Greasy Fork， 可以直接点击， 安装此脚本。 也可以查看这个脚本被下载过多少次。
如上图， 搜索， Yet Another Weibo Filter。
其实很多用户， 和我一样并不希望进入 GreasyFork，去手动查找用户脚本，或者我根本就不知道这个网站是不是有可以优化的脚本。 那么下载这个Userscript+, 这个脚本可以自动发现适合当前网站的脚本。
暴力猴是一个开源的脚本管理器， 暴力猴是一款非常强大浏览器脚本的管理工具。暴力猴的使用要更加方便，而且同样强大，通过安装相应站点的脚本信息，我们可以更加方便的进行各类操作。例如：电影站点的解析、网盘的高速下载、资源搜索与下载、广告屏蔽等等。 回头我会仔细说说暴力猴和油猴。
值友点评：violent monkey易用性比tamper高多了。
传送门>>
传送门>>
值友@娜娜奇推荐： 目前用的crxMouse,也不知道是不是最优解。这个还支持超级拖拽。目前发现这个插件，如果在新建空白tab中和加载失败的页面中会鼠标手势失效
也有值友推荐了smartUp手势， 这个我没有用过， 我也展现出来供大家参考。
传送门>>
值友点评： lastpass安全性不如keepassxc，多机同步可以用网盘中转，手机也一样用
传送门>>
传送门>>
这个扩展可以让你上网只记住一个密码，便可以登录所有需要密码的网站。在安装该扩展之后首次登录需要密码的网站时，扩展会自动记录下你的密码，下一次就不需要输入了。虽然会记录你的密码，但这个扩展一定是安全的，所以不必担心安全问题。
LastPass是免费的密码管理器，跨平台同步，自动登录， 只需要记住一个账户密码， 就可以管理所有账户密码。 解决了密码难记的问题。
风险提示： 银行密码重要信息密码不要交给他管理， 另外这个只有密码提示， 无法找回密码。
同样的一个密码管理器
传送门>>
工具很强大，支持的笔记很多，支持ervernote, onenote, 语雀，为知等所有主流笔记，支持markdown，支持图床，体验绝对比原版的好。传送门>>
传送门>>
印象笔记·剪藏(Evernote Web Clipper)， 使用印象笔记·剪藏扩展程序一键保存精彩网页内容到印象笔记帐户，不用复制粘贴编辑再整理，信息收集快人一步。看见什么，「剪」什么。 调研好帮手，剪藏任意文章或网页， 保存到指定笔记本，并添加网页， 用印象笔记同步到任意设备， 搭建个人知识库。
传送门>>
免费的笔记管理软件和印象笔记·剪藏一样的功能，可以保持网页内容至OneNote，OneNote为Win10系统自带office软件。
官方出品的浏览器主题皮肤， 使用全新浏览器主题个性化设置 Microsoft Edge，此主题的灵感源自 Master Chief 在神秘的外星人环形世界(称为 Halo)中的历险经历。此主题更改了浏览器和新标签页的外观，营造出灵感源自游戏的精美而又引入入胜的视觉体验。你还可以将不同主题应用至各个个人资料，以便轻松区分家庭、学校或工作。传送门>>
传送门>>
该插件可以帮助用户在打印网页或者PDF文件之前对打印的内容进行调整，比如调节打印的字体大小、去除打印页面中的所有图片、删除网页中的广告、删除多余的文字等方便的自定义打印的功能。
传送门>>
优秀的截图插件, 可以捕获任何网页的全部或部分。添加注释，评论，模糊敏感信息，以及一键上传。
传送门>>
图片助手(ImageAssistant)是一款运行于chromium(chrome环境下开发)及其衍生浏览器(如：360安全浏览器、360极速浏览器、猎豹浏览器、百度浏览器、UC浏览器等)提供分析、提取网页中的图片并以多种筛选方式辅助用户选取下载等功能的浏览器扩展软件。
传送门>>
是否看到网页、微博上的视频很想保存留念或使用， 这个插件一键下载网页中的视频
传送门>>
使用更纯净的百度 1.屏蔽百度广告推广 2.阻止百度追踪 3.去除百度资讯与热榜。
这篇文章总结了前面几篇关于Edge浏览器经验的合集， 每一个都是本人自己尝试过无数次以后的经验总结，分享给大家，
收藏不等于会了。
收藏不等于会了。
收藏不等于会了。
收藏是点赞的十倍， 为什么， 同学们！
这么养眼的文章难道不点赞吗？ 点赞美三代， 关注富一生！
更多的内容欢迎关注我的个人号来查找，这样也方便交流。
全文完~~
里云播放器SDK（ApsaraVideo for Player SDK）是阿里视频云端到云到端服务的重要一环，除了支持点播和直播的基础播放功能外，还深度融合视频云业务，支持视频的加密播放、安全下载、首屏秒开、低延时等业务场景，为用户提供简单、快速、安全、稳定的视频播放服务。本文衔接上文，详细介绍web播放器的功能及实现。
播放器架构
Aliplayer Web播放器分为H5和Flash两个，Flash播放器随着技术的发展会逐渐被边缘化，所以我们以后只做维护，不会更新功能了，重点会放在H5播放器上。H5播放器架构主要分四层，底层H5 Video，播放能力和H5原生Video紧密相关。第二层是基础播放器，它不依赖于具体业务，通过URL的方式来播放。第三层是为各种业务场景准备的不同的播放器，可以很容易的扩展，相互隔离不依赖。最上面一层是适配的播放器，会根据终端类型、浏览器类型、播放格式和用户指定来进行智能适配。
播放器功能
最近，我们在播放器端上也实现了截图、国际化、变速、UI自定义、微信同层播放、自适应播放、加密播放、H5播放flv、自定义插件等功能。后续，我们还会通过插件的形式实现弹幕、广告等功能，并会开源到github上，也会支持用户根据自己业务需求来自定义SDK包。
播放器支持视频格式
适配播放
我们整个视频播放的基本原则是H5优先，能用H5播放的肯定不用Flash去播放。所以在移动端，我们肯定是用H5来播放的，PC端也依照这个原则尽量使用H5。同时，我们会判断浏览器类型支持哪种播放格式，比如m3u8在PC端IE11以上的浏览器才能播放，如果遇到IE11以下的浏览器，我们自动会选择Flash播放。在视频格式方面，假设视频是rtmp和flv，我们会自动选择Flash播放。另外，如果用户自主设置useH5Prism和useFlashPrism属性，那我们也会依照用户的选择。
浏览器支持情况
FLASH支持IE8以上，在浏览器上启动允许FLASH运行即可；H5支持IE9以上，m3u8需要在IE11以上才可以运行；其他浏览器都也都是可以支持的。
两种播放方式
source，通过url 去播放
通过点播vid+playauth去播放，第二种方式和视频云结合比较紧密
点播播放格式的选择
点播服务中转码生成的视频格式有很多，包括m3u8、flv、mp4等。播放器有自己的一套逻辑去选择播放格式。对于H5来说，默认播放低清版本来节省流量，如果用户使用了切换清晰度的功能，那我们会默认打开他选择的版本。格式方面，则默认播放mp4，用户也可以设置qualitySort来优先播放高清的的版本。对于Flash来说，默认格式顺序是m3u8、flv、mp4。
创建播放器
引用正确的JS和CSS文件
添加播放器容器 需要设置容器的id属性，另外2.0.1之前的版本要添加prism-player类型。
New Aliplayer创建播放
在线配置，用户可以预先体验下播放器的情况
Aliplayer-Cli创建演示例子
用户需要演示例子的时候，不需要写很多代码，通过这个命令，就可以创建例子，直接体验AliPlayer。
PC端支持m3u8
播放域名启用允许跨域访问
订阅和取消事件
清晰度切换
H5 1.9.9以后的版本和id+playauth播放方式才支持清晰度切换；支持记忆选择的清晰度，当选择的清晰度不能播放时，自动选择下一个清晰度播放。
手动切换视频-H5
这个功能播放器内比较常见。我们把它分成两种情况去处理，如果是地址播放，我们通过loadByUrl来播放；如果是vid+playauth播放，我们通过replayByVidAndPlayAuth的方法来播放。
手动切换视频-flash
地址播放方法与H5的方法一样，vid+playauth播放则需要先销毁播放器，再重新创建播放。
不同地址格式的切换
只能先销毁播放器，再重新选择正确的播放器播放。Github地址看simple demo：https://github.com/alilmq/aliplayer-simple-demo
![b_3_7]
UI自定义
很多用户有这个需求，所以我们的UI是可以隐藏掉的。提供了一个skinLayout的属性，当这个属性没有指定值的时候，UI组件是全部显示。如果是空数组的时候，UI组件全部不显示。并且可以自定义组件的显示和位置，在默认UI基础上去裁剪，2.3.0版本以后，用户也可以通过自定义插件的方式自定义自己的UI。
截屏
H5启用:
FLASH启用：snapshot:true
H5播放器，播放域名需添加允许跨域访问的header
支持订阅snapshoted事件，获取截屏的时间点和数据：
支持设置截图的大小和质量：
支持添加文字水印：
边转变播功能
边转边播是MTS的功能，播放器可以支持这种场景的播放。第一次观看的时候调用MTS API启动转码，边转码边播放，而且可以设置延迟播放。转码中使用直播播放器，转码完成后使用点播方式播放。
H5 android微信同层播放
因为H5在android端微信打开时，会自动全屏播放，覆盖Dom元素。
同层播放一般有两种业务场景，一种是点播的，视频在某个地方播放，下面的评论、播放列表等,demo地址：https://github.com/alilmq/h5demo
还要一种场景是直播场景，视频需要全屏。可以通过设置x5_type:h5启用同层播放。Demo 地址：https://github.com/alilmq/h5livedemo
另外H5微信同层播放，有两篇文章可以参考:
http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html
http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html
国际化
提供language属性，用于启用各种语言，默认为zh-cn，可选值为zh-cn or en-us。
倍速播放
提供UI的版本，只提供了0.5、1、1.5、2四种倍速播放；而setspeed方法，可以随意设置倍速播放。这个可能会有一些限制，移动端有的浏览器会不支持，比如android微信。
对于直播播放失败的处理
在播放失败时候，会尝试重新播放，触发onM3u8Retry事件，事件里可以做一些提示，比如主播离开请稍等；如果几次尝试后还是失败，会出发livestreamstop事件，事件里做一些直播失败或结束的提示。
我们也做了一些辅助工具，方便用户去接入和排查问题。
诊断工具
通过错误码描述的映射关系，大概能知道用户的错误所在；
通过vid知道用户播放的是哪个视频；
通过uuid这个唯一标识，可以在日志系统中查到用户的播放状态；
通过requestid和播放时间，可以定位到用户的错误是哪次播放的错误和具体的播放时间。
这里还有一个诊断的功能，可以知道用户环境的具体信息，省去手工获取视频的繁琐，可以快速诊断问题。
地址：http://player.alicdn.com/detection.html
检测工具
关于视频播放失败，我们提供了三种方式，原生H5、阿里云H5、阿里云Flash。我们把播放的日志调出来，通过日志来情况来判断播放失败的原因。举个例子，如果用户刚开始请求数据时就失败的话，那我们会猜测存在鉴权失败的情况；如果加载数据出错，那可能是用户的网络的原因；如果是开始播放后出错，可能就问题就出在解析或播放器不支持等方面。
ffmpeg查看视频信息
有的用户只有画面，没有声音。我们可以通过ffmpeg可以看下视频的格式、流的情况、码率、帧率等。
最后，阿里云播放器的所有情况都聚合在以下的网站上：
http://player.alicdn.com/detection.html，其中包括帮助文档、在线配置、诊断工具、产品demo等，大家可以登录了解详情。
*请认真填写需求信息，我们会在24小时内与您取得联系。
