一般我们播放本地视频都是使用 video标签，但是<video> 元素只支持三种视频格式：MP4、WebM、Ogg，对于在线视频直接使用video是没法播放的，这里介绍几款这两天我在做播放在线监控视频功能时使用过的几款播放器，初次接触流媒体踩了一堆坑，到目前为止对这部分内容都还了解的很浅显，若有问题请在评论区指出，欢迎交流。
该文章旨在为小白推荐播放方案，谁还不是从小白过来的呢？
流协议:流协议就是在两个通信系统之间传输多媒体文件的一套规则，它定义了视频文件将如何分解为小数据包以及它们在互联网上传输的顺序，RTMP与 RTSP 是比较常见的流媒体协议。
HLS：HLS (HTTP Live Streaming)是Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件，TS媒体分片文件和key加密串文件。参考:HLS。简单来说，HLS是一种协议，如果你的视频源是http://xxxx.m3u8这种，就选择这种协议，.m3u8是个文本文件，直播时，他的内容实时变更，内部指向一个或多个.ts文件。
HTTP-FLV: HTTP-FLV 是将音视频数据以 FLV 文件格式进行封装，再将 FLV 格式数据封装在 HTTP 协议中进行传输的一种流媒体传输方式。HTTP-FLV 的实现原理： HTTP-FLV 利用 HTTP/1.1 分块传输机制发送 FLV 数据。虽然直播服务器无法知道直播流的长度，但是 HTTP/1.1 分块传输机制可以不填写 conten-length 字段而是携带 Transfer-Encoding: chunked 字段，这样客户端就会一直接受数据。参考：FLV 和 HTTP-FLV。
简单来说就是你的视频源是直播且是http://xxxx.flv，就选择这种协议播放。还有个websocket-flv，是基于websocket的。
RTMP与RTSP： 什么是RTMP 和 RTSP？它们之间有什么区别？
H264(AVC)与H265(HEVC)：都是视频编码，是视频压缩格式，由于视频本身的码流太大，所以需要经过压缩然后再通过网络进行传输，其中H265是H264的升级版，很多播放器无法播放H265视频。
下列播放器排名不分先后，自己评判。
我使用的版本：
优点：
1.官网教程非常简单清晰，上手快。这点个人认为尤其重要，小白哪懂那么多，就冲这个点个大大的赞！
2.使用起来体验感很好
3.支持直播点播，支持hls，http+flv，dash，WebRTC直播，还有音乐播放器
4.提供在线可调试demo
缺点：
1.xgplayer-hls.js不能播放hls H.265视频，因为是基于hls.js封装的，hls.js支持H264，不支持H265。
2.xgplayer-hls测试后发现同样不能播放hls H.265视频。
3.播放不同的视频需要自己切换对应的包，如xgplayer-flv.js，xgplayer-hls.js（也可以算是优点，包体积更小，更灵活，看你怎么评判了）
我一开始选取的这款播放器，但很遗憾，我的监控视频是hls协议的H.265视频，没法播放。。。但总的来说如果不播放H.265视频，个人非常推荐！
播放效果：
首先有的博客用的这个@easydarwin/easywasmplayer，但在npm上看到这个包不再支持了，我没用过这个包，感兴趣的自己尝试。
我用的是这个：EasyPlayer.js
版本如下：
优点：
1.内部自动识别视频格式，自动使用对应方法解码。
缺点：
1.文档错误，不友好，按照文档指示 npm install @easydarwin/easyplayer --save 后没有找到官方说的EasyPlayer.swf文件
我在4.0.7版本中才找到这个文件。
但是直接下载官方demo后跑起来发现，不需要这个文件也行，因此应该是官方文档没有更新。（若遇到vue demo运行报错，可能是nodejs 版本问题）
2.右键播放器有弹窗，（解决办法：自己设置样式隐藏）
<style>
// 隐藏弹窗
.easy-player-right-menu{
display: none !important;
}
</style>
3.该播放器是支持播放h265视频的，但应该是指的flv格式的(我未测试过)， 实测时发现不支持播放hls 协议下的h265视频
播放效果：
优点：
1.详情见官方文档，篇幅有限不一一列举
但问题是很卡！卡爆了的卡!，但是好歹出现了画面，后改为辅码流视频源才播放流畅，视频信息如下：
缺点：
1.很占内存，引入项目后至少占1个g内存，而且对h265视频解析是使用canvas绘制的方式(目前好像只有这种方案才能播放)，对比使用video播放来说慢了些。但h265webj内部做了判断，当视频是h264格式的会改为video标签播放。
2.播放器底部的controll需要自己实现，官网提供的是各种api，提倡自己封装。可参考我这两篇文章自己实现，或自己查阅文档封装。
h265web.js 同时播放多个视频，修改官方example 中player.js并重新编译
前端使用hls方式播放h265(HEVC)格式的.ts在线文件，附vue2.x封装h265web.js代码
3.控制台作者给自己打广告，连播放器要传的参数token都是自己的广告。。。不过问题不大，开源的嘛，可以理解。
4.还有个问题，在tag v20211104和最新版本 tag v20220916播放上面那个主码流 hls协议的H.265视频时发现，低版本tag v20211104反而更流畅？猜测是后续版本迭代升级后体积变大，占用更多内存，导致后面的版本播放更卡顿。
扩展：
若因为卡顿导致播放延迟，可进行追帧设置，动态更改播放倍数优化。我并未实现相关代码，因为调试起来太麻烦了，监控是内网视频，没法在线调试。。。目前来说播放效果都比较好，延迟也不高，几秒左右。
播放效果：
一个比较成熟的方案，用的人比较多，但我没怎么用过，我大概测试了下，可播放hls协议下h.264视频，但不支持播放hls 协议下的h.265视频，然后我就pass 掉了。
测试播放.m3u8后缀视频源html代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>videoJs</title>
<link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<section id="videoPlayer">
<video id="example-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
<source src="http://rm03.wscdn.hls.xiaoka.tv/live/fczjp0Dc_J60VGMN/playlist.m3u8" type="application/x-mpegURL" id="target">
</video>
</section>
<script type="text/javascript">
var player = videojs('example-video', { "poster": "", "controls": "true" }, function() {
this.on('play', function() {
console.log('正在播放');
});
//暂停--播放完毕后也会暂停
this.on('pause', function() {
console.log("暂停中")
});
// 结束
this.on('ended', function() {
console.log('结束');
})
});
</script>
</body>
</html>
这种方案延迟较低，纯前端实现rtsp+websocket-flv播放。
前端播放器只要支持websocket-flv就行，不一定非要是flv.js，还需要启动nodejs后台服务，要注意的是这台运行node服务的服务器上必须要安装ffmpeg，最好是设置环境变量，若未设置则nodejs 代码里也要改下路径。该方案大概原理是nodejs内部通过执行ffmpeg命令实现对rtsp流转flv，然后通过websocket将flv流发送到前端，前端使用flv.js 播放,注意，这个播放是基于websocket协议的。
这里我用vlc模拟rtsp流，然后启动node服务
前端使用flv.js将rtsp视频源传给node服务转码，成功播放视频！
参考教程：里面基本都有源码，思路都是一样的，但异常情况需要自己处理，比如断流，延迟等。
html5中播放rtsp流实现监控、直播等方案
RTSP流媒体播放器
如何实现 RTSP 视频播放？HTML5 播放 RTSP 视频案例分享！
【前端】rtsp 与 rtmp 视频流的播放方法
测试流搭建：
VLC搭建简单的RTSP流媒体服务器
vlc搭建rtsp服务器作为测试流
感谢有这么多优秀的库供我们选择，大家努力吧，争取以后写个自己的库让别人使用！
以上就是本篇文章全部内容了，写了这么多，若对你有帮助，请点个赞吧，谢谢支持！
本文地址：https://www.jianshu.com/p/95869f3519b1，转载请注明出处，谢谢。
参考：
见正文，引用较多，不一一列举了。
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/
我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require，它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中，因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗？ 最佳答案 我不在Bundler上工作，所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件，通常按照当前的惯例，只
我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121
这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书，我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)？
最近在学习CAN，记录一下，也供大家参考交流。推荐几个我觉得很好的CAN学习，本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门，真的通透；秀！靠这篇我竟然2天理解了CAN协议！实战STM32F4CAN！原文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解（小白教程）原文链接：https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总
动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、
2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p