이소스는 상품정보페이지에서 동영상을 재생할수 있고 상품수정페이지에서 미리보기 하실 수 있습니다.

이전글과 다르게 유튜브 재생기능이 추가되었습니다.

plyr js적용이 상품관리페이지에서는 필요하지 않았는대 유튜브 재생을 하려면 있는게 편한것 같아서 적용할수 있도록 수정했습니다.



adm 폴더에 shop_admin 폴더에 가면 itemformupdate.php에 가서 465줄 정도에 아래 소스를 붙여 넣습니다.
// 동영상 설정
$uploads_dir = (G5_MEDIA_PATH);
$allowed_ext = array('webm','mp4');
 
// 동영상 변수 정리
$error = $_FILES['it_video']['error'];
$name = $_FILES['it_video']['name'];
$fildir = G5_MEDIA_PATH.
$ext = array_pop(explode('.', $name));
$v_1 = "<video controls><source src='".G5_MEDIA_URL."/".$name."'></video>";
$v_2 = "<video width= '300' height= '200' controls><source src='".G5_MEDIA_URL."/".$name."'></video>";

// 동영상 파일 이동
move_uploaded_file( $_FILES['it_video']['tmp_name'], "$uploads_dir/$name");
chmod("$uploads_dir/$name", 0777);

//동영상 데이터베이스 등록(v1상품 페이지, v2상품수정 페이지 미리 보기)
if ( empty( $name ) ) {}
else {         
$sql = "update g5_shop_item set it_video_filename= '$name', it_video= '".addslashes($v_1)."', it_video_preview= '".addslashes($v_2)."' where it_id='$it_id'";
sql_query($sql);
};

같은 파일 569줄에 아래 소스를 붙여 넣습니다.

//동영상파일, 데이터베이스 삭제
if($it_video_del) {
$sql = " select it_video_filename from {$g5['g5_shop_item_table']} where it_id = '$it_id' ";
$file = sql_fetch($sql);
$it_video_filename    = $file['it_video_filename'];
$it_video_dir = G5_MEDIA_PATH;
$file_it_video = $it_video_dir.'/'.$it_video_filename;
unlink($file_it_video);
$sql = "update g5_shop_item set it_video_filename= '', it_video= '', it_video_preview= '' where it_id='$it_id'";
sql_query($sql);
}
 
이번에는 itemform.php를 열어서 1656줄에서 한 칸 띄어서 아래 소스를 붙여 넣습니다.

<th scope="row"><label for="it_1">여분필드(동영상)</label></th>
    <td>
<p>
        업로드하지 않으면 상품상세페이지에 출력하지 않습니다.<br>
<strong>확장자 webm, mp4 동영상만 업로드 가능하므로 그 외에 동영상은 인코딩(변환)이 필요합니다.<br>
동영상은 <?php echo ini_get('post_max_size');?> 이하만 업로드 가능합니다.<br>
동영상 미리 보기는 동영상이 업로드된 경우에만 가능합니다.<br>
동영상을 변경하시려면 삭제 후 변경 가능합니다.<br></strong>

</p>
<br>
<p>

        <input type="file" name="it_video"  id="it_video" value="<?php echo get_text($it['it_video']); ?>" id="it_video" class="frm_input" >&nbsp;&nbsp;<label for="it_video_del"><span class="sound_only">동영상 1 </span>파일삭제</label>
                <input type="checkbox" name="it_video_del" id="it_video_del" value="1">
<td class="td_grpset">
<?php if ($it['it_video_preview']) { ?>


<label for="it_video_preview"><center><strong><p>동영상 미리 보기</p>
파일명 : <?php echo $it['it_video_filename']; ?> </strong><br>

<?php echo $it['it_video_preview']; ?> </label> <?php } ?> </center>  
</td>
</p>
    </td>
<br>

이제 스킨 폴더로 가서 item.info.skin.php를 엽니다. 14번 줄에 아래 코드를 붙여 넣습니다. theme/basic/skin/shop에 있습니다. 테마 미사용자는 그냥 스킨 폴더에 샵 폴더에 베이직에 있습니다.
<!--비디오플레이어-->
 <?php if ($it['it_video_filename']) { ?>
        <h3>상품 소계 동영상</h3>
      <?php echo $it['it_video']; ?>
    <?php } ?>

