auth : corner
date : 05-22
๐กNuxt์์ Video๋ฅผ ๋ฐฐ๊ฒฝ์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ช ๊ฐ์ง ์์ง๋ง,
โ ํ๋ ์ด์ด์ ๋น๋์ค๋ฅผ ๋ฃ๊ธฐ ์ํด์๋ ํ์ผ์ ์ง์ local์ด๋ ๋ฐฐํฌ๋๋ ์๋ฒ์ ์ฌ๋ฆฌ์ง ์๊ณ Cloudinary๋ผ๋ ๋ฐฉ๋ฒ์ผ๋ก ์ ์ํ๊ณ ์์ต๋๋ค.
โ Nuxt์์ Video๋ฅผ ๋ฐฐ๊ฒฝ์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํด์ฃผ๊ณ ์์ต๋๋ค.
1.
ํ๋ก์ ํธ๋ฅผ ์์ฑํฉ๋๋ค.
npm init nuxt-app project_name
nuxt.config.js
์ head์๋ค๊ฐ script์ stylesheet๋ฅผ ์ถ๊ฐํฉ๋๋ค.
<!----------style-------------->
{ rel: 'stylesheet', href: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.css' }
<!-- ------- script-------->
{ src: 'https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js' },
{ src: 'https://unpkg.com/cloudinary-video-player@1.5.9/dist/cld-video-player.min.js' }
2.
.env
ํ์ผ์ ์์ฑํฉ๋๋ค.
touch .env
example
NUXT_ENV_CLOUDINARY_CLOUD_NAME=username
CLOUDINARY_CLOUD_NAME์ ์๋ ค๋ ๋ฐฉ๋ฒ์ ์ด๊ณณ์ ์ฐธ์กฐํ์ธ์.
๋์๋ณด๋์ ๋ค์ด๊ฐ๋ฉด ํ๋ฉด์ Account Detail์ Cloud Name์ ์๋ ค์ฃผ๊ณ ์์ต๋๋ค.
Cloudinary์ ๊ณ์ ์ด ์๋ค๋ฉด ๊นํ๋ธ๋ ๊ตฌ๊ธ์ ์ด์ฉํด์ ๊ฐ์ ์ ํ์๊ธธ ๊ถ์ฅํฉ๋๋ค.
3.
Cloudinary์์ Media Library ๋ฉ๋ด๋ก ์ด๋ํ์ฌ Folder๋ฅผ ์ถ๊ฐํฉ๋๋ค.
Folder๋ช ์ ์์๋ก ์ง์ ํ๊ฑฐ๋, ์ฝ๋์์์ public id๊ฐ๊ณผ ๋์ผํด์ผ ํฉ๋๋ค.
Media Library์์ nuxtjs-video-recommendations
๋ผ๋ ํด๋๋ช
์ ์์ฑํ๊ณ , video๋ฅผ ์ถ๊ฐํฉ๋๋ค.
4.
์ถ๊ฐํ ๋น๋์ค์ ๋์ค๋ ์ ๋ชฉ์ด public Id = "ํด๋๋ช
/๋น๋์ค์ ๋ชฉ"
์ผ๋ก ์ฐ๊ฒฐ๋๋ ๊ฒ์ ์๊ณ ์์ด์ผ ํฉ๋๋ค.
5.
ํ๋ก์ ํธ๋ก ๋ค์ด์์ ๋น๋์ค๊ฐ ๋ค์ด๊ฐ์ผ ํ ํ์ด์ง์์ ์์
ํฉ๋๋ค.
Index.vue
<video
id="recommendations-player"
controls
muted
class="cld-video-player cld-video-player-skin-dark w-2/3 h-96 mx-auto"
>
</video>
export default {
name: 'IndexPage',
data(){
return {
cld:null,
player:null,
source1: {
publicId: "nuxtjs-video-recommendations/fireplace_bg_hoxtgx",
title:'Night Street',
subtitle:'Street at night with traffic and pedestrians',
description:'Street at night with traffic and pedestrians'
},
source2: {
publicId: "nuxtjs-video-recommendations/nightsky_bg_qt5bpq\n",
title:'Cookie',
subtitle:'Decorating a Cupcake with Gingerbread Cookie',
description:'Decorating a Cupcake with Gingerbread Cookie'
},
};
},
mounted(){
this.source1.recommendations = [
this.source2
];
this.cld = cloudinary.Cloudinary.new({
cloud_name: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
secure: true,
transformation: {crop: 'limit', width: 300, height:900}
});
this.player = this.cld.videoPlayer('recommendations-player',
{
autoShowRecommendations: true,
sourceTypes: ['mp4']
}
);
this.player.source(this.source1);
}
}
source1, source2
์ publicId ํค ๊ฐ์ 3.
๋ฒ๊ณผ 4.
๋ฒ์์ ๋งํ ๊ฐ์ด ๋ค์ด๊ฐ์ผํฉ๋๋ค.
Attributes | ||
---|---|---|
์์ฑ | ๊ธฐ๋ฅ | string |
id | this.cld.videoPlayer()์ ๋ค์ด๊ฐ id ๊ฐ์ ๋๋ค. | bool |
controls | ํ๋ ์ด์ด์ ์ปจํธ๋กค ๊ธฐ๋ฅ on/off ์ฌ๋ถ | bool |
muted | ์์๊ฑฐ ๊ธฐ๋ฅ | bool |
loop | ๋ฌดํ ๋ฃจํ | bool |
... |
๊ทธ์ธ ์ถ๊ฐ ์ ์ธ ์์ฑ์ ์ถํ ์์ฑํ๊ฒ ์ต๋๋ค.