오류 메시지 플러그인 표시

이 항목에서는 기본 오류 메시지 동작을 수정하고 사용자 지정 오류 메시지를 만들고 오류를 전달하는 방법에 대해 알아 봅니다.

개요

오류 메시지 플러그인을 사용하면 플레이어가 오류 발생시 사용자에게 친숙한 메시지를 표시 할 수 있습니다. 기본 스타일 시트는 메시지를 비디오 요소 자체 위에 반투명 오버레이로 표시합니다. 기존 메시지 텍스트를 변경하고 자신 만의 스타일을 추가 할 수 있습니다. 원할 때 트리거되는 사용자 지정 메시지를 만들 수도 있습니다.

오류 메시지 플러그인

위 이미지에 표시된 오류 메시지는 플레이어를 잘못된src가치sources특성.

오류 메시지 플러그인은 기본 플러그인이며 Brightcove Player와 함께 자동으로로드됩니다. 그러나로드하지 않도록 선택할 수 있습니다. 이 플러그인이 없으면 제한된 오류 메시지가 표시되고 일부 오류는 브라우저 콘솔에만 나타납니다. 플레이어를 만들 때 기본 플러그인을로드하지 않는 방법에 대한 자세한 내용은플레이어 플러그인 개요문서.

시작하기

플레이어의 모든 인스턴스를 업데이트하려면 Studio의 Brightcove 플레이어 모듈을 사용하여 사용자 지정 플러그인을 구현할 수 있습니다. 이 접근 방식은 플레이어의 오류 메시지 플러그인을 업데이트하기 위해 다음 섹션에서 사용됩니다. 코드 페이지에서이 플러그인을 업데이트하도록 선택하면 플레이어의 해당 인스턴스에만 영향을줍니다.

페이지 코드에서 플러그인을 업데이트하려면 먼저 Brightcove Player에 대한 참조를 가져옵니다. 이 예에서 JavaScript에서 우리는myPlayer플레이어에 대한 참조를 할당합니다.

