ArtPlayer.js常用事件和配置参数及其注释

ArtPlayer.js是一个现代且功能齐全的HTML5视频播放器。它提供了丰富的功能和插件，可以轻松地集成到您的网站或应用程序中。在本文中，我们将介绍ArtPlayer.js的常用事件和配置参数及其注释。

配置参数及其注释

ArtPlayer.js还有许多配置参数，可以帮助您自定义播放器的外观和行为。以下是一些常用配置参数及其注释：

artplayer.option({
  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 配置
})

参考

const artplayer = new Artplayer({
  container: '.artplayer-app',
  url: 'video.mp4',
  title: 'Video Title',
  poster: 'poster.jpg',
  autoSize: true,
  fullscreenWeb: true,
  localVideo: true,
  muted: true,
  loop: true,
  volume: 0.7,
  aspectRatio: '16:9',
  theme: '#f3ad27',
  lang: 'zh-cn',
  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.js具有各种不同的事件，可以让您对播放器中发生的事情进行响应。以下是一些常用事件及其注释：

artplayer.on('ready', () => {
  // 在播放器准备完成后触发
});
artplayer.on('play', () => {
  // 在视频开始播放时触发
});
artplayer.on('pause', () => {
  // 在视频暂停时触发
});
artplayer.on('seeking', () => {
  // 在视频快进时触发
});
artplayer.on('seeked', () => {
  // 在视频快进结束时触发
});
artplayer.on('error', () => {
  // 在视频播放出错时触发
});
artplayer.on('fullscreen', () => {
  // 在进入全屏模式时触发
});
artplayer.on('fullscreenExit', () => {
  // 在退出全屏模式时触发
});
artplayer.on('beforeDestroy', () => {
  // 在销毁播放器前触发
});
artplayer.on('destroy', () => {
  // 在销毁播放器后触发
});
artplayer.on('waiting', () => {
  // 在视频缓冲等待时触发
});
artplayer.on('volumeChange', () => {
  // 在视频音量改变时触发
});
artplayer.on('loadedmetadata', () => {
  // 在视频元数据加载完成时触发
});
artplayer.on('timeupdate', () => {
  // 在视频时间更新时触发
});
artplayer.on('ended', () => {
  // 在视频播放结束时触发
});

添加直播

添加ArtPlayer播放器直播标识参考，其中“isLive: true,”标识直播模式

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
	isLive: true,
    controls: [
        {
            position: 'left',
            html: '<div>Live</div>',
            index: 40,
        },
    ],
});

总结说明

以上是ArtPlayer.js常用事件和配置参数及其注释。希望这篇文章能够对您学习和使用ArtPlayer.js有所帮助！如果您需要更多信息，请访问ArtPlayer.js的官方网站