華播放器（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