<video-js id="myPlayerID"
  data-video-id="4443311217001"
  data-account="1507807800001"
  data-player="default"
  data-embed="default"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function(){
    var myPlayer = this;

표준 오류

이 플러그인에는 런타임 오류 코드 값에 따라 표준 HTML5 동영상 오류에 대한 기본 오류 메시지 세트가 있습니다.

  • 오류 코드: 1
    • 유형 : 미디어가 중단되었습니다.
    • 헤드라인 : 비디오 다운로드가 취소되었습니다.
    • 메시지 : 미디어 재생을 중단했습니다.
  • 오류 코드: 2
    • 유형 : 미디어 네트워크
    • 헤드라인 : 비디오 연결이 끊어졌습니다. 인터넷에 연결되어 있는지 확인하십시오.
    • 메시지 : 네트워크 오류로 인해 미디어 다운로드가 부분적으로 실패했습니다. 현재 MP4 및/또는 프로그레시브 다운로드 비디오 형식에 가장 유용합니다. 참조알려진 문제자세한 내용은이 문서의 섹션을 참조하십시오.
  • 오류 코드: 3
    • 유형 : 미디어_오류 디코드
    • 헤드라인 : 동영상이 좋지 않거나 브라우저에서 재생할 수 없는 형식입니다.
    • 메시지 : 손상된 문제로 인해 또는 브라우저에서 지원하지 않는 미디어 사용 기능으로 인해 미디어 재생이 중단되었습니다.
  • 오류 코드: 4
    • 유형 : 지원되지 않는 미디어
    • 헤드라인 : 브라우저에서 이 비디오를 사용할 수 없거나 지원하지 않습니다.
    • 메시지 : 미디어를 로드할 수 없습니다. 서버 혹은 네트워크 오류 때문이거나 지원되지 않는 형식 때문일 수 있습니다.
  • 오류 코드: 5
    • 유형 : 암호화된 미디어
    • 헤드라인 : 시청하려는 동영상은 암호화되어 있으며 암호를 해독하는 방법을 모르겠습니다.
    • 메시지 : 미디어는 암호화되어 있으며 해독 할 키가 없습니다.

오류에 연관된 오류 코드가없는 경우 일반 메시지가 표시됩니다.

  • 오류 코드 : 알 수 없음
    • 메시지: 알 수 없는 미디어
    • 설명: 예상치 못한 문제가 발생했습니다. 잠시 후 다시 확인하고 다시 시도하십시오.

텍스트 재정의

변경할 수있는 오류 메시지에는 세 부분이 있습니다.

  • headline : 이것은 상단의 메시지 텍스트입니다.
  • type : 이것이에러 코드:본문.
  • message : 이것이기술적 세부 사항:본문.
오류 메시지 플러그인

아래 예는 오류 코드 값이 다음과 같은 표준 오류에 대한 메시지 텍스트를 재정의하는 방법을 보여줍니다. 4 . 속성은 다음과 같이 정의됩니다.

  • :plugins 이 속성에는 속성 및 값의 배열이 포함됩니다. 이 플러그인의 경우name값이있는 속성errors .
  • options : 이 속성은 데이터를 플러그인에 전달하는 데 사용됩니다.
  • :errors 이 속성은 업데이트 할 오류 코드를 정의합니다. 여기에서 메시지 텍스트를 재정의합니다. headline , type , 및message .

페이지 코드에서 사용

코드에 오류 스크립트를 포함하면 다음과 같이 메시지 텍스트를 재정의 할 수 있습니다.

myPlayer.errors({
  "errors": {
    "4": {
      "headline": "This is a custom error message",
      "type": "custom type",
      "message": "these are details"
    }
  }
});

사용자 정의 플러그인 사용

플레이어의 모든 인스턴스를 업데이트하려면 사용자 정의 플러그인을 만들고 Video Cloud Studio의 플레이어 모듈에서 플레이어에 추가하십시오. 플러그인에 대한 자세한 내용은플레이어 플러그인 구성문서.

표준 메시지 텍스트를 재정의하는 플러그인을 만들려면 다음 단계를 따르세요.

  1. Brightcove Player 플러그인 코드를 사용하여 인터넷 액세스 가능 위치에 저장된 JavaScript 파일을 만듭니다. 다음과 비슷하게 보이지만 고유 한 값이 있습니다. 

    videojs.registerPlugin('errorText', function() {
  var myPlayer = this;

  myPlayer.errors({
    "errors": {
      "4": {
        "headline": "The Live Stream will begin soon",
        "type": "CUSTOM_TYPE",
        "message": "Please come back, once the live event has begun!"
      }
    }
  });
});

  2. 에서플레이어모듈, 선택플러그인왼쪽 탐색에서.

  3. 확장플러그인 추가버튼을 클릭하고커스텀 플러그인 .

    맞춤형 플러그인
    맞춤형 플러그인

  4. 플러그인 세부 정보 페이지에서 다음에 대한 값을 추가합니다.

    • 플러그인 이름 -플러그인 이름
    • 자바 스크립트 URL -첫 번째 단계에서 플레이어 플러그인의 위치
    플러그인 세부 정보
    플러그인 세부 정보
  5. 저장버튼을 선택합니다.

  6. 플레이어를 게시합니다.

Brightcove 정의 사용자 지정 오류

사용자 지정 오류도 정의 할 수 있습니다. Brightcove는이 섹션에서 설명하는 여러 사용자 지정 오류를 정의했으며 다음 섹션에서 자세히 설명하는 사용자 지정 오류를 생성 할 수도 있습니다.

  • Brightcove는 사용자 지정 오류 코드 값을 문자열로 권장합니다. 제공된 오류 중 두 개는 역사적 이유로 음수를 사용하지만 영숫자 / 설명 문자열은 충돌 문제를 일으킬 가능성이 적습니다.
  • 사용자 지정 오류 메시지는 원하는 이름으로 지정할 수 있습니다. Brightcove는 유형이 다음으로 시작하도록 권장합니다. PLAYER_ERR표준화 된MEDIA_ERR혼란을 피하기 위해.
  • 자세히이 섹션의 뒷부분 , 사용자 지정 오류를 해제하거나 해제 할 수 있습니다.

5 개의 사용자 지정 오류 메시지가 참조로 추가되었습니다.

  • 오류 코드 : -1
    • 메시지: 플레이어 명예의
    • 설명: 비디오가 로드되지 않았습니다.
  • 오류 코드: -2
    • 메시지: 플레이어 시간 초과
    • 설명: 비디오를 다운로드하지 못 했습니다.
  • 오류 코드: 설정되지 않음
    • 메시지: 플레이어 도메인 제한
    • 설명: 이 동영상은 현재 도메인에서 재생할 수 없습니다.
  • 오류 코드: 설정되지 않음
    • 메시지: 플레이어 제한
    • 설명: 이 동영상은 현재 IP 주소로 제한됩니다.
  • 오류 코드: 설정되지 않음
    • 메시지: 플레이어 지리적으로 제한됨
    • 설명: 이 동영상은 현재 지역에서 재생이 제한됩니다.

사용자 정의 사용자 지정 오류

사용자 정의 오류를 정의 할 때 Brightcove는암호 . (위 섹션에서 이것이 Brightcove가 정의하는 최신 사용자 지정 오류로 수행하는 작업임을 알 수 있습니다.) 또한PLAYER_ERR_일관성을 위해 사용자 지정 오류에 접두사를 붙이지 만 물론 원하는대로 이름을 지정할 수 있습니다.

코드에 오류 스크립트를 포함하면 다음과 같이 사용자 지정 메시지를 추가 할 수 있습니다.

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  //custom error
  myPlayer.errors({
    "errors": {
      "PLAYER_ERR_AGE_GATE": {
        "headline": "You must be at least 18 years of age.",
        "message": "Content may be considered inappropriate for some users."
    }
  }
});

사용자 지정 오류 표시

사용자 지정 오류를 정의 할 때 Brightcove Player에 표시 할시기를 알려야합니다. 이렇게하려면 메시지를 표시해야하는시기를 결정하는 고유 한 코드를 만듭니다. 그런 다음error()다음과 같이 메시지를 표시하는 기능 :

//display custom message
var age_appropriate = false;
myPlayer.on("loadstart", function () {
  if(!age_appropriate) {
    myPlayer.error({code:'PLAYER_ERR_AGE_GATE'});
  }
});

여기age_appropriate변수가false하지만 사용자 지정 오류 메시지를 표시 할시기를 결정하려면 고유 한 코드를 추가해야합니다.

오류는 다음과 같이 사용자에게 표시됩니다.

사용자 정의 오류 메시지

사용자 지정 오류를 무시할 수 없도록 만들기

기본적으로 사용자 지정 오류 메시지는 비디오 뷰어에서 무시할 수 있습니다. 다음 스크린 샷에서 볼 수 있듯이확인버튼을 클릭하여 창을 닫을뿐만 아니라엑스오른쪽 상단 모서리에 있습니다.

무시할 수있는 오류 메시지

비디오 뷰어가 오류 메시지를 무시하도록 허용하지 않으려면 그렇게 할 수 있습니다. 전화 할 때error()방법, 당신은 설정할 수 있습니다dismiss재산false .

myPlayer.error({code:'age-gate-error', dismiss: false});

이 작업을 수행하면 오류를 해제 할 수없는 오류 메시지가 다음과 같이 나타납니다.

취소 할 수없는 오류 메시지

getAll () 메서드

당신은 사용할 수 있습니다getAll()특정 플레이어에 대해 등록 된 모든 오류를 확인하는 방법입니다. 당신은getAll()이후 언제든지 방법오류플러그인이 초기화되었습니다. 예를 들어player.errors()호출되었습니다. 메서드 호출의 예는 다음과 같습니다.

console.log('myPlayer.errors.getAll()',myPlayer.errors.getAll());

세부 사항을 위해 확장 된 일부 오류가있는 콘솔 표시의 예는 다음과 같습니다.

getAll 콘솔 디스플레이

on() 메소드

다음을 사용하여 on() 메서드를 사용하여 모든 오류를 수신할 수도 있습니다. 
myPlayer.on('error'), function () {
  ...
}

광고를 재생하고 있고 모든 오류를 포착하려면 다음을 사용해야 합니다.

myPlayer.on(['error','aderror')], function () {
  ...
}

디스패치 오류

개발 중에는 구성 변경이 성공했는지 테스트하기 위해 오류를 발송할 수 있습니다. 다음 코드 스 니펫에 표시된 것과 유사한 코드를 사용하여이를 수행 할 수 있습니다. 이 경우 선택한 시간에 오류를 전달할 수 있도록 버튼이 코드에 추가됩니다.

<video-js id="myPlayerID"
  data-video-id="4443311217001"
  data-account="1507807800001"
  data-player="default"
  data-embed="default"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
<p><button onclick="changeVideo()">change video</button></p>
<script type="text/javascript">
  var changeVideo;
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    changeVideo = function(){
      myPlayer.error({code:'2'});
    }
  });
