L.Stories: 2020년 중,하반기부터 구글 블로그 새 디자인 적용시 지원하지 않는 source 태그.

2021년 3월 24일 수요일

2020년 중,하반기부터 구글 블로그 새 디자인 적용시 지원하지 않는 source 태그.

2020년 중반 부터 구글 블로그가 새 디자인으로 바뀌면서, 구글 블로그 내 "WEBM " 반응형 웹페이지에 삽입된 영상 태그 중 soruce 태그가 작동하지 않게 변경 되었습니다.

*구글 블로그 사용자는 "BR" 태그의 악명을 잘 알 것입니다.
(매번 삭제하느라 얼마나 신경 쓰이는지 말이죠)

*주 : 새 디자인으로 인한 html 'source' 태그를 반드시 바꾸어야 하는 것은 아닙니다.

살펴 보시죠.

뉴 블로그 디자인 변경으로, 기존 소스 태그가 정상적으로 동작하지 않게 되었습니다.
(이 경고를 무시해도 웹페이지가 잘못되는 것은 아니지만, 여간 신경 쓰이는 것이 아닙니다)

위 그림처럼 "div 나 video"태그의 문제가 아닌, source 태그의 문제임을 알게 되었습니다.
(소스 태그를 삭제하고 비디오 태그 안에 영상 주소를 넣으면 문제가 해결 됩니다)

아래는 반응형 웹페이지 구글 블로그 내 html 태그 입니다.

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

<source src="https://drive.google.com/uc?export=download&id=1UahNUnh96a73VVd37ogKvQ-f0SUjYeAv" type="video/webm"></source>

</video></div>

</div>

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

위는, 기존 구 블로그에서 WEBM 파일 블로그내 삽입 영상이 구글 블로그에서 동작이 가능하고, 소스 태그가 작동했던 예입니다.
(여전히 동작하지만, HTML 소스를 편집하면 태그를 지원하지 않는 경고를 볼 수 있습니다)

새 블로그 디자인으로 변경 된 후, 위와 같이 사용하면 HTML에서 지원하지 않습니다.
따라서, 새 디자인에서 적용 가능한 변경 방법은...

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

<video 360="" autoplay="" loop="" muted="" width="640 height=" src="https://drive.google.com/uc?export=download&id=1UahNUnh96a73VVd37ogKvQ-f0SUjYeAv" type="video/webm">

<source></source> -- 소스 태그 삭제

</video></div>

</div>

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

위 그림처럼, video 소스에 붙혀 묶고 소스 태그를 삭제하여 변경하면 될 것입니다.

*기타 태그 기능

경우에 따라 자동 플레이를 원하지 않는다면, "controls" 태그를 삽입하십시오.
(예 : autoplay="" 를 controls="" 로 바꿉니다)

아래 WEBM 영상은 변경 후, 적용한 태그 작동 실험 예일 뿐 영상 내용을 언급하는 것은 아닙니다.

이 WEBM 영상은 모바일에 최적화 되지 않았습니다.
(원활한 시청을 위해 불필요시 화면을 정지 시켜 주십시오)

[잡담]

개인적으로, 구글 블로그가 변경이 있을 때 마다 모든 게시물을 재수정하다가 이제는 거의 포기 상태입니다.

1. 게시물 정렬 사건 - 정렬 태그가 좌측에서 중앙으로 바꾸어야 할 이벤트가 생겼을 때.
(디자인 변경)

2. BR 태그 일일이 고칠 때 - 이제는 적응되어 버렸어.
(자동 생성되는 div 태그와 함께 정말 피곤하게 한다)

3. 이번처럼 비디오 태그 일부가 잠수함 패치로 지원하지 않을 때.

(그 많은 것들은 도대체 언제 고치지?)

4. 반응형 웹페이지(스마트폰 이용시)문제로, 모든 게시물 영상을 다 바꾸어야 했을 때.