您现在的位置是：网站首页> 编程资料编程资料

详解vue3中如何使用youtube-player_vue.js_

2023-05-24 331人已围观

简介 详解vue3中如何使用youtube-player_vue.js_

正文

youtube-player 是 YouTube IFrame Player API (YIPA) 的封装。可以在自己网站上播放YouTube视频。

开始使用

使用 npm 下载

npm i youtube-player

做成组件youtubePlayer

使用方式

注意事项

播放器有默认宽高，只能是px，需要做响应式的要自己动态获取宽高在重新设置。

常用参数

参数 
autoplay是否在播放器加载时自动开始播放初始视频。支持的值为 0 或 1。默认值为 0。
controls视频播放器控件是否会显示。支持的值为 0 或 1。默认值为 1。
fs视频播放器全屏按钮是否会显示。支持的值为 0 或 1。默认值为 1。
loop视频是否会循环播放。支持的值为 0 或 1。默认值为 0。
playsinline此参数用于控制视频在 iOS 设备上的 HTML5 播放器中播放时，是以内嵌方式还是全屏模式播放。支持的值为 0 或 1。默认值为 0 全屏。

常用API

player.playVideo() 播放当前已插入/已加载的视频。

player.pauseVideo() 暂停当前正在播放的视频。

player.stopVideo() 停止和取消加载当前视频。

player.mute() 使播放器静音。

player.unMute() 取消播放器静音。

player.setSize(width:Number, height:Number) 设置包含播放器的