Vue3如何使用youtube-player实现YouTube视频播放？

本文共计899个文字，预计阅读时间需要4分钟。

目录+正文+开始使用+组件+youtubePlayer+使用方式+注意事项+常用参数+常用API+正文+youtube-player+是YouTube IFrame Player API（YIPA）的封装。可以在自己网站上播放YouTube视频。+开始使用+使用n参数。

目录

• 正文
• 开始使用
• 做成组件youtubePlayer
• 使用方式
• 注意事项
• 常用参数
• 常用API

正文

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

开始使用

使用 npm 下载

npm i youtube-player

做成组件youtubePlayer

<script setup> import { ref, watch, onMounted, onBeforeUnmount } from "vue"; import YouTubePlayer from "youtube-player"; const props = defineProps({ id: { type: String, default: "" }, src: { type: String, required: true }, width: { type: Number, default: 0 }, height: { type: Number, default: 0 } }); const emit = defineEmits(["ended", "play", "pause"]); onMounted(() => { initPlayer(); loadPlayer(); }); onBeforeUnmount(() => { player && player.destroy(); }); const getVideoId = () => { try { const url = new URL(props.src); return url.searchParams.get("v") || ""; } catch (error) { return ""; } }; let player = null; const initPlayer = () => { try { player = YouTubePlayer(`youtube-${props.id}`, { host: "www.youtube.com", width: props.width, height: props.height, videoId: getVideoId(), playsinline: 1, rel: 0 }); } catch (error) { console.log(error); } }; const loadPlayer = () => { try { player.loadVideoById(getVideoId()); } catch (error) { console.log(error); } }; const play = () => player && player.playVideo(); const pause = () => player && player.pauseVideo(); // -1（未开始）0（已结束）1（正在播放）2（已暂停）3（正在缓冲）5（视频已插入） let stateChangeListener; const addStateChange = () => { stateChangeListener = player?.on("stateChange", (event) => { if (event.data === 0) emit("ended"); if (event.data === 1) emit("play"); if (event.data === 2) emit("pause"); }); }; const removeStateChange = () => { if (stateChangeListener) player?.off(stateChangeListener); }; watch( () => props.src, () => loadPlayer() ); defineExpose({ play, pause }); </script> <template> <div class="youtube-video"> <div :id="'youtube-' + id"></div> </div> </template> <style lang="scss" scoped> .youtube-video { width: 100%; overflow: hidden; } </style>

使用方式

<youtube-player src="www.youtube.com/watch?v=uRzs2kS3Blg"></youtube-player>

注意事项

播放器有默认宽高，只能是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) 设置包含播放器的<iframe>的大小。

player.destroy() 移除包含播放器的 <iframe>。

以上就是详解vue3中如何使用youtube-player的详细内容，更多关于vue3使用youtube-player的资料请关注易盾网络其它相关文章！