基于ArtPlayer开发的HTML5全格式视频播放器

前言说明

ArtPlayer是一款现代化的 HTML5 视频播放器，具有丰富的功能和易用性。它支持多种视频格式（如 MP4、m3u8、flv、mpd等），支持多种字幕格式（如.vtt、.ass、.srt等），并且可以自定义大部分功能控件，让用户轻松与业务逻辑对接。ArtPlayer 还支持多种插件（如弹幕、广告、iframe、画质切换等），满足不同场景下的需求。同时，ArtPlayer 可以与其他依赖项（例如 flv.js、hls.js、dash.js 等）集成使用，提供更为灵活的选择。

开发说明

在默认情况下载，播放器仅支持MP4格式的播放，或者单独支持下面的格式，我们修改后，会自动判断视频格式，并采用相应的规则来播放，也就是支持全格式，当然这里的全格式指的是MP4、m3u8、flv、mpd，具体的代码见源码分享！

体验地址

前提插件

    <script src="https://cdn.staticfile.org/artplayer/5.0.4/artplayer.min.js"></script>
    <script src="https://cdn.staticfile.org/hls.js/1.4.0/hls.js"></script>
    <script src="https://cdn.staticfile.org/flv.js/1.6.2/flv.min.js"></script>
    <script src="https://cdn.staticfile.org/dashjs/4.6.0/dash.all.min.js"></script>

默认模式

var art = new Artplayer({
    container: '.artplayer-app', 
    // container: document.querySelector('.artplayer-app'),
    url: '/assets/sample/video.mp4',
});

hls模式

function playM3u8(video, url, art) {
    if (Hls.isSupported()) {
        if (art.hls) art.hls.destroy();
        const hls = new Hls();
        hls.loadSource(url);
        hls.attachMedia(video);
        art.hls = hls;
        art.on('destroy', () => hls.destroy());
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = url;
    } else {
        art.notice.show = 'Unsupported playback format: m3u8';
    }
}

var art = new Artplayer({
    container: '.artplayer-app',
    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
    type: 'm3u8',
    customType: {
        m3u8: playM3u8,
    },
});

art.on('ready', () => {
    console.info(art.hls);
});

flv模式

function playFlv(video, url, art) {
    if (flvjs.isSupported()) {
        if (art.flv) art.flv.destroy();
        const flv = flvjs.createPlayer({ type: 'flv', url });
        flv.attachMediaElement(video);
        flv.load();
        art.flv = flv; 
        art.on('destroy', () => flv.destroy());
    } else {
        art.notice.show = 'Unsupported playback format: flv';
    }
}

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.flv',
    type: 'flv',
    customType: {
        flv: playFlv,
    },
});

art.on('ready', () => {
    console.info(art.flv);
});

dash模式

function playMpd(video, url, art) {
    if (dashjs.supportsMediaSource()) {
        if (art.dash) art.dash.destroy();
        const dash = dashjs.MediaPlayer().create();
        dash.initialize(video, url, art.option.autoplay);
        art.dash = dash; 
        art.on('destroy', () => dash.destroy());
    } else {
        art.notice.show = 'Unsupported playback format: mpd';
    }
}

var art = new Artplayer({
    container: '.artplayer-app',
    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
    type: 'mpd',
    customType: {
        mpd: playMpd
    },
});

art.on('ready', () => {
    console.info(art.dash);
});

二开修改

代码分享

我们修改后的代码如下，播放器会自动判断视频格式，同时支持MP4、m3u8、flv、mpd格式的播放！

使用方法

1、将上面的代码保存为PHP文件，如“Player.php”，上传PHP服务器环境

2、访问“Player.php?url=”即可播放视频（也可以作为视频解析播放器来使用），如

https://www.baidu.com/Player.php?url=https://ckplayer-video.oss-cn-shanghai.aliyuncs.com/mp4/1_1920x1080.mp4

3、如果只是单页播放，只需要把代码中的“<?php echo $_GET['url']?>”改为自己的视频地址即可，当然这样的话，php格式和html格式都是可以的

管理员会员

收藏 海报 链接