Artplayer-轻量化全开源、功能齐全、兼容性强的弹幕H5播放器-苹果cms模板

Artplayer简介:

Artplayer是一个现代且功能齐全的H5播放器。它不仅全开源且提供了丰富的功能和插件，可以轻松地兼容集成到您的网站或应用程序中。

Artplayer支持多种视频解析方式。用户可以通过artplayer解析各种常见的视频格式，如MP4、M3U8、FLV等。同时，artplayer还支持解析在线视频，用户只需输入视频地址，artplayer便可自动解析并播放视频。这一功能方便了用户观看各种来源的视频，无需额外安装其他解析插件。

Artplayer具有良好的兼容性和稳定性。无论是在电脑端还是移动设备上，artplayer都能够稳定运行，并提供流畅的视频播放体验。无论是低带宽环境下的视频播放，还是高清视频的解析和播放，artplayer都能够应对自如，保证视频的流畅播放。

Artplayer还提供了丰富的播放控制功能。用户可以通过artplayer对视频进行暂停、播放、快进、快退等操作，还可以调整音量、全屏播放、选择分辨率等。这些功能的存在，使用户能够更加方便地控制视频播放，提高观看体验。

Artplayer还支持视频的自动播放和连续播放功能。用户可以设置artplayer在打开网页时自动播放视频，省去了手动点击播放的麻烦。同时，用户还可以设置artplayer在视频播放结束后自动播放下一个视频，实现视频的连续播放，让用户能够连续观看多个视频，提高观看效率。artplayer还支持视频的弹幕功能。用户可以在视频播放过程中发送弹幕，与其他观看者实时互动。这一功能在直播、音乐MV等场景中尤为重要，增加了用户的参与感和娱乐性。

Artplayer实例:

Demo HTML

...
<div id="player"></div>
...
<script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>
<script src="js/HLS.min.js"></script>

Demo JS

var art = new Artplayer({
  container: undefined, // 父元素
  url: "", // 视频地址
  title: "", // 视频标题
  volume: 0.7, // 视频默认音量
  theme: "#ffad00", // 播放器主题颜色
  aspectRatio: true, // 是否开启宽高比自适应
  autoSize: false, // 是否自动填充容器
  screenshot: true, // 是否开启截图功能
  setting: true, // 是否开启设置菜单
  flip: true, // 是否开启视频翻转
  playbackRate: true, // 是否开启视频播放速率
  loop: false, // 是否循环播放
  autoplay: false, // 是否自动播放
  muted: false, // 是否开始禁音 
  hotkey: true, // 是否开启视频快捷键  
  fullscreen: true, // 是否允许全屏
  fullscreenWeb: true, // 是否允许页面全屏  
  preload: "auto", // 预载入视频空间
  volumeBar: true, // 是否开启音量调节
  controlBar: true, // 是否开启控制条
  subtitle: [], // 字幕列表
  highlight: [], // 时间轴标记点
  pip: true, // 是否支持画中画
  autoMini: true, // 是否支持迷你模式  
  lock: false, // 是否锁定移动端播放器
  lang: navigator.language, // 播放器语言
  plugins: [], // 插件
  moreVideoAttr: {}, // 更多 video 标签属性
  HLSjsConfig: {}, // hls.js 配置
  flvjsConfig: {}, // flv.js 配置
  dashjsConfig: {}, // dash.js 配置
  controls: [
    'play',
    'progress',
    'time',
    'spacer',
    'fullscreen',
  ],
  quality: [
    {
      name: 'SD',
      value: 'https://example.com/SD.mp4',
    },
    {
      name: 'HD',
      value: 'https://example.com/HD.mp4',
    },
    {
      name: 'FHD',
      value: 'https://example.com/FHD.mp4',
    },
  ],
  layers: [
    {
      name: 'artplayer-plugin-danmuku',
      data: [
        { time: 0, text: 'Hello World!' },
        { time: 5, text: 'Welcome to ArtPlayer.js' },
      ],
    },
  ],
});

