6. 동영상 출력 게시판 : 스마트에디터(naver smarteditor) + 비디오태그(bootstrap) 개요

두가지 모두 간단한 설명만 적었습니다.

게시판의 기초 설계를 어떻게 할지만 정한 상태에서

자세한 설명은 본인의 다른 글에서 다루도록 하겠습니다.

(이 글을 먼저 숙지하고 나서 보는것을 추천드립니다.)

스마트에디터 + 비디오태그 실습 : http://drsggg.tistory.com/32

------------------------------------------------------------------------------------------------------------------------------------------------

동영상 재생 게시판 : 스마트에디터(naver smarteditor) + 비디오태그(bootstrap)

먼저 비디오 태그에 대한 설명입니다.

1. <video> ~ </video> 태그

동영상을 삽입해주는 태그이다.

즉, 태그를 이용하여 동영상을 삽입할 수 있다.

HTML5를 이용하여 삽입한 동영상은 자동재생 안되므로 컨트롤도구가 삽입되어야 한다.

 

2.속성

 (1) src

    동영상 화일의 경로 즉, URL을 써주는 속성이다.

    형식

<video src=“화일명” 또는 주소>

(2) controls

동영상 화일을 조절할 수 있는 조절기를 보이게 할 것인지 아닌지를 결정할 수 있다.

컨트롤 막대가 화면에 표시되며 재생/일시정지 단추, 트랙바, 볼륨 조절기 등이 있다.

<video src=“화일명” controls>

(3) Autoplay

    동영상을 자동으로 재생할 것인지를 결정하는 속성

    <video src=“화일명” autoplay>

(4) Loop

    동영상화일을 반복할지 안 할지를 설정할 수 있다.

    <video src=“화일명” loop>

    <video src=“화일명” loop>

(5)Width

    동영상이 재생될 너비를 설정

(6)Height

    동영상이 재생될 높이를 설정

<video src=“화일명”width=      height=   >

(7)preload2.속성

    동영상 파일을 다운로드하여 재생하게하는 방식

    auto: 자동으로 다운로드

    none: 사용자가 컨트롤을 조작하기 전까지 다운로드 금지

    Matadata : 메타데이터를 가져오며 사용자가 컨트롤을 조작하면 실제 비디오부분을 다운한다.

출처 : w3mschool

참고할만한 사이트 : https://taegon.kim/archives/3058

샘플(내 코드)

			
			
			
test video: video1

		

스마트 에디터에 대한 설명입니다.

스마트 에디터는 네이버에서 제공해주는 API입니다. 

네이버 개발자 센터에 가시면 무료로 다운로드 받을 수 있었는데, 요즘 트렌드가 git으로 업로드 하는 방식이다보니 최근에는 스마트에디터도 git을 이용해서 다운로드 받는 방식으로 바뀌었습니다.

네이버 개발자 센터 : https://developers.naver.com/opensource/tools/editor/

git 주소 : https://github.com/naver/smarteditor2

샘플(내 코드)

		내 용
		

참고 : http://naver.github.io/smarteditor2/user_guide/

http://sgroom.tistory.com/77

http://blog.naver.com/PostView.nhn?blogId=javaking75&logNo=220249101012