이제 상품정보 페이지에 js를 사용해서 좀 더 플레이어가 이뻐 보이게 만들어줄게요 우리는 plyr.js라는걸 써볼께요.
이 사이트 주소는 https://plyr.io/ 입니다. 이제 적용해볼께요.

head.sub.php를 찾아서 엽니다. 테마는 테마 폴더에 이 테마는 영카트 폴더에 바로 있습니다.
90번 줄에 엔터를 치고 이렇게 붙여 넣습니다. 테마 미사용 자는 G5_THEME_CSS_URL를 G5_CSS_URL로 수정합니다.

<!--plyr 플레이어 js, css-->

<script src="<?php echo G5_JS_URL ?>/plyr.js"></script>
<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL ?>/plyr.css">

폴더에 shop.tail.php를 엽니다. 역시 경로는 테마는 테마 폴더에 이 테마 사용자는 영카트 폴더에 바로 있습니다.
이걸 55번 줄에 붙여 넣습니다.

<script>plyr.setup();</script>

그리고 첨부된 파일을 css는 css 폴더에 js는 영카트 폴더에 js 폴더에 넣습니다. css는 테마 폴더에 있습니다. 이 테마 사용자는 영카트 폴더에 바로 있습니다. 권한은 707로 줍니다.


phpmyadmin이나 https://sir.kr/g5_tip/2468 mysql 콘솔 등을 이용해서 컬럼(필드) 생성을 해줄 겁니다. phpmyadmin 콘솔에서는 g5_shop_item 테이블에 생성해야 합니다.

종류는 모두 다 text입니다. it_video랑 it_video_filename랑 it_video_preview 컬럼(필드)을 생성합니다. 그다음에 영카트가 설치된 폴더에 media란 폴더를 생성해줍니다. 권한은 707로 설정해줍니다.

이전글에서는 plyr js적용이 상품관리페이지에서는 필요하지 않았는대 유튜브 적용을 하려면 있는게 편한것 같아서 적용해보겠습니다.

유튜브 기본 플레이어보다는 개인적으로 plyr로 유튜브를 재생하는게 더 이쁜것 같거든요.

유튜브동영상 재생기능이 필요하지 않으시면 여기서부터는 넘어가셔도 되겠습니다.

adm 폴더에 가면 admin.head.php라는 파일이 있습니다. 열어서 내려보면 스크립트가 하나 있습니다. 그 스크립트밑에 아까 사용했던 요 코드를 다시한번 붙혀넣습니다.

<!--plyr 플레이어 js, css-->

<script src="<?php echo G5_JS_URL ?>/plyr.js"></script>
<link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL ?>/plyr.css">

이번엔 admin.tail.php을 열어서 제일 하단쯤에 스크립트가 끝나는 부분이 있습니다. 그 스크립트 밑에 아까 tail부분에서 사용한것을 똑같이 붙혀넣습니다.
<script>plyr.setup();</script>

그다음에 이번엔 itemformupdate.php를 열어서 아까 올려둔 동영상 업로드 아래에다가 아래 있는 유튜브 업로드소스를 붙혀넣습니다.

<tr>

<th scope="row"><label for="it_video">여분필드(유튜브)</label></th>
    <td>
<p>
        유튜브동영상 아이디를 DB에저장하지 않으면 상품상세페이지에 출력하지 않습니다.<br>
유튜브 미리 보기는 유튜브주소가 업로드된 경우에만 가능합니다.<br>
유튜브동영상 아이디를 변경하시려면 삭제 후 변경 가능합니다.<br></strong>
</p>
<br>
<p>

<input type="text" name="it_youtube_id" id="text" maxlength="11"> <label for="text"> 유튜브동영상 아이디를 입력해주세요</label>

        <label for="it_video_del"><span class="sound_only">유튜브동영상</span>삭제</label><input type="checkbox" name="it_youtube_del" id="it_youtube_del" value="1">
