西瓜播放器
https://h5player.bytedance.com/guide/
西瓜视频播放器是一款由字节跳动开源的 Web 视频播放器。它基于组件化的原则设计了独立的、可拆分的 UI 组件。更重要的是,它不仅在 UI 层面上灵活,还在功能上进行了大胆的改进:它摆脱了对视频加载、缓冲和格式支持的依赖。尤其在处理 mp4 格式时,它可以进行分段加载,即使不支持流式传输的 mp4 格式也能实现无缝切换、加载控制和节省流量。它还集成了对 FLV、HLS 和 dash 格式的点播和直播支持。
安装
NPM方式
1 | npm i -S xgplayer |
使用
1 | import Player from 'xgplayer' |
CDN 方式
在 HTML 文件中加入如下代码。
1 | <script src="//unpkg.com/xgplayer@latest/dist/index.min.js"></script> |
然后就可以直接在 window 上访问了。
1 | <script> |
示例
1 |
|
注意
自动播放只设置
autoplay: true
,现在的浏览器都会阻止自动播放,所以要添加上autoplayMuted: true
。
DPlayer
https://dplayer.diygod.dev/zh/
这个播放器的优势是支持弹幕。
以 npm
为例,以及在 Vue.js 项目中使用:
1 | npm install dplayer --save |
Vue 页面中引入:
1 | <template> |