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

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' },
      ],
    },
  ],
});

解释

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

常用事件

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的官方网站

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享