Artplayer参数:

  container: undefined, // 父元素
  url: "", // 视频地址
  title: "", // 视频标题
  volume: 0.7, // 视频默认音量
  theme: "#ffad00", // 播放器主题颜色
  aspectRatio: true, // 是否开启宽高比自适应
  autoSize: false, // 是否自动填充容器
  screenshot: true, // 是否开启截图功能
  setting: true, // 是否开启设置菜单
  flip: true, // 是否开启视频翻转
  playbackRate: true, // 是否开启视频播放速率
  loop: false, // 是否循环播放
  autoplay: false, // 是否自动播放
  muted: false, // 是否开始禁音 
  hotkey: true, // 是否开启视频快捷键  
  fullscreen: true, // 是否允许全屏
  fullscreenWeb: true, // 是否允许页面全屏  
  preload: "auto", // 预载入视频空间
  volumeBar: true, // 是否开启音量调节
  controlBar: true, // 是否开启控制条
  subtitle: [], // 字幕列表
  highlight: [], // 时间轴标记点
  pip: true, // 是否支持画中画
  autoMini: true, // 是否支持迷你模式  
  lock: false, // 是否锁定移动端播放器
  lang: navigator.language, // 播放器语言
  plugins: [], // 插件
  moreVideoAttr: {}, // 更多 video 标签属性
  hlsjsConfig: {}, // hls.js 配置
  flvjsConfig: {}, // flv.js 配置
  dashjsConfig: {}, // dash.js 配置
  
  poster: 'poster.jpg',
  autoSize: true,
  fullscreenWeb: true,
  localVideo: true,
  muted: true,
  loop: true,
  volume: 0.7,
  aspectRatio: '16:9',
  theme: '#f3ad27',
  lang: 'zh-cn',

container：播放器容器的选择器
url：视频文件的URL
title：视频的标题
poster：视频封面图的URL
autoSize：自动调整播放器大小以适应视频
fullscreenWeb：启用浏览器内全屏模式
localVideo：在本地播放视频文件而不是从远程服务器下载
muted：静音播放视频
loop：循环播放视频
volume：初始音量
aspectRatio：视频宽高比
theme：播放器主题颜色
lang：播放器语言
controls：控制栏中的控件
quality：视频质量选项
layers：图层插件及其数据

Artplayer控制:

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

art.on('ready', () => {
    art.play();
});


play	//	播放视频
pause	//	暂停视频
toggle	//	切换视频的播放和暂停
destroy	//	销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 HTML，默认为 true
seek	//	视频时间跳转，单位秒
forward	//	视频时间快进，单位秒
backward	//	视频时间快退，单位秒
volume	//	设置和获取视频音量，范围在：[0, 1]
url	//	设置和获取视频地址
switch	//	设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
switchUrl	//	设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
switchQuality//	设置视频画质地址，和 art.switchUrl 类似，但会带上之前的播放进度
muted	//	设置和获取视频是否静音
currentTime//	设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件
duration	//	获取视频时长
screenshot//	下载当前视频帧的截图
getDataURL//	获取当前视频帧的截图的base64地址，返回的是一个 Promise
getBlobUrl//	获取当前视频帧的截图的blob地址，返回的是一个 Promise
fullscreen//	设置和获取播放器窗口全屏
fullscreenWeb//	设置和获取播放器网页全屏
pip	//	设置和获取播放器画中画模式
poster	//	设置和获取视频海报，只有在视频播放前才能看到海报效果
mini	//	设置和获取播放器迷你模式
playing	//	获取视频是否正在播放中
autoSize	//	设置视频是否自适应尺寸
rect	//	获取播放器的尺寸和坐标信息
flip	//	设置和获取播放器翻转，支持normal, horizontal, vertical
playbackRate//	设置和获取播放器播放速度
aspectRatio//	设置和获取播放器长宽比
autoHeight//	当容器只有宽度，该属性可以自动计算出并设置视频的高度
attr	//	动态获取和设置 video 元素的属性
type	//	动态获取和设置视频类型
theme	//	动态获取和设置播放器主题颜色
airplay	//	开启隔空播放
loaded	//	视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
played	//	视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
proxy	//	DOM 事件的代理函数，实质上代理了 addEventListener 和 removeEventListener, 当使用 proxy 来处理事件，播放器销毁时也会自动销毁该事件
query	//	DOM 的查询函数，类似 document.querySelector，但被查询的对象局限于当前播放器内，可以避免同类名的错误
video	//	快捷返回播放器的 video 元素
CSSVar	//	动态获取或设置 CSS 变量
quality	//	动态设置画质列表

Artplayer监听:

播放器的事件分为两种，一种视频的原生事件 (前缀 video:)，另外一种是自定义事件

监听事件：

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

art.on('video:canplay', () => {
    console.info('video:canplay');
});

只监听一次事件：

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

art.once('video:canplay', () => {
    console.info('video:canplay');
});

手动触发事件：

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

art.emit('focus');

移除事件：

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

const onReady = () => {
    console.info('ready');
    art.off('ready', onReady);
}

