常见的web音视频播放器

1.video-js

是否开源：是

是否免费：是

官网地址：https://videojs.com/

特点：支持hls、dash、.mp4、webm 等多种视频类型，

2.西瓜播放器

是否开源：是

是否免费：是

官网地址：https://v2.h5player.bytedance.com/

特点：一款带解析器、能节省流量的HTML5视频播放器。支持播放hls、.m3u8、.flv、dash、.mp4等多种视频类型，支持弹幕、还支持音频播放。支持记忆播放·、视频旋转等。可以在线生成代码并预览。

兼容性：

3.DPlayer

是否开源：是

是否免费：是

官网地址：https://dplayer.diygod.dev/zh/

特点：支持播放hls、.m3u8、.flv、dash、.mp4等多种视频类型。支持弹幕、支持视频截图、支持切换字幕等。

const dp =  new DPlayer({
            element: document.getElementById("dplayer"),
            video: {
                url: livePlayerStore.url,
                type: "customHls",
                customType: {
                    customHls: function (video, player) {
                        hls.value = new Hls();
                        hls.value.loadSource(video.src);
                        hls.value.attachMedia(video);
                    },
                },
            },
            autoplay: false,
        });
// 用完需要 dp.destroy();

4.mediaElement.js

是否开源：是

是否免费：是

官网地址：http://www.mediaelementjs.com/

特点：MediaElement是一款HTML5播放器，使用<video><audio>标签，使用简单，一个js文件，一种UI支持多个浏览器。

var videoPlayer = new MediaElementPlayer('moviePlayer');
videoPlayer.setSrc('sample.mp4');
videoPlayer.play();

5.nPlayer-移动端播放器

是否开源：是

是否免费：是

官网地址：https://nplayer.com/

特点：NPlayer是一个强大的Web视频播放器，基于JavaScript、TypeScript、Vue.js和CSS3。它支持多格式、全功能控制和自定义选项，适用于在线教育、媒体网站等场景。支持MP4、WebM等多种视频格式。