华播放器（SmartPlayer）是一款非常优秀的安防领域播放软件，用户可以在该软件中逐帧的查看视频，支持Smart265/H265编码方式.avi/.asf格式录像播放，同时用户还可以在软件中选择中英文切换，非常便捷。该软件支持同时播放多个视频，支持同步异步播放，自定义分割画面。

来源：http://www.3h3.com/soft/270795.html#jptj

软件特色

支持逐帧倒放功能，不仅支持单帧倒放，还支持多倍数倒放。

支持多路同步播放功能。

支持鼠标操作局部放大和拖动功能，即电子云台功能。

支持分段预览功能，快速找到所需场景，并能对各段进行同步播放。

支持播放智能设备码流，在画面上展示智能事件信息。

支持码流篡改检测功能，支持码流格式转换功能。

支持视频属性查看。

支持 H265、svac 码流。

支持 avi、mp4、flv、asf、mov、dav、dav_文件播放。

支持亮度、对比度、饱和度、色度显示调节功能。

支持快捷键设置功能。

优化音视频同步策略。

优化快放策略，支持更改倍数快放。

优化时间轴，增强其呈现视频的方式。

优化文件列表管理。

播放普通视频时支持播放录像内分屏功能。

播放鱼眼视频时支持鱼眼功能

更新内容

1、修复180;鱼眼录像矫正错误问题；

2、修复鱼眼录像OSD信息被截取问题；

3、修复智能规则线不准确问题；

4、修复英文环境下录像文件类型显示乱码问题。

<link href="./video-js.min.css" rel="stylesheet">
<script src="./video.min.js"></script>

npm install video.js

 <video id="my-player" class="video-js" controls preload="auto" poster="封面url，设置就可以显示封面" data-setup='{}'>
 <source src="视频URL" type="video/mp4">
 </source>
 </video>

var player = videojs('my-player');

var options = {};
var player = videojs('my-player', options, function onPlayerReady() {
 videojs.log('Your player is ready!');
 this.play();
 this.on('ended', function() {
 videojs.log('Awww...over so soon?!');
 });
});

天给大家介绍一款非常好用的开源视频播放器插件——plyr。它因为简单、轻量级、可访问和可定制化，受到了广大开发者的喜爱，已经在GitHub上标星25.6k。

特征

• 无障碍- 全面支持 VTT 字幕和屏幕阅读器
• 可定制- 使用您想要的标记使播放器看起来如您所愿
• 干净的 HTML - 使用正确的元素。
• 响应式- 适用于任何屏幕尺寸
• 流媒体- 支持 hls.js、Shaka 和 dash.js 流媒体播放
• API - 通过标准化 API 切换播放、音量、搜索等
• 全屏- 支持原生全屏，并可恢复至“全窗口”模式
• 快捷方式- 支持键盘快捷键
• 画中画- 支持画中画模式
• Playsinline-支持playsinline属性
• 速度控制——随时调整速度
• 多字幕- 支持多字幕轨道
• i18n 支持- 支持控件的国际化
• 预览缩略图- 支持显示预览缩略图
• 无需框架- 使用“原始”ES6 JavaScript 编写，无需 jQuery

使用

先需要引入plyr的CDN文件：

<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />

然后，在HTML页面中添加如下的视频标签，即可使用plyr进行视频播放：

<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />

  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>

除此之外，还可以根据自己的需求进行额外的配置。下面是一些常用的配置项：

settings: ['captions', 'quality', 'speed', 'loop'], // 配置显示的设置项
i18n: {...}, // 用于UI的国际化
volume: 1, // 播放器初始音量，范围是0-1
speed: {
  selected: 1,
  options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
}, // 播放速度的配置
quality: {
  default: 576,
  options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
}, // 分辨率的配置

更多的配置项和使用方法可以参考plyr的官方文档。

界面截图

预进度

画中画

开源地址

https://github.com/sampotts/plyr