art.on('ready', onReady);

全部事件监听API:

    'video:canplay': [event: Event];
    'video:canplaythrough': [event: Event];
    'video:complete': [event: Event];
    'video:durationchange': [event: Event];
    'video:emptied': [event: Event];
    'video:ended': [event: Event];
    'video:error': [event: Error];
    'video:loadeddata': [event: Event];
    'video:loadedmetadata': [event: Event];
    'video:pause': [event: Event];
    'video:play': [event: Event];
    'video:playing': [event: Event];
    'video:progress': [event: Event];
    'video:ratechange': [event: Event];
    'video:seeked': [event: Event];
    'video:seeking': [event: Event];
    'video:stalled': [event: Event];
    'video:suspend': [event: Event];
    'video:timeupdate': [event: Event];
    'video:volumechange': [event: Event];
    'video:waiting': [event: Event];
    'document:mousemove': [event: Event];
    'document:mouseup': [event: Event];
    info: [state: boolean];
    layer: [state: boolean];
    loading: [state: boolean];
    mask: [state: boolean];
    subtitle: [state: boolean];
    contextmenu: [state: boolean];
    control: [state: boolean];
    setting: [state: boolean];
    hotkey: [event: Event];
    destroy: [];
    subtitleUpdate: [text: string];
    subtitleLoad: [url: string];
    subtitleSwitch: [url: string];
    focus: [event: Event];
    blur: [event: Event];
    dblclick: [event: Event];
    click: [event: Event];
    hover: [state: boolean, event: Event];
    mousemove: [event: Event];
    resize: [];
    view: [state: boolean];
    lock: [state: boolean];
    aspectRatio: [aspectRatio: AspectRatio];
    autoHeight: [height: number];
    autoSize: [];
    ready: [];
    error: [error: Error, reconnectTime: number];
    flip: [flip: Flip];
    fullscreen: [state: boolean];
    fullscreenError: [event: Event];
    fullscreenWeb: [state: boolean];
    mini: [state: boolean];
    pause: [];
    pip: [state: boolean];
    play: [];
    screenshot: [dataUri: string];
    seek: [currentTime: number];
    subtitleOffset: [offset: number];
    restart: [url: string];
    muted: [state: boolean];

Artplayer弹幕

弹幕示例:

...
<script src="https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js"></script>
...

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
    plugins: [
        artplayerPluginDanmuku({
                       //弹幕参数...
        }),
    ],
});

弹幕参数:

{
    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
    fontSize: 25, // 字体大小，支持数字和百分比
    color: '#FFFFFF', // 默认字体颜色
    mode: 0, // 默认模式，0-滚动，1-静止
    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
    antiOverlap: true, // 是否防重叠
    useWorker: true, // 是否使用 web worker
    synchronousPlayback: false, // 是否同步到播放速度
    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
    heatmap: true, // 是否开启弹幕热度图, 默认为 false
    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
    mount: document.querySelector('.artplayer-danmuku'),
}

弹幕事件监听:

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
    plugins: [
        artplayerPluginDanmuku({
            danmuku: '/assets/sample/danmuku.xml',
        }),
    ],
});

art.on('artplayerPluginDanmuku:emit', (danmu) => {
    console.info('新增弹幕', danmu);
});

art.on('artplayerPluginDanmuku:loaded', (danmus) => {
    console.info('加载弹幕', danmus.length);
});

art.on('artplayerPluginDanmuku:error', (error) => {
    console.info('加载错误', error);
});

art.on('artplayerPluginDanmuku:config', (option) => {
    console.info('配置变化', option);
});

art.on('artplayerPluginDanmuku:stop', () => {
    console.info('弹幕停止');
});

art.on('artplayerPluginDanmuku:start', () => {
    console.info('弹幕开始');
});

art.on('artplayerPluginDanmuku:hide', () => {
    console.info('弹幕隐藏');
});

art.on('artplayerPluginDanmuku:show', () => {
    console.info('弹幕显示');
});

art.on('artplayerPluginDanmuku:destroy', () => {
    console.info('弹幕销毁');
});

Artplayer下载:

此处内容已隐藏，请评论后刷新页面查看.

文章版权声明 1、本网站名称：苹果CMS模板
2、可能会帮助到你：站长工具 | 图片压缩 | 进站必看
3、如若转载，请注明文章出处：
4、若作商业用途，请联系原作者授权，若本站侵犯了您的权益请联系站长进行删除处理。
5、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
6、本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法、侵权等任何非法活动，否则后果自负。
7、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END