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

    비디오 Sitemap 생성기

    이 샘플은 동영상 Sitemap을 생성하는 방법을 CMS API.

    소개

    이 응용 프로그램을 사용하기 전에, 당신은 동영상 콘텐츠를 색인 생성 가능하게 만들기 동영상 Sitemap의 목적과 전략을 사용하여 동영상 Sitemap의 생성을 자동화하는 전략에 대해 더 잘 이해할 수 있습니다. CMS API. 사이트 맵에 대한 XML 생성은 매우 간단합니다. 가장 큰 문제는 각 동영상에 대해 고유 한 URL을 포함해야한다는 것입니다. CMS API 이 정보에 자동으로 액세스 할 수 없습니다. 이를 극복하기 위해 할 수있는 몇 가지 방법이 있습니다.

    1. 비디오가 게시 된 URL을 비디오 메타 데이터에 추가하십시오. 이 작업을 수행하는 가장 간단한 방법은 사용자 정의 메타 데이터 필드 에 URL을 저장합니다.
    2. URL 매개 변수를 사용하여 비디오를 지정하여 단일 페이지에 비디오를 호스트합니다. id or reference_id 페이지의 맞춤 자바 스크립트가 동영상을 플레이어에로드하는 데 사용됩니다.

      페이지에 대한 특정 URL 매개 변수의 값을 가져 오는 다양한 방법이 있습니다. 다음은 몇 가지 샘플 앱에서 사용하는 함수입니다.

                  /**
                   * gets value of a URL param on current page URL if exists
                   * @param {string} name the param you want the value of
                   * @return {string} result value of param if exists or null
                   */
                  function getURLparam(name) {
                      var regex,
                          results;
                      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
                      regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
                      results = regex.exec(location.search);
                      return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
                  }

      일단 당신이 id or reference_id, 플레이어에 추가해야합니다. 그렇게하는 방법은 표준을 사용하고 있는지 여부에 달려 있습니다 (iframe) 또는 고급 (인 페이지) player 소스 코드. 아마도 가장 간단하고 안전한 방법은 플레이어를 동적으로로드 (또는 어떤 이유로 ID가있는 URL 매개 변수가없는 경우).

      이 목적으로 사용할 수있는 HTML 한 페이지의 예는 단일 페이지 섹션을 참조하십시오.

    아래의 샘플 앱을 사용하면 두 가지 방법 중 하나를 사용할 수 있습니다. 적절한 필드에 정보를 입력하여 알려 주면됩니다.

    샘플 앱에 대한 참고 사항 :

    1. 앱이 Analytics API 모든 시간대의 동영상보기를 제공하므로 제공하는 클라이언트 자격 증명에 Analytics API앱이 실패합니다.
    2. 포함될 수있는 동영상의 최대 개수는 50,000이며 50 비디오보다 적을 수있는 파일 크기에 대한 50,000mb 제한도 있습니다. 포함 할 동영상보다 더 많은 동영상이있는 경우 여러 개의 사이트 맵으로 나누고 사이트 맵 색인 파일을 추가해야합니다. 만나다 Google의 사이트 맵 문서 문의주시기 바랍니다.
    3. 샘플 앱에서 생성 된 Sitemap에는 동영상의 선택적 태그 중 일부가 포함되어 있지 않습니다 (위에서 언급 한 Google 문서를 참조하십시오). 포함 시키려면이 앱에서 코드를 가져 와서 수정 된 버전을 만드십시오. 자바 스크립트 및 HTML 코드에는 사용자가해야 할 일을 나타내는 주석이 있습니다.
      선택 태그 포함 여부
      태그 포함 태그가 포함되지 않음
      • player_loc
      • 지속
      • 만료 _ 날짜 (해당되는 경우)
      • 조회수
      • 발행일
      • 가족 친화적 인
      • (지역) 제한 (해당하는 경우)
      • content_loc
      • 평가
      • 플랫폼
      • 가격
      • requires_subscription
      • 업 로더
      • live
      • 태그
      • 범주
      • gallery_loc
    4. 동영상이 다음과 같이 필요한 조건을 충족하지 않으면 건너 뜁니다.
      • 동영상 페이지 URL을 맞춤 입력란에 저장하는 경우 해당 맞춤 입력란에 값이없는 동영상
      • 단일 페이지를 사용하여 동영상을 호스팅하고 reference_id 동영상을 포함 시키려면 동영상에 reference_id
      • 동영상에 미리보기 이미지가 없습니다.
      • 비디오에 MP4 변환이 없습니다.
      • 동영상이 비활성 상태입니다.
      • 비디오는 미래의 날짜에 시작될 예정입니다.
      • 동영상이 현재 날짜 이전에 종료되도록 예약되었습니다.

      건너 뛴 비디오의 경우 브라우저 콘솔에 이유와 비디오 ID를 나타내는 메시지를 기록합니다.

    마지막으로 사이트 맵을 생성 한 후에 사이트 맵의 유효성을 검사하려면 웹에 몇 가지 무료 도구가 있습니다. 예를 들면 다음과 같습니다.

    무료 Sitemap 검사기

    자격 증명 가져 오기

    을 사용하려면 CMS API 적절한 자격 증명이 필요합니다.

    대부분의 경우 자격증 명을 얻는 가장 쉬운 방법은 Studio Admin API 인증 섹션을 이용하는 것입니다 (계정에 대한 관리자 권한이 필요함). 만나다 API 인증 자격 증명 관리 자세한 내용은 대부분의 경우, 모든 사용자에게 권한을 부여하기를 원할 것입니다. CMS API 작업 :

    CMS API 권한
    CMS API 권한

    필요한 사용 권한을 Studio에서 사용할 수 없거나 사용자가 직접 사용하도록 설정하려는 경우 OAuth API, 당신이 선택한 것을 사용하십시오. 클라이언트 자격증 명 얻기 아래에 나열된 문서. 어느 옵션을 선택하든 올바른 작업 권한을 요청해야합니다. cURL, Postman 또는 온라인 앱에서 다음을 사용하여 CMS API:

                  "operations": [
                    "video-cloud/video/all",
                    "video-cloud/playlist/all",
                    "video-cloud/sharing-relationships/all",
                    "video-cloud/notifications/all"
                    "video-cloud/analytics/read"
                  ]

    샘플 앱

    소스 코드

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

    샘플 앱

    펜보기 CMS API 샘플 : 비디오 Sitemap 생성기 Brightcove 학습 서비스 제공 (@rcrooks1969)에 코드 펜.

    CodePen 사용

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

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

    단일 페이지

    위에서 언급 한 것처럼 모든 비디오의 위치에 사용할 수있는 HTML 페이지를 만들 수 있습니다. 앱은 페이지에서 사용할 동영상 ID를 정의하는 검색어 매개 변수를 사용하여 페이지의 URL을 변경합니다. 예를 들어, 앱은 동영상 페이지의 위치에 대해 다음과 비슷한 위치 URL이 포함 된 JSON을 생성합니다.

                <loc>
                    <![CDATA[http://my.site.net/videos.html?videoId=5984663997001]]>
                </loc>
                ...
                <loc>
                    <![CDATA[http://my.site.net/videos.html?videoId=5982130568001]]>
                </loc>

    비디오 ID 만 변경됩니다.

    실제 HTML 페이지는 videoId URL 매개 변수는 URL에서 얻은 비디오 ID를 사용하여 플레이어를 동적으로 생성합니다. 전체 HTML 페이지는 다음과 같이 나타납니다.

                <!doctype html>
                <html>
                
                <head>
                  <meta charset="UTF-8">
                  <title>Load Player Dynamically from URL Param</title>
                  <!-- Page styles -->
                  <style>
                    .video-js {
                      width: 640px;
                      height: 360px;
                    }
                  </style>
                </head>
                
                <body>
                  <div id="placeHolder"></div>
                  <!-- custom script -->
                  <script type="text/JavaScript">
                    var myPlayer,
                      playerHTML,
                      playerData = {},
                      theURLParam = '',
                      // Set the account ID to your account
                      myAccountId = '1507807800001';
                
                     // Read URL param for video ID
                    theURLParam = geturlparam('videoId');
                
                    // Assign data for the player instantiation
                    playerData = {
                      'accountId': myAccountId,
                      'playerId': 'default',
                      'videoId': theURLParam
                    };
                
                    // Call function that builds player
                    addPlayer();
                
                    /**
                     * gets value of a url param on current page url if exists
                     * @param {string} name the param you want the value of
                     * @return {string} result value of param if exists or null
                     */
                    function geturlparam(name) {
                      var regex,
                        results;
                      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
                      regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
                      results = regex.exec(location.search);
                      return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
                    };
                
                    // Dynamically adds player to page
                    function addPlayer() {
                      // Dynamically build the player video element
                      playerHTML = '<video-js id=\"myPlayerID\" data-video-id=\"' + playerData.videoId + '\"  data-account=\"' + playerData.accountId + '\" data-player=\"' + playerData.playerId + '\" data-embed=\"default\" class=\"video-js\" controls></video-js>';
                      // Inject the player code into the DOM
                      document.getElementById('placeHolder').innerHTML = playerHTML;
                      // Add and execute the player script tag
                      var s = document.createElement('script');
                      s.src = "https://players.brightcove.net/" + playerData.accountId + "/" + playerData.playerId + "_default/index.min.js";
                      document.body.appendChild(s);
                      s.onload = callback;
                    }
                
                     // Initialize the player and start the video
                    function callback() {
                      myPlayer = bc('myPlayerID');
                      // Can also use the following to assign a player instance to the variable if you choose not to use IDs for elements directly
                      // myPlayer = bc(document.getElementById('myPlayerID'));
                      myPlayer.on('loadedmetadata', function () {
                        // Mute the audio track, if there is one, so video will autoplay on button click
                        myPlayer.muted(true);
                        myPlayer.play();
                      })
                    }
                  </script>
                </body>
                
                </html>

    귀하의 계좌 번호를 입력해야합니다. 코드에 대한 전체 설명은 Brightcove Player 샘플 : 로딩 Player 역동적으로 문서를 참조하시기 바랍니다.

    프록시 코드

    이 페이지에서 샘플 앱을 직접 빌드하려면 자신의 프록시를 생성하고 호스팅해야합니다. (Brightcove Learning Services에서 사용하는 프록시는 Brightcove 도메인의 요청 만 수락합니다.) 샘플 프록시는 우리가 사용하는 프록시와 매우 유사하지만 Brightcove가 아닌 도메인의 요청을 차단하는 검사가없는 곳에서 찾을 수 있습니다. 이 GitHub 저장소. 당신은 또한 거기에 그것을 사용하기위한 기본 지침과 프록시 주위에 애플 리케이션을 구축하기위한보다 정교한 안내서를 찾을 것입니다. REST API 사용.


    페이지 최종 업데이트 28 Sep 2020