지원 고객 지원 문의 | 시스템 상태 시스템 상태
페이지 내용

    플레이어 표시

    이 예에서는 계정 사용자 이름, ID 및 암호를 입력합니다. 버튼의 클릭에, HTML 정렬되지 않은 목록은 계정 플레이어를 표시합니다. 각 플레이어마다 플레이어 ID, 이름, 생성 날짜가 표시됩니다.

    개요

    이 샘플 앱의 아키텍처와 관련된 일반적인 접근 방식, 특히 인증 및 AJAX 구현에 대한 자세한 내용은HttpRequest를 사용하는 예제를참조하십시오.

    앱 아키텍처

    이 앱의 상위 수준 응용 프로그램 논리는 다음과 같습니다.

    1. 계정에 액세스하는 데 필요한 사용자 데이터 수집
    2. 버튼 클릭시 AJAX 호출을 수행하여 모든 플레이어 정보를 검색합니다.
    3. AJAX 호출 성공에서 다음을 수행하십시오.
      • HTML 페이지에 JSON 응답 데이터 삽입
      • 정렬 된 목록에 플레이어 정보를 표시하는 HTML을 동적으로 빌드하고이를 HTML 페이지에 삽입하십시오.

    샘플 앱

    소스 코드

    GitHub 저장소에서이샘플과 관련된 모든 코드를 찾으십시오.

    샘플 앱

    펜보기디스플레이 플레이어게시자 : Brightcove Learning Services ( 뿡 빵뀨 ) 의 위에 CodePen .

    코드펜 사용

    위의 CodePen을 효과적으로 사용하기위한 몇 가지 팁은 다음과 같습니다.

    • 결과버튼을 클릭하여 플레이어의 실제 표시를 토글합니다.
    • HTML/CSS/JS버튼을 클릭하여 코드 유형 중 하나를 표시합니다.
    • 오른쪽 상단모서리에있는 CodePen에서 편집을클릭하여이 CodePen을 자신의 계정으로 포크하십시오.
    • GitHub 저장소에서이샘플과 관련된 모든 코드를 찾으십시오.

    프록시 코드

    이 페이지에서 자신의 버전을 샘플 응용 프로그램을 빌드하려면 자신의 프록시를 만들고 호스팅해야합니다. (브라이트코브 학습 서비스에서 사용하는 프록시는 브라이트코브 도메인의 요청만 허용합니다.) 우리가 사용하는 것과 매우 유사하지만 비 BrightCove 도메인의 요청을 차단하는 검사 없이이 GitHub 리포지토리에서찾을 수 있습니다. 또한 거기서 사용하기위한 기본 지침과REST API 사용에서프록시 주위에 앱을 빌드하는 방법에 대한 자세한 안내를 찾을 수 있습니다.