<td class="td_grpset">
<?php if ($it['it_youtube_preview']) { ?>


<label for="it_youtube_preview"><center><strong><p>유튜브동영상 미리 보기</p>
<?php echo $it['it_youtube_preview']; ?> </label> <?php } ?> </center>  
</td>
</p>
  </td>
  </tr>
 

 
 
  그후에 itemformupdate.php 이 파일을 다시 열어서 아까 넣었던 동영상 파일업로드, 데이터베이스 등록 부분 밑에 유튜브 데이터베이스 등록 부분을 붙혀줍니다.
 
 
  //유튜브 데이터베이스 등록


if ( empty ( $you_id )) {}
else {
$sql = "update g5_shop_item
          set it_youtube= '".addslashes($you_1)."'
          , it_youtube_preview= '".addslashes($you_2)."'
          where it_id='$it_id' ";
sql_query($sql);
};

그리고 아까 넣었던 동영상파일, 데이터베이스 삭제 부분 소스 밑에 유튜브 데이터베이스 삭제 부분도 붙혀줍니다.

//유튜브 데이터베이스 삭제
if($it_youtube_del) {
$sql = "update g5_shop_item set it_youtube= '', it_youtube_preview= '' where it_id='$it_id'";
sql_query($sql);
}

그럼 업로드, 삭제 부분과 상품수정페이지에서 미리보기 부분은 끝난겁니다.

마지막으로 상품정보페이지에서 보이도록 만들어볼께요 아까 열었던 item.info.skin.php를 열어주세요

그리고 아까 넣었던 비디오플레이어 소스 밑에다가 아래 유튜브 플레이어 소스도 붙혀넣습니다.

<!--유튜브플레이어-->
<?php if ($it['it_youtube']) { ?>
<h3>상품 소계 동영상</h3>
<?php echo $it['it_youtube']; ?> 
<?php } ?>

이제 정말 마지막 db에서 컬럼(필드)를 추가해주면 끝납니다.

it_youtube 필드랑 it_video_preview부분을 추가 해주시면 되는대
아까랑 똑같이 종류를 둘다 text로 지정해주면됩니다.


동영상업로드 안내
 
동영상은 상품관리 페이지에서 새 상품 등록 혹은 기존 상품 수정을 통해서 하단 여분 필드 칸에 보면 동영상 업로드 기능이 추가되었습니다. 동영상은 mp4와 webem만 업로드 가능하며 업로드하면 업로드 칸 옆에 미리 보기와
파일명이 표시되며 상품보기를 누르면 상품보기 페이지에서 동영상이 출력됩니다.

삭제버튼 파일 삭제가 안 되시는 분들은 아파치의 경우 rewrite 모드가 켜져 있는지 아파치 설정에서 영카트가 들어있는 폴더가 아래처럼 설정되어 있는지 확인해보시기 바랍니다. 또한 미디어 폴더 권한이 재대로 들어갔는지 확인해보시기 바랍니다.
AllowOverride All
Require all granted

호스팅 등등 임대 받으시는 분들은 해당 업체와 해결해보세요. 이외의 원인으로 인한 문제는 발생한 적이 없어서 잘 모르겠습니다.

동영상을 변경하실분은 삭제후 변경하시기 바랍니다. 이소스는 맘대로 수정해셔도 됩니다. 더좋게 수정할 분들은 수정후에 팁자료실에 수정한거 올려주심 감사하겠습니다.

유튜브동영상 아이디 저장안내

유튜브동영상 아이디를 DB에 저장시 올리고 싶은 유튜브 동영상 url(주소를)잘 보시면 v=xxxxxxxxxxx 이런식으로 v= 뒤에 11자리 유튜브동영상 아이디가 있습니다. 그걸 입력칸에 붙혀넣고 확인을 눌러주세요

그럼 상품수정페이지에서 미리보기가 가능하고 상품정보페이지에서 동영상이 보이게 됩니다. 삭제시에는 삭제버튼을 눌러삭제하시고 변경시에도 삭제 버튼을 눌러 변경하시면됩니다.

유튜브플레이어 기능에서는 따로 유튜브주소나 유튜브동영상 아이디등이 미리보기페이지 밑에 표시되지 않습니다.


이소스는 맘대로 수정해도 좋습니다. 기능 추가 같은거 해서 더 좋게 만들어 주신분은 팁자료실에 올려주시면 감사하겠습니다.

그리고 저에게 도움주신 많은 sir회원분께 감사드립니다.