详解vue3中如何使用youtube-player
短信预约 -IT技能 免费直播动态提醒
正文
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: "" },
class="lazy" data-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.class="lazy" data-src);
return url.searchParams.get("v") || "";
} catch (error) {
return "";
}
};
let player = null;
const initPlayer = () => {
try {
player = YouTubePlayer(`youtube-${props.id}`, {
host: "https://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.class="lazy" data-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 class="lazy" data-src="https://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的资料请关注编程网其它相关文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341