이 샘플에서는 설정된 시간이 지나면 오버레이 메시지가 표시됩니다. 이 샘플은 6 초 후에 오버레이를 표시하지만 시간을 구성 할 수 있습니다. 시청자가 지정된 시간 내에 메시지를 클릭하면 재생이 계속됩니다. 그렇지 않으면 비디오가 일시 중지됩니다. 이 기술은 콘텐츠가 긴 경우에 유용합니다. 이렇게하면 동영상 재생을 시작한 후 중단하지 않고 다른 작업을 수행하는 시청자에게 대역폭을 낭비하지 않아도됩니다.
이 샘플은 다음 위치에있는 오픈 소스 Video.js 플러그인을 사용합니다. https://github.com/TylerZubke/Videojs-AFK-Monitor . 이 문서의 샘플 코드는이 플러그인을 활용합니다.
펜보기아직도보고 계십니까?게시자 : Brightcove Learning Services ( 뿡 빵뀨 ) 의 위에 CodePen .
보기 GitHub의 완벽한 솔루션 .
위의 CodePen을 효과적으로 사용하기위한 몇 가지 팁은 다음과 같습니다.
다음은 권장되는 개발 순서입니다.
이러한 단계에 대한 자세한 내용은단계별 단계를 검토하십시오. 플러그인 개발가이드.
브라이트코브 플레이어에서 향상된 기능을 개발할 때 코드가 iframe 또는 In-Page embed 구현에 가장 적합한지 결정해야 합니다. 가장 좋은 방법은 iframe 구현과 함께 사용할 플러그인을 작성하는 것입니다. iframe 플레이어를 사용하면 다음과 같은 이점이 있습니다.
In-Page 임베드 플레이어를 통합하는 것이 더 복잡할 수 있지만 해당 구현을 중심으로 코드를 계획할 때가 있습니다. 일반화하려면이 방법은 포함 된 페이지가 플레이어와 통신해야 할 때 가장 좋습니다. 특히 다음은 몇 가지 예입니다.
최종 구현에서 iframe 코드를 사용하지 않더라도 JavaScript 용 플러그인과 CSS용 별도의 파일과 함께 In-Page embed 코드를 사용할 수 있습니다. 이렇게 하면 로직을 캡슐화하여 여러 플레이어에서 쉽게 사용할 수 있습니다.
| API 메소드 | API 이벤트 | 브라이트코브 플레이어 플러그인 |
|---|---|---|
| 추가 클래스 () | 사용자 | 오버레이 플러그인 |
| 제거 클래스 () | userinactive | |
| 일시 중지 () | ||
| 현재 시간 () | ||
| 하나() | ||
| on () | ||
| setTimeout () | ||
| hasClass () | ||
| 기간 () | ||
| 일시 중지됨 () | ||
| clearTimeout () | ||
| 시작했다() | ||
| 엘 () |
이 섹션에서는 플레이어 생성 시 필요한 특수 구성에 대해 자세히 설명합니다. 또한 페이지 내장 플레이어 구현 코드 이외에 페이지에 추가해야 하는 다른 HTML 요소에 대해서도 설명합니다.
이 샘플에 대해 만든 브라이트코브 플레이어에는 특별한 구성이 필요하지 않습니다.
타사 플러그인의 CSS 및 JavaScript 파일이 포함되어 있습니다.
이 응용 프로그램의 기본 논리는 다음과 같습니다.
useractive과userinactive이벤트는 시간을 추적하기 위해 감시됩니다.플러그인은 여기에 표시된대로 모범 사례를 사용하여 호출됩니다.
<script>
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
var options = {'showMessageAfter': 1000, 'pausePlayerAfter': 1000};
myPlayer.AFKMonitor(options);
});
</script>
다양한 옵션을 사용하여 플러그인을 사용자 지정할 수 있습니다. 세부 사항은 다음과 같습니다.
showMessageAfter (밀리 초)는 버튼이 표시되기까지의 시간을 결정합니다.
pausePlayerAfter (밀리 초 단위) 옵션도 유용합니다. 플레이어가 일시 중지되기 전에 사용자가 버튼을 클릭하도록 허용하는 시간입니다. 이를 통해 사용자는 비디오 재생을 중단하지 않고 버튼을 클릭 할 수 있습니다.CSS는 타사 플러그인의 일부입니다.
리포지토리를 복제하여 코드에 액세스 한 다음 인터넷에 액세스 할 수있는 위치에 배치하여 사용할 수 있습니다.
앞서 언급했듯이이 문서의 해당 GitHub 저장소에서 플러그인의 JavaScript 코드를 볼 수 있습니다. videojs.afk-monitor.js .
플러그인의 CSS 및 JavaScript 파일이 인터넷 액세스 가능 위치에 저장되어 있으면 플레이어와 함께 플러그인을 사용할 수 있습니다. Studio의 플레이어 모듈에서플레이어를선택한 다음Plugins섹션에서 CSS 및 JavaScript 파일에 URL을 추가하고 옵션이 필요한 경우이름및옵션을추가 할 수 있습니다.