设为首页收藏本站
开启辅助访问

基础选项

您所在的位置：网站首页 › js设置视频暂停快捷键 › 基础选项

基础选项

2024-06-28 01:57| 来源: 网络整理| 查看: 265

基础选项 ​container ​Type: String, ElementDefault: #artplayer

播放器挂载的 DOM 容器

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', // container: document.querySelector('.artplayer-app'), url: '/assets/sample/video.mp4', });12345

您可能需要初始化容器元素的大小，如:

css.artplayer-app { width: 400px; height: 300px; }1234

或者使用 aspect-ratio：

css.artplayer-app { aspect-ratio: 16/9; }123

提示

全部选项里，只有 container 是必填的

url ​Type: StringDefault: ''

视频源地址

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

有时候 url 地址没那么快知道，这时候你可以异步设置 url

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', }); setTimeout(() => { art.url = '/assets/sample/video.mp4'; }, 1000);1234567

提示

默认支持三种视频文件格式：.mp4, .ogg, .webm

如需要播放 .m3u8 或者 .flv 等其它格式，请参考左侧的 第三方库

id ​Type: StringDefault: ''

播放器的唯一标识，目前只用于记忆播放 autoplayback

▶ Run Codejsvar art = new Artplayer({ id: 'your-url-id', container: '.artplayer-app', url: '/assets/sample/video.mp4', });12345onReady ​Type: FunctionDefault: undefined

构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和ready事件一样

▶ Run Codejsvar art = new Artplayer( { container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }, function onReady(art) { this.play() }, );12345678910

等同于:

jsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }); art.on('ready', () => { art.play(); });123456789

提示

回调函数里的this就是播放器实例，但回调函数假如使用了箭头函数，this则不会指向播放器实例

poster ​Type: StringDefault: ''

视频的海报，只会出现在播放器初始化且未播放的状态下

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', poster: '/assets/sample/poster.jpg', });12345theme ​Type: StringDefault: #f00

播放器主题颜色，目前用于 进度条 和 高亮元素 上

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', theme: '#ffad00', });12345volume ​Type: NumberDefault: 0.7

播放器的默认音量

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', volume: 0.5, });12345

提示

播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值

isLive ​Type: BooleanDefault: false

使用直播模式，会隐藏进度条和播放时间

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', isLive: true, });12345muted ​Type: BooleanDefault: false

是否默认静音

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, });12345autoplay ​Type: BooleanDefault: false

是否自动播放

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoplay: true, muted: true, });123456

提示

假如希望默认进入页面就能自动播放视频，muted 必需为 true，更多信息请阅读 Autoplay Policy Changes

autoSize ​Type: BooleanDefault: false

播放器的尺寸默认会填充整个 container 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 css 的 object-fit: cover;

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoSize: true, });12345autoMini ​Type: BooleanDefault: false

当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoMini: true, });12345loop ​Type: BooleanDefault: false

是否循环播放

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', loop: true, });12345flip ​Type: BooleanDefault: false

是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', flip: true, setting: true, });123456playbackRate ​Type: BooleanDefault: false

是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', playbackRate: true, setting: true, });123456aspectRatio ​Type: BooleanDefault: false

是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', aspectRatio: true, setting: true, });123456screenshot ​Type: BooleanDefault: false

是否在底部控制栏里显示 视频截图 功能

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', screenshot: true, });12345

提示

由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败

setting ​Type: BooleanDefault: false

是否在底部控制栏里显示 设置面板 的开关按钮

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, });12345hotkey ​Type: BooleanDefault: true

是否使用快捷键

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', hotkey: true, });12345热键描述↑增加音量↓降低音量←视频快进→视频快退space切换播放/暂停

提示

只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效

pip ​Type: BooleanDefault: false

是否在底部控制栏里显示 画中画 的开关按钮

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', pip: true, });12345mutex ​Type: BooleanDefault: true

