vue-video-player
npm install vue-video-player --save
或
yarn add vue-video-player --save
2. 在main.js中全局引用
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer)
或以局部方式按需引入
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
注:在此处可能会出现引用不上的错误,npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-video-player - Not found
这个报错是因为察觉到组件引用不了,所以再次安装vue-video-player
,解决方法就是在根目录手动创建声明文件,手动创建一个 TypeScript 声明文件(.d.ts 文件),来为 vue-video-player
添加类型声明。在项目的根目录中创建一个新文件,命名为 vue-video-player.d.ts
,然后添加以下内容:
declare module 'vue-video-player';
这将告诉 TypeScript vue-video-player
模块的类型信息,尽管这些信息可能不是很准确。还有一个解决方案就是你可以在 TypeScript 配置中关闭严格模式,这样 TypeScript 将不会强制执行类型检查。在 tsconfig.json
文件中将 "strict": true
更改为 "strict": false
。
3. 视频播放器
<video-player
ref="videoPlayer"
class="video-player vjs-custom-skin"
@play="handlePlay"
@pause="handlePause"
:options="playerOptions">
</video-player>
配置参数
<script>
import { ref } from 'vue';
export default {
setup() {
const videoPlayer = ref(null);
const audioSource = ref('./assets/music.mp3');
const playerOptions = {
height: 400,
// playbackRates: [0.7, 1.0, 1.5, 2.0], //视频加速
autoplay: false,
muted: false,
loop: false,
preload: 'auto',
language: 'zh-CN',
fluid: true,
sources: [
{
type: 'video/mp4',
src: require('./assets/video.mp4')
}
],
poster: require('./assets/04.jpg'), // 封面地址
notSupportedMessage: '此视频暂无法播放,请稍后再试',
controlBar: {
timeDivider: true, //当前时间和持续时间的分隔符
durationDisplay: true, //显示持续时间
remainingTimeDisplay: false, //是否显示剩余时间功能
fullscreenToggle: true, //全屏按钮
showPlayButton: true,
}
};
const showPlayButton = ref(true);
const handlePlay = () => {
showPlayButton.value = false;
};
const handlePause = () => {
showPlayButton.value = true;
};
return {
videoPlayer,
playerOptions,
showPlayButton,
handlePlay,
handlePause,
audioSource,
};
},
};
</script>
注:此参数中包含以下音频播放器的参数
<audio ref="audioPlayer" controls>
<source :src="audioSource" type="audio/mpeg">
您的浏览器不支持
</audio>
手机扫一扫
移动阅读更方便
你可能感兴趣的文章