</script>

오류 현지화

오류 플러그인은 여러 언어를 지원합니다. 언어 지원을 추가하려면 플러그인이로드 된 후 사용하려는 특정 언어 파일을로드합니다.

<script src="lang/es.js"></script>

그런 다음에 표시된 기술을 사용할 수 있습니다. 프로그래밍 방식으로 Brightcove Player 현지화오류 메시지를 현지화하는 문서.

기원전 카탈로그 오류

스크립트 블록의 일반ready()섹션에서 오류를 처리하면 문제가 발생할 수 있습니다. 예를 들어 플레이어가 준비되기 전에 bc-catalog-error 이벤트가 전달 될 수 있습니다. ready()섹션에서는 오류를 처리 할 수 없습니다. 이 문제는 지리적 필터링을 사용하거나 비디오가 비활성 상태이거나 비디오가 일정 범위를 벗어 났거나 다른 계정에있을 때 발생할 수 있습니다. 코드에 문제가 없다는 것을 알 수 있지만 브라우저에 따라 문제가 발생할 수 있으므로주의해야합니다.

예를 들어, 다음은 비디오가 비활성 상태 일 때 메시지를 표시하는 플러그인 코드입니다.

videojs.registerPlugin('inactiveErrorCheck', function() {
  var myPlayer = this;
  myPlayer.one('bc-catalog-error', function(){
    var specificError;
    myPlayer.errors({
      'errors': {
          'inactive-video-error': {
          'headline': 'The video you are trying to watch is inactive.',
          'dismiss': false
        }
      }
    });
    if (typeof(myPlayer.catalog.error) !== 'undefined') {
      specificError = myPlayer.catalog.error.data[0];
      if (specificError !== 'undefined' & specificError.error_code == "VIDEO_NOT_PLAYABLE") {
        myPlayer.error({code:'inactive-video-error'});
      };
    };
  });
});

