基于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格式都是可以的
公告: 本站提供的源码、模板、插件等等其他资源,除资源本身问题外,都不包含免费技术服务,如需技术支持需支付100+技术服务费一次,具体依客服说明为准,请大家谅解!
说明: 本站资源解压密码见“常见问题”,一般都为“www.360mb.net”!
申明: 模板吧提供资源仅供学习用途,禁止用于搭建非法网站,本站不为涉黄、涉毒、涉赌等不法分子提供任何技术便利。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
说明: 本站资源解压密码见“常见问题”,一般都为“www.360mb.net”!
申明: 模板吧提供资源仅供学习用途,禁止用于搭建非法网站,本站不为涉黄、涉毒、涉赌等不法分子提供任何技术便利。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。