icon picker
동영상 URL 업로드

post_detail에 video칸을 만들고
models.py에 video를 추가해봅시다!
커맨드 창을 열어서 다음 커맨드를 입력해주세요!
>>> pip install django-embed-video
그럼 장고 비디오 모듈이 설치가 됩니다!
다음 를 열고 다음과 같이 만들어주세요!
(video = EmbedVideoField(null=True, blank=True, default=” ”) 부분이 추가되었어요!)
class Post(models.Model):
author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
title = models.CharField(max_length=200)
text = models.TextField()
image = models.FileField(null=TrSue, blank=True, upload_to="")
video = EmbedVideoField(null=True, blank=True, default="")
created_date = models.DateTimeField(
default=timezone.now)
published_date = models.DateTimeField(
blank=True, null=True)
그리고 상단 import 칸에 다음 모듈을 import 해주세요!
from embed_video.fields import EmbedVideoField

그리고 로 들어가서 field를 추가해줄거에요
forms.py에 fields에 video를 추가해주세요
완성된 모습은 다음과 같을 거에요!
fields = ['title', 'text', 'image', 'video']

스크린샷 2024-03-18 오후 9.16.59.png
그러면 Video 입력란이 추가 되었습니다.
이제 실제로 볼 수 있게 만들거에요!
post_detail에 이 부분을 추가해줍시다.
위치는 post.image의 endif 하단에 만들어주세요!
{% if post.video %}
<div class="iframe-container">
<div id="player"></div>
</div>

<script src="http://www.youtube.com/iframe_api"></script>

<script>

var player;

function onYouTubeIframeAPIReady(){

player = new YT.Player('player',{

width:'640', height:'390',

videoId:videoid,

playerVars:{'autoplay':1,'playsinline':1},

events:{ 'onReady':onPlayerReady }

});

}

function onPlayerReady(e){

e.target.mute();

e.target.playVideo();

}


</script>
{# youtube url from id #}

<script>
url = "{{ post.video }}";
videoid=youtube_parser(url);

function youtube_parser(url){
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
var match = url.match(regExp);
return (match&&match[7].length==11)? match[7] : false;
}
</script>
{% endif %}

2. youtube iframe api를 사용하여
3. youtube 링크를 아무렇게나 넣었을때 영상이 나오게 한다.
4.이때 영상은 자동재생으로 한다
조건:자동재생할때 음소거를 해야함.
TODO: 위의 코드 설명을 첨부한다.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.