假如页面里同时存在多个播放器，是否只能让一个播放器播放

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', mutex: true, });12345fullscreen ​Type: BooleanDefault: false

是否在底部控制栏里显示播放器 窗口全屏 按钮

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreen: true, });12345fullscreenWeb ​Type: BooleanDefault: false

是否在底部控制栏里显示播放器 网页全屏 按钮

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreenWeb: true, });12345subtitleOffset ​Type: BooleanDefault: false

字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitleOffset: true, subtitle: { url: '/assets/sample/subtitle.srt', }, setting: true, });123456789miniProgressBar ​Type: BooleanDefault: false

迷你进度条，只在播放器失去焦点后且正在播放时出现

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', miniProgressBar: true, });12345useSSR ​Type: BooleanDefault: false

是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 HTML 时有用

你可以通过 Artplayer.html 访问到播放器所需的 HTML

▶ Run Codejsvar $container = document.querySelector('.artplayer-app'); $container.innerHTML = Artplayer.html; var art = new Artplayer({ container: $container, url: '/assets/sample/video.mp4', useSSR: true, });12345678playsInline ​Type: BooleanDefault: true

在移动端是否使用 playsInline 模式

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', playsInline: true, });12345layers ​Type: ArrayDefault: []

初始化自定义的 层

▶ Run Codejsvar img = '/assets/sample/layer.png'; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', layers: [ { name: 'potser', html: ``, style: { position: 'absolute', top: '20px', right: '20px', opacity: '.9', }, click: function (...args) { console.info('click', args); art.layers.show = false; }, mounted: function (...args) { console.info('mounted', args); }, }, ], });123456789101112131415161718192021222324

组件配置 请参考以下地址：

/component/layers.html

settings ​Type: ArrayDefault: []

初始化自定义的 设置面板

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, settings: [ { html: 'setting01', selector: [ { html: 'setting01-01', }, { html: 'setting01-02', }, ], onSelect: function (...args) { console.info(args); }, }, { html: 'setting02', selector: [ { html: 'setting02-01', }, { html: 'setting02-02', }, ], onSelect: function (...args) { console.info(args); }, }, ], });1234567891011121314151617181920212223242526272829303132333435

设置面板 请参考以下地址

/component/setting.html

contextmenu ​Type: ArrayDefault: []

初始化自定义的 右键菜单

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', contextmenu: [ { html: 'your-menu', click: function (...args) { console.info('click', args); art.contextmenu.show = false; }, }, ], });12345678910111213

组件配置 请参考以下地址：

/component/contextmenu.html- Type:

controls ​Type: ArrayDefault: []

初始化自定义的底部 控制栏

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'left', html: 'your-control', tooltip: 'Your Control', style: { color: 'green', }, click: function (...args) { console.info('click', args); }, }, ], });1234567891011121314151617

组件配置 请参考以下地址：

/component/controls.html

quality ​Type: ArrayDefault: []

是否在底部控制栏里显示 画质选择 列表

属性类型描述defaultBoolean默认画质htmlString画质名字urlString画质地址▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', quality: [ { default: true, html: 'SD 480P', url: '/assets/sample/video.mp4', }, { html: 'HD 720P', url: '/assets/sample/video.mp4', }, ], });123456789101112131415highlight ​Type: ArrayDefault: []

在进度条上显示 高亮信息

属性类型描述timeNumber高亮时间（单位秒）textString高亮文本▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', highlight: [ { time: 60, text: 'One more chance', }, { time: 120, text: '谁でもいいはずなのに', }, { time: 180, text: '夏の想い出がまわる', }, { time: 240, text: 'こんなとこにあるはずもないのに', }, { time: 300, text: '－－终わり－－', }, ], });1234567891011121314151617181920212223242526plugins ​Type: ArrayDefault: []

初始化自定义的 插件

