Not long ago, the World Wide Web Consortium (W3C) declared the HTML5 specification complete. The latest version of the HTML standard has introduced a range of new functionality that is now supported natively in popular web browsers, including the <canvas> tag for graphic drawing using Javascript, structure tags for organizing the content on a web page, and improvements to web-based forms.

Of all the new features in HTML5, though, the one that has arguably attracted the most attention and generated the most excitement is the <video> tag. This sentiment was echoed by Paul Cotton, the W3C HTML working group co-chair, when the standard was recently declared complete:

“The single most important feature of HTML5 is probably the <video> tag since today’s web is rapidly moving to being more about video.”

The beauty of the <video> tag is that it enables the playback of on-demand video in web browsers without the need for 3rd-party add-ons like Flash and Silverlight. Over the past few years as HTML5 was being developed, browser vendors, device manufacturers, and media companies like Netflix and YouTube threw their weight behind HTML5 video, and an ecosystem of HTML5 video players subsequently emerged.

페이지의 상자: 기존의 온라인 동영상 시청 경험

하지만 흥미로운 점은 지난 몇 년 동안 HTML5 동영상이 크게 성장했음에도 불구하고 온라인 동영상 시청의 사용자 경험은 크게 변하지 않았다는 점입니다. 대부분의 경우 온라인 동영상은 여전히 "웹 페이지에 삽입된 작은 상자"를 의미합니다.

그렇다고 기존 HTML5 동영상 플레이어가 세련되고 기능이 뛰어나지 않다는 것은 아닙니다. VideoJS는 매끄러운 외관과 작은 크기와 속도로 유명합니다. JWPlayer는 플러그인을 통한 확장성으로 유명합니다. 하지만 이러한 동영상 플레이어와 이를 사용하는 동영상 플랫폼은 모두 2005년 유튜브의 기반이 된 기본 디자인, 즉 다른 콘텐츠로 둘러싸인 웹 페이지에 하나의 동영상 스트림이 설정되어 있는 것과 동일한 기본 디자인을 기반으로 구축되었습니다.

2007년(왼쪽), 2014년(가운데), 2019년(오른쪽) YouTube의 '페이지에 상자' 동영상 재생 환경.

 

온라인 동영상 재생 경험을 재고할 때입니다.

2005년 YouTube가 출시되었을 당시 미국에서는 초고속 인터넷이 전화 접속 연결에서 막 시장 점유율 대부분을 차지했고, 미국 내 광대역 연결의 실제 다운로드 속도 중앙값은 1.5~2Mbps였습니다. 대역폭이 부족한 상황에서 웹 페이지의 작은 상자는 동영상 콘텐츠를 스트리밍하는 효율적인 방법으로 적합했습니다.

14년 전으로 돌아가 보겠습니다. 미국의 평균 광대역 속도는 이제 90Mbps를 넘어섰고, 광대역 제공업체는 소비자에게 50, 150, 최대 1000Mbps 연결을 기본으로 제공하며, 최대 50Mbps의 속도로 무료 연결을 제공하는 커피숍(주로 스타벅스)을 찾는 것이 점점 더 보편화되고 있습니다. 대역폭 비용이 제로화되는 추세에 있는 지금, 온라인 동영상 시청 방식에 대해 다시 생각해 볼 수 있습니다.

보다 몰입감 있고 매력적인 동영상 시청 환경은 어떤 모습일까요? 엔터테인먼트용 동영상의 경우 1080p 이상의 해상도를 갖춘 '더 큰 화면'이 좋은 출발점입니다. 그러나 교육용 녹화, 비디오 프레젠테이션, 교육용 비디오, 강의, 제품 시연, 타운홀 미팅 등 기업과 대학에서 사용하는 비디오 유형에 따라 몰입감 있는 비디오 환경을 위한 요구 사항이 다릅니다.

