Ksable' 小屋

Home 留言板
Friends About

# Posts: ArtPlayer 播放器的简单使用

发表于 2024-08-11 19:40
更新于 2024-08-11 23:32
572 字
3 min read

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 Articles

4 Categories

7 Tags
Home
留言板
Categories
Tags
Archives
Friends
About
一些实用的网站
astro-koharu 使用指南
Music
Posts: N 只小猪 by 网友 Posts: 用 Python 设置 Windows 文件默认打开程序 Posts: 开发了个“笔记管理平台”Posts: H 漫画网站爬虫实战 Posts: Python爬虫 通用的小说下载器 Posts: 一个爬取菜鸟教程网站教程，并保存为本地 MarkDown 文件（Python）Posts: Hexo 主题开发笔记 Posts: 将 Umami Cloud 数据导出迁入到自搭建的 Umami Posts: 使用 Decap CMS 作为 Hexo 后端以实现在线编辑（保姆级教程）Posts: ArtPlayer 播放器的简单使用 Posts: 好看的二次元图片分享 Posts: 转载，为什么我们总是在等别人主动？Posts: Hexo Volantis主题副标题以打字效果输出 Hitokoto Posts: 打字机效果的 Hitokoto（html+css+js）Posts: 网易云音乐歌单批量下载歌曲（python）Posts: Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化 Posts: 本站的壁纸
This post is not yet available in English. Showing the original.
ArtPlayer 播放器界面简洁，功能强大，扩展性强。 但个人觉得官方文档讲的太复杂了，我就只想简单使用一下，没必要用到那么多的功能。 所以我稍微整理了一下代码，把常用的功能整理到了一块。

## 前言

ArtPlayer 播放器界面简洁，功能强大，扩展性强。

但个人觉得官方文档讲的太复杂了，我就只想简单使用一下，没必要用到那么多的功能。

所以我稍微整理了一下代码，把常用的功能整理到了一块。

## 示例

## 实例

代码

    var art = new Artplayer({
        container: '.artplayer-app',
        // container: document.querySelector('.artplayer-app'),
        url: 'https://artplayer.org/assets/sample/video.mp4',
        id: 'your-url-id', // 只用于记忆播放
        poster: 'https://artplayer.org/assets/sample/poster.jpg', //视频的海报，只会出现在播放器初始化且未播放的状态下
        theme: '#23ade5', // 主题色
        volume: 0.7, // 默认音量
        autoplay: false,  // 自动播放
        autoSize: true, // 自动调整播放器尺寸以隐藏黑边
        autoMini: true, // 当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式
        // 设置面板
        setting: true, // 设置面板
        flip: true, // 显示视频翻转功能
        playbackRate: true, // 显示视频播放速度功能
        aspectRatio: true, // 显示视频长宽比功能

        screenshot: true, // 在底部控制栏里显示 视频截图 功能 提示由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败
        hotkey: true, // 使用快捷键
        pip: true, // 在底部控制栏里显示 画中画 的开关按钮
        pip: true, // 只能让一个播放器播放
        fullscreen: true, // 在底部控制栏里显示播放器 窗口全屏 按钮
        miniProgressBar: true, // 迷你进度条
        playsInline: true, // 移动端 playsInline 模式

        // 设置 预览图
        // 在线生成预览图
        // https://artplayer.org/?libs=./uncompiled/artplayer-tool-thumbnail/index.js&example=thumbnail

        thumbnails: {
            url: 'https://artplayer.org/assets/sample/thumbnails.png',
            number: 60,
            column: 10,
        },
        // 替换默认图标
        icons: {
            loading: '<img src="https://artplayer.org/assets/img/ploading.gif">',
            state: '<img width="150" heigth="150" src="https://artplayer.org/assets/img/state.svg">',
            indicator: '<img width="16" heigth="16" src="https://artplayer.org/assets/img/indicator.svg">',
        },
        lock: true, // 移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏
        fastForward: true, // 移动端添加长按视频快进功能
        autoOrientation: true,  // 是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器
        airplay: true, // 显示 airplay 按钮
    });

如果没有看到播放器，请刷新一下。

## 末

本文完，如果本文对你有用，请留下一条友善的评论吧。

If you enjoyed this, leave a comment~

English
中文 English 日本語

kissablecho

kissablecho 的个人博客 / 记录生活，分享技术 / 喜欢二次元和白丝。

128 Articles

4 Categories

7 Tags
Home
留言板
Categories
Tags
Archives
Friends
About
一些实用的网站
astro-koharu 使用指南
Music
Posts: N 只小猪 by 网友 Posts: 用 Python 设置 Windows 文件默认打开程序 Posts: 开发了个“笔记管理平台”Posts: H 漫画网站爬虫实战 Posts: Python爬虫 通用的小说下载器 Posts: 一个爬取菜鸟教程网站教程，并保存为本地 MarkDown 文件（Python）Posts: Hexo 主题开发笔记 Posts: 将 Umami Cloud 数据导出迁入到自搭建的 Umami Posts: 使用 Decap CMS 作为 Hexo 后端以实现在线编辑（保姆级教程）Posts: ArtPlayer 播放器的简单使用 Posts: 好看的二次元图片分享 Posts: 转载，为什么我们总是在等别人主动？Posts: Hexo Volantis主题副标题以打字效果输出 Hitokoto Posts: 打字机效果的 Hitokoto（html+css+js）Posts: 网易云音乐歌单批量下载歌曲（python）Posts: Hexo Volantis主题音乐播放器Aplayer适应暗黑模式并能跟随变化 Posts: 本站的壁纸