前言说明

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

开发说明

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

体验地址

在线视频播放器

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

前提插件

    <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格式的播放!

隐藏内容
本内容需权限查看
  • 注册用户: 58积分
  • VIP会员: 29积分5折
  • 永久会员: 29积分5折
已有4人解锁查看

使用方法

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格式都是可以的

 

1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定,不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益,请联系我们进行处理。