AWS에 애니메이션을 게시하려면

8689 단어 비디오AWSHLS비디오 게시ElementalMediaConvert
사이트에 동영상을 삽입해야 하는데 실제로 해 봤기 때문에 그 메모가 됐어요.

대상

  • 자신의 사이트에 애니메이션을 삽입하고 싶은 사람
  • WEB 서버에 애니메이션을 배치하지 않으려는 경우

    • 할 일

  • 주문형 편지
    • Youtube처럼 좋아하는 시간에 애니메이션 보기
  • 본 사이트에서 S3의 운동 이미지 파일을 읽고 재생

    • 하지 않는 일

  • 라이브 방송
  • 비디오의 자동 변환

    • 프로비저닝



    사용자의 시각으로 가면 사이트를 통해 클라우드 Front를 통해 애니메이션 파일을 열람할 수 있다.
    또한 AWS 내에서 애니메이션을 S3에 업로드하고 ElementalMediaConvert를 통해 애니메이션을 변환합니다.
    나중에 자세히 설명합니다.

    비용


    이 구성은 약간의 비용이 필요합니다.영상 사이즈는 작게.

    절차.


    S3 제작통



    현재로서는 특별히 세부적인 설정이 없다.구간 이름을 입력하여 만드세요.
    제작 후 애니메이션을 저장하기 위해 input 폴더와 output 폴더를 만듭니다.

    CloudFront 생성


    통을 제작하면 클라우드 프론트가 설정됩니다.
    CloudFront 화면으로 이동하여 Create Distribution 을 클릭합니다.

    그런 다음 Get Started 를 클릭합니다.

    Origin Domain Namen: 방금 만든 S3의 구간을 선택합니다.
    Restrict Bucket Access:Yes
    Origin Access Identity:Create a New Identity
    Grant Read Permissions on Bucket:Yes, Update Bucket Policy
    Viewer Protocol Policy:Redirect HTTP to HTTPS
    상술한 것 이외의 것은 모두 기본 상태라도 상관없다.

    Status가 "In Progress"라면 문제없습니다.또한 S3에 세그먼트 정책이 부여되었는지 확인하십시오.

    애니메이션 파일(HLS) 제작


    그런 다음 HLS 파일을 생성합니다.
    HLSV-CUBE 기사에 관해서는 비교적 이해하기 쉽다.
    쉽게 말하면 HTTP 스트리밍을 위한 파일 그룹입니다.
    AWS Elemental Media Convert를 사용하여 이것을 만듭니다.

    먼저 S3에서 애니메이션을 구성합니다.S3 섹션의 input 디렉토리에 비디오 파일을 업로드하십시오.비디오 사이즈는 가벼울수록 저렴합니다.

    AWS Elemental MediaConvert 화면에서 작업 메뉴를 열고 작업 작성을 클릭합니다.

    입력 1의 입력 파일 URL에 방금 업로드한 비디오 파일의 S3 URL을 입력합니다.

    왼쪽 메뉴의 출력 그룹 오른쪽에 있는 추가 버튼을 클릭합니다.그리고 위에서 사용한 팝업은 Apple HLS를 선택하고 Select를 클릭하십시오.

    보낼 movie-out 폴더를 선택합니다.

    출력 그룹에 H.264 ~ 라고 쓰여 있는 곳을 선택하십시오.그리고 이름 수식자에 임의의 이름을 입력하세요.반환 후 문서의 최후는 수여될 것이다.

    그리고 비트레이트를 입력하세요.이번에는 기존 영상이 467kbps였기 때문에 500kbps로 설정했다.
    애니메이션 파일의 속성에서 참조할 수 있습니다.

    작업 설정에서 설정 메뉴를 엽니다.S3 섹션에 대한 액세스 권한이 있는 IAM 역할을 선택하십시오.

    제작 버튼을 누르면 임무의 개요가 나온다.잠시 후 S3에서 비디오 파일이 생성됩니다.

    Video.비디오 재생


    외부 서버에서 비디오를 포함한다고 가정한 HTML 파일을 만듭니다.
    또 동영상을 재생하기 위해서다.js를 사용합니다.다음 코드 index를 복사합니다.파일로 로컬로 저장하십시오.
    index.html
    <html>
  <head>
    <title>VHS de HLS</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
  </head>
  <body>
    <video-js id=example-video width=1280 height=720 class="vjs-default-skin" controls>
      <source
         src="CloudFrontのURL/m3u8ファイルのS3パス"
         type="application/x-mpegURL">
    </video-js>
    <script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
    <script>
      var player = videojs('example-video');
    </script>
  </body>
</html>
    소스의 src를 바꾸십시오.또한 m3u8 파일은 Elemental Media Convert에서 이름 코스메틱 이름을 지정하십시오.
    예제
    https://xxxxxxxxxxxx.cloudfront.net/movie-out/ファイル名test.m3u8

    CROS 설정


    아까 만든 index.파일을 연 후에 나는 애니메이션을 잘 읽을 수 없다고 느꼈다.크롬은 F12를 눌러 개발자 도구를 열어 확인해 보세요.
    Access to XMLHttpRequest at 'URL' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.및 내보내기.CORS를 설정하지 않아 발생한 오류입니다.
    따라서 S3에서 CORS 설정을 수행합니다.

    다음을 CORS로 설정하십시오.
    <?xml version="1.0" encoding="UTF-8"?>
    <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    </CORSConfiguration>
    자신의 서비스 등에서 사용한다면 Allowed Origin에서 사이트의 도메인 이름을 지정하십시오.
    저장을 누르면 index를 다시 저장합니다.확인해 볼게요.

    귀엽네.

    최후


    AWS를 이용한 관리 시스템을 통해 영상을 HTTP 통신용으로 전환하고 S3를 영상 서버로 구축할 수 있다.
    그리고 앞으로 열람을 제한하는 일도 하고 싶다.
    Arrays.binarySearch() 방법
    컴파일러를 위한makeprg 사용자 정의 (또는 실행 방법: Dispatch zeus rspec)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage