Youtube와 Vimeo 동영상을 Add-on으로 삽입하는 버그 수정 > 버그 & 건의

본문 바로가기

버그 & 건의

Youtube와 Vimeo 동영상을 Add-on으로 삽입하는 버그 수정

profile_image
JamesShin 70.♡.183.180
2018-10-17 17:07 21,832 3
  • - 첨부파일 : bbs.class.php.7z (11.1K) - 다운로드

본문

Youtube 동영상 주소 https://www.youtube.com/embed/ZIr2vq-qnlA 를 게시글 상단에 삽입하고자 할 경우,

이윰 테마는 게시판의 동영상 Add-On 기능 즉, 버튼을 클릭한 후, 다음 그림과 같이 동영상주소를 입력하고 "적용하기" 버튼을 클릭하면, 게시글 상단에 동영상 재생을 위한 iframe 부분을 자동삽입합니다.

하지만, 게시글이 저장될 때 동영상 주소가 제대로 Parse되지 않는 바람에 Youtube 동영상 주소를 삽입되지 않는 버그가 있습니다.

[ 동영상 Embed 에러가 발생한 화면 ]

버그가 발생한 html 쏘스를 살펴 보면 다음과 같이 embed/다음에 동영상 주소 중 ZIr2vq-qnlA라는 문자열이 보이지 않는 것을 확인할 수 있습니다.

 

<div class="board-view-atc">
    <h2 class="board-view-atc-title">본문</h2>
    <div class="board-view-file-conts">
        <div id="bo_v_img"></div>
    </div>
    <div class="board-view-con view-content">
        <p>
            <div class='responsive-video'>
                <iframe width="600" height="360" src="http://www.youtube.com/embed/?wmode=opaque&autohide=1" frameborder="0" allowfullscreen></iframe>
            </div>
            </a>
        </p>

 

이 버그는 /eyoom/class/bbs.class.php 파일을 다음 git diff와 같이 수정하면 됩니다.

# git diff
diff --git a/eyoom/class/bbs.class.php b/eyoom/class/bbs.class.php
index 360a9ac..f71f5e7 100644
--- a/eyoom/class/bbs.class.php
+++ b/eyoom/class/bbs.class.php
@@ -407,18 +407,23 @@ class bbs extends eyoom
             case 'youtube.com':
                 if ($src[1]) {
                     $video['key1'] = $src[1];
+                } elseif ($info['path']) {
+                    $video['key1'] = preg_replace("/\/embed\//i","",$info['path']);
                 } else {
-                    $video['key1'] = $query['v'];;
+                    $video['key1'] = $query['v'];
                 }
                 break;

             /**
              * Vimeo
              */
+            case 'player.vimeo.com':
             case 'vimeo.com':
                 if ($src[1] && $src[2]) {
                     $video['key1'] = $src[1];
                     $video['key2'] = $src[2];
+                } elseif ($info['path']) {
+                    $video['key1'] = preg_replace("/\/video\//i","",$info['path']);
                 } else {
                     $data = $this->get_video_use_curl($video_url, $host);
                     $video['key1'] = $data['vid'];
@@ -616,6 +621,7 @@ class bbs extends eyoom
             /**
              * Vimeo
              */
+            case 'player.vimeo.com':
             case 'vimeo.com':
                 preg_match('/\<meta property=\"og:url\"\scontent=\"(?P<vid>[a-zA-Z0-9:\/\._]+)\"/i', $output, $scrapping);
                 $out['vid'] = $this->get_video_key($this->eyoom_host($scrapping['vid']));
@@ -730,35 +736,36 @@ class bbs extends eyoom
             case 'youtu.be':
             case 'youtube.com':
                 $vlist = $video['key2'] ? '&list='.$video['key2'] : '';
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://www.youtube.com/embed/'.$video['key1'].'?wmode=opaque&autohide=1'.$vlist.'" frameborder="0" allowfullscreen></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//www.youtube.com/embed/'.$video['key1'].'?wmode=opaque&autohide=1'.$vlist.'" frameborder="0" allowfullscreen></iframe>';
                 break;
             case 'tvcast.naver.com':
             case 'tv.naver.com':
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://serviceapi.rmcnmv.naver.com/flash/outKeyPlayer.nhn?vid='.$video['key1'].'&outKey='.$video['key2'].'&controlBarMovable=true&jsCallable=true&skinName=tvcast_black" frameborder="no" scrolling="no" marginwidth="0" marginheight="0"></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//serviceapi.rmcnmv.naver.com/flash/outKeyPlayer.nhn?vid='.$video['key1'].'&outKey='.$video['key2'].'&controlBarMovable=true&jsCallable=true&skinName=tvcast_black" frameborder="no" scrolling="no" marginwidth="0" marginheight="0"></iframe>';
                 break;
+            case 'player.vimeo.com':
             case 'vimeo.com':
                 $source = '<iframe src="//player.vimeo.com/video/'.$video['key1'].'" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
                 break;
             case 'ted.com':
-                $source = '<iframe src="https://embed-ssl.ted.com/talks/'.$video['key1'].'.html" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0" scrolling="no" allowFullScreen></iframe>';
+                $source = '<iframe src="//embed-ssl.ted.com/talks/'.$video['key1'].'.html" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0" scrolling="no" allowFullScreen></iframe>';
                 break;
             case 'tvpot.daum.net':
             case 'tv.kakao.com':
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://videofarm.daum.net/controller/video/viewer/Video.html?vid='.$video['key1'].'&play_loc=undefined&wmode=opaque" frameborder="0" scrolling="no"></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//videofarm.daum.net/controller/video/viewer/Video.html?vid='.$video['key1'].'&play_loc=undefined&wmode=opaque" frameborder="0" scrolling="no"></iframe>';
                 break;
             case 'channel.pandora.tv':
             case 'pan.best':
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://channel.pandora.tv/php/embed.fr1.ptv?userid='.$video['key2'].'&prgid='.$video['key1'].'&skin=1&autoPlay=false&share=on" frameborder="0" allowfullscreen></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//channel.pandora.tv/php/embed.fr1.ptv?userid='.$video['key2'].'&prgid='.$video['key1'].'&skin=1&autoPlay=false&share=on" frameborder="0" allowfullscreen></iframe>';
                 break;
             case 'dailymotion.com':
             case 'dai.ly':
-                $source = '<iframe frameborder="0" width="'.$video['width'].'" height="'.$video['height'].'" src="http://www.dailymotion.com/embed/video/'.$video['key1'].'"></iframe>';
+                $source = '<iframe frameborder="0" width="'.$video['width'].'" height="'.$video['height'].'" src="//www.dailymotion.com/embed/video/'.$video['key1'].'"></iframe>';
                 break;
             case 'facebook.com':
-                $source = '<iframe src="https://www.facebook.com/video/embed?video_id='.urlencode($video['key1']).'" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0"></iframe>';
+                $source = '<iframe src="//www.facebook.com/video/embed?video_id='.urlencode($video['key1']).'" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0"></iframe>';
                 break;
             case 'slideshare.net':
-                $source = '<iframe src="https://www.slideshare.net/slideshow/embed_code/'.$video['key1'].'" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe>';
+                $source = '<iframe src="//www.slideshare.net/slideshow/embed_code/'.$video['key1'].'" width="'.$video['width'].'" height="'.$video['height'].'" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe>';
                 break;
             case 'sendvid.com':
                 $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//sendvid.com/embed/'.$video['key1'].'" frameborder="0" allowfullscreen></iframe>';
@@ -766,11 +773,11 @@ class bbs extends eyoom
             case 'youku.com':
             case 'v.youku.com':
             case 'player.youku.com':
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://player.youku.com/embed/'.$video['key1'].'" frameborder="0" allowfullscreen></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//player.youku.com/embed/'.$video['key1'].'" frameborder="0" allowfullscreen></iframe>';
                 break;
             case 'iqiyi.com':
             case 'player.video.qiyi.com':
-                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid='.$video['key1'].'&tvId='.$video['key2'].'" frameborder="0" allowfullscreen></iframe>';
+                $source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="//open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid='.$video['key1'].'&tvId='.$video['key2'].'" frameborder="0" allowfullscreen></iframe>';
                 break;
         }
         if ($source) {

 

덧붙여, W3C의 가장 최근 권고안에 의거하면 http:// 혹은 https://라는 표현보다는 그냥 //만으로 표기하는 것이 바람직합니다. 따라서, 같은 PHP 파일의 private function video_source($video) 함수를 찾아서 src="http:// 혹은 src="https://을 모두 src="//로 변경하시기 바랍니다.

위와 같이 변경하면 다음 그림과 같이 제대로 동영상이 잘 재생됩니다.

 

Youtube 동영상 외 Vimeo 동영상에 대해서도 추가 시험하였고 iframe 삽입 버그를 수정하였습니다.

 

다음 첨부파일은 버그를 수정한 bbs.class.php입니다. eyoom/class/ 폴더에 복사해 넣으시면 됩니다.

 

 

 

 

 

 

 

 

 

 

댓글목록3

닭발은세개님의 댓글

profile_image
닭발은세개 14.♡.2.253
2018-10-17 21:52
4.1.4에 대응하는 수정인가요? 감사합니다. ^^

축하합니다. 첫댓글 포인트 12포인트를 획득하였습니다.

JamesShin님의 댓글

profile_image
JamesShin 70.♡.183.180
2018-10-18 01:32
맞습니다. 릴리즈 4.1.4에도 존재하는 버그입니다. 그리고, Youtube와 Vimeo 이외 다른 Streaming Server들에 대해서는 버그를 적용하지 않았습니다. 제가 지금 당장 필요한 것들에 대해서만 버그를 추적했습니다.
또한, Youtube의 경우, Watch URL이 아닌 Embed Video Source를 사용하시기 바랍니다.

  https://www.youtube.com/watch?v=ZIr2vq-qnlA 이 아니라,

  https://youtu.be/ZIr2vq-qnlA 혹은 https://www.youtube.com/embed/ZIr2vq-qnlA

이것은 Youtube 영상의 우측 아래편의 SHARE 버튼을 눌러서 나오는 팝업창에서 제공하는 링크입니다.

원래 문제없이 작동되어야 합니다만, 아직까지 버그가 있고 제 Patch도 모든 상황을 고려한 것이 아니기 때문에, 약간의 불편함이 아직까지 존재합니다. 시간되시는 분께서 해당 게시글이 저장되는 순간의 근본적인 문제를 해결해 주시면 좋겠네요. ^ ^

JamesShin님의 댓글

profile_image
JamesShin 70.♡.183.180
2018-10-18 04:11
모든 Youtube와 Vimeo 영상 링크에 대해 정상적으로 처리되도록 좀 더 정교하게 수정한 버전을 공유합니다. 다음 링크를 참고하세요. ^ ^

http://eyoom.net/bbs/board.php?bo_table=bug&wr_id=218

버그&건의 이용 안내

버그&건의 게시판에 이용 중 버그가 있거나 개선점 등을 남겨주시면 참고하도록 하겠습니다.
이 게시판은 이윰넷 관리자가 일일이 응대 해 드리지는 않으니 참고해 주시기 바랍니다.
질문글은 꼭 질문과 답변 게시판 또는 1:1문의 게시판을 이용하여 주시기 바랍니다.

전체 456 건 - 26 페이지
번호
제목
글쓴이
날짜
조회
81
원본 이미지 보기와 로그인 안됩니다. 댓글 1개
AIMP
2018-11-01
15,229
AIMP
2018-11-01
80
시즌4 개인 테마 #001 (EB4_PERS_001) 구매자 입니다. 이윰님 한가지만 더 질문드리겠습니다.^… 댓글 3개
정다운
2018-10-31
15,343
정다운
2018-10-31
79
시즌4 개인 테마 #001 (EB4_PERS_001) 구매자 입니다. 버그내용 공유드립니다. 댓글 4개
정다운
2018-10-30
15,097
정다운
2018-10-30
78
PHP 7 사용하시나요? 댓글 1개
이우인
2018-10-30
13,636
이우인
2018-10-30
77
게시판 익명 기능이 안됩니다. 댓글 1개
AIMP
2018-10-24
15,173
AIMP
2018-10-24
76
설치해서 pc에서는 잘 뜨는데요 댓글 1개
브살렐
2018-10-22
22,797
브살렐
2018-10-22
75
시즌3의 패키지 업데이트 일정이 궁급합니다 ^^ 댓글 2개
red123
2018-10-22
19,042
red123
2018-10-22
74
[건의] 첨부파일 갯수가 많아지면...
닭발은세개
2018-10-22
16,650
닭발은세개
2018-10-22
73
최신글 설정을 변경하니 최신글이 사라집니다. 댓글 4개
닭발은세개
2018-10-20
19,384
닭발은세개
2018-10-20
72
Youtube와 Vimeo 동영상 재생 버그 수정 (2) 댓글 4개
JamesShin
2018-10-18
18,605
JamesShin
2018-10-18
열람
Youtube와 Vimeo 동영상을 Add-on으로 삽입하는 버그 수정 댓글 3개
JamesShin
2018-10-17
21,833
JamesShin
2018-10-17
70
커뮤니티 시즌4 버그 공유 댓글 1개
cygz
2018-10-14
15,316
cygz
2018-10-14
69
시즌4 커뮤니티 오류 댓글 2개
cygz
2018-10-13
14,191
cygz
2018-10-13
68
이윰 홈페이지 질문과답변 재설정시 포인트 추가 차감됩니다..ㅠㅠ
베이징
2018-10-10
15,355
베이징
2018-10-10
67
시즌4 커뮤니티 html 태그 오류 댓글 1개
cygz
2018-10-09
13,922
cygz
2018-10-09
사이트 내 전체검색