如何优雅的在HTML页面上展示视频播放器？

Question

是这样的，我之前很少在页面上放视频，最近想放点视频，我用了video标签大概张这个这样子

代码大概就简单的长这样

<video src="./xxx.mp4" />

咋一看 好像实现了最基本的播放功能
但到人家正规平台上一看，其友好度和美观度完全不能比啊
比如 知乎上的视频大概长这样：

中间有一个大播放按钮 还有一个背景图 点播放后还有自定义的操作bar
我看了看html代码，大概是这个样子的

这个好像没有看到用类似video一样的标签，有一个背景图链接，但点播放又能播放视频。

问题

我想做一个类似的视频播放展示，请问，这种效果如何实现的呢？是否有现成的开源项目可以使用呢

Answer 1

https://videojs.com/

Answer 2

感谢 @陈大大的回答
看了下 videojs 感觉相对自己的项目不能开箱即用，
有些css不符合，定位有点问题，也没有时间去细看文档配置

于是自己实现了类似知乎上的功能，如下，这就是我想要的视频大概效果

另外，自己在github上找到了一个vue的video demo项目 vue-videojs-demo 和其 demo展示
看起来还不错，但是我还没有试，不知道好不好用，
在此记录，希望可能帮到路过有相同需求的人。