▶ Run Codejsfunction myPlugin(art) { console.info(art); return { name: 'myPlugin', something: 'something', doSomething: function () { console.info('doSomething'); }, }; } var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [myPlugin], });12345678910111213141516thumbnails ​Type: ObjectDefault: {}

在进度条上设置 预览图

属性类型描述urlString预览图地址numberNumber预览图数量columnNumber预览图列数widthNumber预览图宽度heightNumber预览图高度▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', thumbnails: { url: '/assets/sample/thumbnails.png', number: 60, column: 10, }, });123456789

在线生成预览图

artplayer-tool-thumbnail

subtitle ​Type: ObjectDefault: {}

设置视频的字幕，支持字幕格式：vtt, srt, ass

属性类型描述nameString字幕名字urlString字幕地址typeString字幕类型，可选 vtt, srt, assstyleObject字幕样式encodingString字幕编码，默认 utf-8escapeBoolean是否转义 html 标签，默认为 trueonVttLoadFunction用于修改 vtt 文本的函数▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', type: 'srt', encoding: 'utf-8', escape: true, style: { color: '#03A9F4', 'font-size': '30px', }, }, });1234567891011121314moreVideoAttr ​Type: ObjectDefault: {'controls': false,'preload': 'metadata'}

更多视频属性，这些属性将直接写入视频元素里

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', moreVideoAttr: { 'webkit-playsinline': true, playsInline: true, }, });12345678icons ​Type: ObjectDefault: {}

用于替换默认图标，支持 Html 字符串和 HTMLElement

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', icons: { loading: '', state: '', }, });12345678

全部图标的定义

artplayer/types/icons.d.ts

type ​Type: StringDefault: ''

用于指明视频的格式，需要配合 customType 一起使用，默认视频的格式就是视频地址的后缀（如 .m3u8, .mkv, .ts），但有时候视频地地址没有正确的后缀，所以需要特别指明

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.m3u8', type: 'm3u8', });12345

后缀的识别

播放器只能解析这种后缀：/assets/sample/video.m3u8

但无法解析这种后缀：/assets/sample/video?type=m3u8

所以假如你使用了 customType，最好同时要指明 type

customType ​Type: ObjectDefault: {}

通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数

video : 视频 DOM 元素url : 视频地址art : 当前实例▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.m3u8', customType: { m3u8: function (video, url, art) { // }, }, });123456789lang ​Type: StringDefault: navigator.language.toLowerCase()

默认显示语言，目前支持：en, zh-cn

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', lang: 'en', });12345

更多的语言设置

/start/i18n.html

i18n ​Type: ObjectDefault: {}

自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并

新增你的语言:

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', lang: 'your-lang', i18n: { 'your-lang': { Play: 'Your Play' }, }, });12345678910

修改现有的语言

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', i18n: { 'zh-cn': { Play: 'Your Play' }, 'zh-tw': { Play: 'Your Play' }, }, });123456789101112

更多的语言设置

/start/i18n.html

lock ​Type: BooleanDefault: false

是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', lock: true, });12345fastForward ​Type: BooleanDefault: false

是否在移动端添加长按视频快进功能

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fastForward: true, });12345autoPlayback ​Type: BooleanDefault: false

是否使用自动 回放功能

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', id: 'your-url-id', autoPlayback: true, });123456

提示

因为播放器默认使用 url 作为 key 来缓存播放进度的

但假如你的同一个视频的 url 是不同的话，那么你需要使用 id 来标识视频的唯一 key

autoOrientation ​Type: BooleanDefault: false

是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoOrientation: true, });12345airplay ​Type: BooleanDefault: false

是否显示 airplay 按钮，当前只有部分浏览器支持该功能

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', airplay: true, });12345cssVar ​Type: ObjectDefault: {}

用于改变内置的css变量

▶ Run Codejsvar art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', cssVar: { // }, });1234567

cssVar 写法参考

artplayer/types/cssVar.d.d.ts



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3