특히, 거의 모든 비디오 프레젠테이션에는 발표자와 콘텐츠의 두 가지 부분이 있다는 점을 고려하는 것이 중요합니다. 이상적으로는 라이브 청중석에 있을 때처럼 두 가지를 동시에 시청할 수 있어야 합니다. 하지만 기존의 '페이지의 상자' 환경에서는 둘 중 하나만 시청해야 하며, 어느 쪽을 언제 시청할지 제어할 수 없습니다. 이는 프레젠테이션을 녹화한 비디오그래퍼가 제어할 수 있습니다.

새로운 접근 방식: 스마트 동기화 기능을 갖춘 멀티스트림 HTML5 비디오 플레이어

비즈니스 및 학술 비디오 프레젠테이션, 스크린캐스트, 라이브 웹캐스트 및 기타 비디오 콘텐츠의 요구를 충족하기 위해 Panopto는 회의실, 강의실 또는 이사회실에 앉아 프레젠테이션을 실시간으로 시청하는 것처럼 발표자와 콘텐츠를 동기화된 화면으로 볼 수 있는 고유한 비디오 플레이어를 만들었습니다.

스마트 동기화 기능을 사용하면 발표자와 발표자의 프레젠테이션을 동시에 볼 수 있습니다. 재생 중 언제든지 비디오 피드를 최대화할 수 있습니다.

여러 동영상 스트림을 동기화하는 기능을 스마트 동기화라고 부릅니다. 또한 동영상 플레이어와 스마트 동기화 기능은 HTML5에서 완전히 작동하도록 설계되었습니다.

유튜브가 아닌 모든 것을 제공합니다: Panopto의 동영상 플랫폼 개요 및 데모 보기 >>

 

스마트 동기화 기능은 동영상 플랫폼에 쉽게 추가할 수 있는 기능이 아닙니다. 여러 비디오 피드 간에 1초 미만의 동기화를 달성하려면 소프트웨어의 모든 측면에 해당 기능이 내장되어 있어야 합니다. 다음은 파놉토에서 스마트 동기화를 가능하게 하는 세 가지 요소입니다:

• 녹화 및 라이브 웹캐스팅 동영상에 사용되는 클라이언트 소프트웨어는 여러 개의 동영상 피드를 인식하고 효율적으로 캡처합니다. 이러한 비디오 피드는 단일 PC에서 시작하거나 PC, Mac, 모바일 디바이스로 구성된 분산 네트워크에서 시작될 수 있습니다. 초당 최대 60프레임의 720p 또는 1080p 비디오의 다중 피드가 지원됩니다.
• 당사의 웹 서비스와 데이터 모델은 피드 간의 품질 차이, 다양한 비디오 형식과 프레임 속도, 각 비디오 피드의 시작 및 중지 시간, 캡처 지점(카메라, 컴퓨터 모니터 또는 기타 비디오 장치)에서 처리 지점(Panopto 서버)까지의 다양한 지연 시간 변수를 고려하여 이러한 비디오 피드를 자동으로 동기화합니다.
• HTML5 기반 동영상 플레이어는 지연 시간이 길 수 있는 네트워크에서 여러 개의 동영상 피드를 동시에 재생할 때 훨씬 더 복잡한 버퍼링 문제를 해결합니다.

교육용 동영상과 모든 형태의 비디오 프레젠테이션에서 멀티스트림 비디오 재생은 앞으로 몇 년 안에 새로운 기준이 될 것이며, HTML5 비디오와 스마트 동기화를 통해 이 기능을 제공함으로써 Panopto는 가장 광범위한 브라우저와 디바이스에서 프리미엄 비디오 시청 경험을 제공할 수 있다고 생각합니다.

모든 비디오 피드를 동기화하여 재생할 수 있습니다. 이 예에서는 비디오 카메라가 iPhone에서 캡처한 현미경 비디오와 자동으로 동기화됩니다.

 

Panopto의 HTML5 동영상 플레이어에 대해 자세히 알아보기
기업이나 대학에서 내부 커뮤니케이션과 지식 공유를 위해 비디오를 더 많이 활용하고 최신 인터넷 표준에 기반한 최첨단 비디오 플랫폼을 찾고 있다면 지금 바로 Panopto 무료 평가판을 요청하세요.