과장된 오류율

보고 된 오류 수가 비합리적으로 보이는 경우 동일한 세션에 대해 중복 오류 이벤트가 발생하여이 과장된 오류율을 생성 할 수 있음을 아는 것이 중요합니다. Brightcove Player는 플레이어에게보고되는 정확한 시간과 동일한 수량으로 분석에 오류를 보냅니다. 예를 들어 플레이어에 미디어가없고 코드가play()천 번 연속으로 천 번 PLAYER_ERR_NO_SRC오류는 분석에보고됩니다.

분석을 왜곡하는 오류가 많은 세션이 몇 개있는 경우 실제 문제를 더 잘 이해하려면 다음 논리를 사용하는 것이 좋습니다.

number_of_sessions_with_errors / total_number_of_sessions
보다는 
count of errors/number of views

알려진 문제

  • HLS 소스를 재생할 때 네트워크 연결이 끊어진 후의 동작은 예상 한 것과 다를 수 있습니다. 세부 사항은 다음과 같습니다.
    • 버전 6.x의 Brightcove Player HLS 세그먼트는 끝없이 요청되며 MEDIA_ERR_NETWORK이제까지 나타납니다.
    • 일정 시간 (30 초 이상)이 지난 후 Brightcove Player 버전 5.x에서 a PLAYER_ERR_TIMEOUT오류가 나타납니다.
  • Windows 10 (Studio 및 공용 URL 모두)의 Edge에서 비디오를로드 할 때 MEDIA_ERR_SRC_NOT_SUPPORTED오류가 표시되고 비디오를 재생할 수 없습니다.

  • Android 장치 및 iPhone에서 오류 메시지에 대한 탭 이벤트가 상위 비디오 요소로 버블 링되지 않습니다. 즉, 오류 메시지가 나타나면 닫을 수 없습니다. 이 동작은 사용자가 전체 화면 모드에있는 경우 문제가 될 수 있습니다.이 상태를 벗어날 방법이 없기 때문입니다.

    이 문제는 현재 작업 중이며 향후 플레이어 릴리스에서 수정 될 예정입니다. 지금은 다음과 같은 해결 방법을 시도해 볼 수 있습니다.

    player.on("touchstart", function(e) {
  if (player.error_) {
    player.error(null);
    e.preventDefault();
  }
})

변경 로그

이제 오류 플러그인이 플레이어에 통합되었으며 플러그인 기능에 대한 변경 사항이 Brightcove Player 릴리스 정보에 보고됩니다.

이전 릴리스 정보는 여기에서 변경 로그를 참조하세요.