安装使用

2024-07-12 00:01| 来源: 网络整理| 查看: 265

安装使用安装 bashnpm install artplayer1bashyarn add artplayer1bashpnpm add artplayer1html1CDN bashhttps://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js1bashhttps://unpkg.com/artplayer/dist/artplayer.js1使用 html ArtPlayer Demo .artplayer-app { width: 400px; height: 300px; } const art = new Artplayer({ container: '.artplayer-app', url: 'path/to/video.mp4', }); 12345678910111213141516171819202122

提示

播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/packages/artplayer-template

Vue.js vue import Artplayer from "artplayer"; export default { data() { return { instance: null, }; }, props: { option: { type: Object, required: true, }, }, mounted() { this.instance = new Artplayer({ ...this.option, container: this.$refs.artRef, }); this.$nextTick(() => { this.$emit("get-instance", this.instance); }); }, beforeDestroy() { if (this.instance && this.instance.destroy) { this.instance.destroy(false); } }, }; 123456789101112131415161718192021222324252627282930313233343536vue import Artplayer from "./Artplayer.vue"; export default { data() { return { option: { url: "path/to/video.mp4", }, style: { width: "600px", height: "400px", margin: "60px auto 0", }, }; }, components: { Artplayer, }, methods: { getInstance(art) { console.info(art); }, }, }; 123456789101112131415161718192021222324252627282930

Artplayer 非响应式：

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js jsximport { useEffect, useRef } from 'react'; import Artplayer from 'artplayer'; export default function Player({ option, getInstance, ...rest }) { const artRef = useRef(); useEffect(() => { const art = new Artplayer({ ...option, container: artRef.current, }); if (getInstance && typeof getInstance === 'function') { getInstance(art); } return () => { if (art && art.destroy) { art.destroy(false); } }; }, []); return ; }12345678910111213141516171819202122232425jsximport React from 'react'; import Artplayer from './ArtPlayer.jsx'; function App() { return ( console.info(art)} /> ); } export default App;12345678910111213141516171819202122

Artplayer 非响应式：

在 React.js 里直接修改 option 是不会改变播放器的

TypeScript

导入 Artplayer 时会自动导入的 artplayer.d.ts

Vue.js vue import Artplayer from 'artplayer'; const art = ref(null); art.value = new Artplayer(); 12345React.js jsximport Artplayer from 'artplayer'; const art = useRef(null); art.current = new Artplayer();123Option

你也可以使用选项的类型

tsimport Artplayer from 'artplayer'; const option: Artplayer['Option'] = { container: '.artplayer-app', url: './assets/sample/video.mp4', }; option.volume = 0.5; const art = new Artplayer(option);12345678910

全部 TypeScript 定义

packages/artplayer/types

JavaScript

有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型

变量：

js/** * @type {import("artplayer")} */ let art = null;1234

参数：

js/** * @param {import("artplayer")} art */ function getInstance(art) { // }123456

属性：

jsexport default { data() { return { /** * @type {import("artplayer")} */ art: null, } } }12345678910

选项：

js/** * @type {import("artplayer/types/option").Option} */ const option = { container: '.artplayer-app', url: './assets/sample/video.mp4', }; option.volume = 0.5; const art8 = new Artplayer(option);123456789101112古老的浏览器

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version

对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11

jsimport Artplayer from 'artplayer/dist/artplayer.legacy.js';1bashhttps://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js1bashhttps://unpkg.com/artplayer/dist/artplayer.legacy.js1

假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：

构建配置：scripts/build.js

参考文档：browserslist

【本文地址】

安装使用

安装使用

今日新闻

推荐新闻