Skip to main content

在控制栏添加列表

有时你需要在控制栏添加列表,那么你可以在添加控件的时候使用 selectoronSelect 属性

切换字幕

▶ Run Code
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
controls: [
{
position: 'right',
html: 'Subtitle 01',
selector: [
{
default: true,
html: '<span style="color:red">Subtitle 01</span>',
url: '/assets/sample/subtitle.srt?id=1',
},
{
html: '<span style="color:yellow">Subtitle 02</span>',
url: '/assets/sample/subtitle.srt?id=2',
},
],
onSelect: function (item, $dom) {
console.info(item, $dom);

art.subtitle.url = item.url;

return '你点击了 ' + item.html;
},
},
],
});

切换滤镜

▶ Run Code
var instagramFilters = [
{
"html": "1977",
"class": "filter-1977"
},
{
"html": "Aden",
"class": "filter-aden"
},
{
"html": "Amaro",
"class": "filter-amaro"
},
{
"html": "Ashby",
"class": "filter-ashby"
},
{
"html": "Brannan",
"class": "filter-brannan"
},
{
"html": "Brooklyn",
"class": "filter-brooklyn"
},
{
"html": "Charmes",
"class": "filter-charmes"
},
{
"html": "Clarendon",
"class": "filter-clarendon"
},
{
"html": "Crema",
"class": "filter-crema"
},
{
"html": "Dogpatch",
"class": "filter-dogpatch"
},
{
"html": "Earlybird",
"class": "filter-earlybird"
},
{
"html": "Gingham",
"class": "filter-gingham"
},
{
"html": "Ginza",
"class": "filter-ginza"
},
{
"html": "Hefe",
"class": "filter-hefe"
},
{
"html": "Helena",
"class": "filter-helena"
},
{
"html": "Hudson",
"class": "filter-hudson"
},
{
"html": "Inkwell",
"class": "filter-inkwell"
},
{
"html": "Kelvin",
"class": "filter-kelvin"
},
{
"html": "Kuno",
"class": "filter-juno"
},
{
"html": "Lark",
"class": "filter-lark"
},
{
"html": "Lo-Fi",
"class": "filter-lofi"
},
{
"html": "Ludwig",
"class": "filter-ludwig"
},
{
"html": "Maven",
"class": "filter-maven"
},
{
"html": "Mayfair",
"class": "filter-mayfair"
},
{
"html": "Moon",
"class": "filter-moon"
},
{
"html": "Nashville",
"class": "filter-nashville"
},
{
"html": "Perpetua",
"class": "filter-perpetua"
},
{
"html": "Poprocket",
"class": "filter-poprocket"
},
{
"html": "Reyes",
"class": "filter-reyes"
},
{
"html": "Rise",
"class": "filter-rise"
},
{
"html": "Sierra",
"class": "filter-sierra"
},
{
"html": "Skyline",
"class": "filter-skyline"
},
{
"html": "Slumber",
"class": "filter-slumber"
},
{
"html": "Stinson",
"class": "filter-stinson"
},
{
"html": "Sutro",
"class": "filter-sutro"
},
{
"html": "Toaster",
"class": "filter-toaster"
},
{
"html": "Valencia",
"class": "filter-valencia"
},
{
"html": "Vesper",
"class": "filter-vesper"
},
{
"html": "Walden",
"class": "filter-walden"
},
{
"html": "Willow",
"class": "filter-willow"
},
{
"html": "X-Pro",
"class": "filter-xpro-ii"
}
]

var art = new Artplayer({
container: '.artplayer-app',
url: 'https://artplayer.org/assets/sample/video.mp4',
autoSize: true,
controls: [
{
position: 'right',
html: 'Instagram Filters',
selector: instagramFilters,
onSelect: function (item) {
art.template.$video.className = 'art-video ' + item.class;
return item.html;
},
},
],
});