Azure Media Player 전체 설정

아티클
07/16/2024

Azure Media Player는 쉽게 설정할 수 있습니다. Azure Media Services 계정에서 미디어 콘텐츠의 기본 재생을 바로 가져오는 데는 몇 분밖에 걸리지 않습니다. 샘플 릴리스의 샘플 디렉터리에도 제공됩니다.

1단계: 페이지 헤드에 JavaScript 및 CSS 파일 포함

Azure Media Player를 사용하면 CDN 호스팅 버전에서 스크립트에 액세스할 수 있습니다. 이제 JavaScript를 <head>대신 최종 본문 태그 <body> 앞에 두는 것이 좋지만 Azure Media Player에는 비디오 태그를 유효한 요소로 간주하기 위해 이전 IE 버전에 대한 머리 안에 있어야 하는 'HTML5 Shiv'가 포함되어 있습니다.

메모

Modernizr 같은 HTML5 shiv를 이미 사용하고 있는 경우 Azure Media Player JavaScript를 어디서나 포함할 수 있습니다. 그러나 Modernizr 버전에 비디오용 shiv가 포함되어 있는지 확인합니다.

CDN 버전

    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    <script src= "//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>

중요하다

요청 시 변경될 수 있으므로 프로덕션에서 버전을 사용하지 . latest Azure Media Player 버전으로 대체합니다. 예를 들어 latest2.1.1대체합니다. Azure Media Player 버전은여기에서 쿼리할 수 있습니다.

메모

1.2.0 릴리스이므로 더 이상 대체 기술에 위치를 포함할 필요가 없습니다(azuremediaplayer.min.js 파일의 상대 경로에서 위치가 자동으로 선택됨). 위의 스크립트 뒤의 <head> 다음 스크립트를 추가하여 대체 기술의 위치를 수정할 수 있습니다.

메모

Flash 및 Silverlight 플러그 인의 특성으로 인해 swf 및 xap 파일은 중요한 정보나 데이터 없이 도메인에서 호스트되어야 합니다. 이 파일은 Azure CDN 호스팅 버전에서 자동으로 처리됩니다.

    <script>
      amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
      amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
    </script>

2단계: 페이지에 HTML5 비디오 태그 추가

Azure Media Player를 사용하면 HTML5 비디오 태그를 사용하여 비디오를 포함할 수 있습니다. 그러면 Azure Media Player는 태그를 읽고 HTML5 비디오를 지원하는 브라우저뿐만 아니라 모든 브라우저에서 작동합니다. 기본 태그 외에도 Azure Media Player에는 몇 가지 추가 조각이 필요합니다.

<video> <data-setup> 특성은 페이지가 준비되면 자동으로 비디오를 설정하고 특성에서 JSON 형식으로 읽도록 Azure Media Player에 지시합니다.
id 특성: 동일한 페이지의 모든 비디오에 대해 사용하고 고유해야 합니다.
class 특성에는 다음 두 가지 클래스가 포함됩니다.
- azuremediaplayer Azure Media Player UI 기능에 필요한 스타일을 적용합니다.
- amp-default-skin HTML5 컨트롤에 기본 스킨을 적용합니다.
<source> 두 개의 필수 특성을 포함합니다.
- src 특성에는 Azure Media Services의 *.ism/매니페스트 파일이 추가되고, Azure Media Player는 DASH, SMOOTH 및 HLS에 대한 URL을 플레이어에 자동으로 추가합니다.
- type 특성은 스트림의 필수 MIME 형식입니다. ".ism/manifest" 연결된 MIME 형식은 "application/vnd.ms-sstr+xml"
<source> 선택적<data-setup> 특성은 암호화 유형(AES 또는 PlayReady, Widevine 또는 FairPlay) 및 토큰을 포함하되 제한되지 않는 Azure Media Services의 스트림에 대한 고유한 배달 정책이 있는지 Azure Media Player에 알려줍니다.

HTML5 비디오와 동일하게 특성, 설정, 원본 및 트랙을 포함/제외합니다.

    <video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"], "nativeControlsForTouch": false}'>
        <source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
        <p class="amp-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
        </p>
    </video>

기본적으로 큰 재생 단추는 왼쪽 위 모서리에 있으므로 포스터의 흥미로운 부분을 가리지 않습니다. 큰 재생 단추를 가운데에 배치하려는 경우 <video> 요소에 추가 amp-big-play-centeredclass 추가할 수 있습니다.

동적으로 로드된 HTML에 대한 대체 설정

웹 페이지 또는 애플리케이션이 비디오 태그를 동적으로 로드하는 경우(ajax, appendChild 등) 페이지가 로드되면 존재하지 않을 수 있으므로 데이터 설정 특성에 의존하는 대신 플레이어를 수동으로 설정해야 합니다. 이렇게 하려면 먼저 태그에서 데이터 설정 특성을 제거하여 플레이어가 초기화될 때 혼동하지 않도록 합니다. 다음으로, Azure Media Player JavaScript가 로드된 후 비디오 태그가 DOM에 로드된 후 잠시 다음 JavaScript를 실행합니다.

    var myPlayer = amp('vid1', { /* Options */
            techOrder: ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"],
            "nativeControlsForTouch": false,
            autoplay: false,
            controls: true,
            width: "640",
            height: "400",
            poster: ""
        }, function() {
              console.log('Good to go!');
               // add an event listener
              this.addEventListener('ended', function() {
                console.log('Finished!');
            });
          }
    );
    myPlayer.src([{
        src: "http://samplescdn.origin.mediaservices.windows.net/e0e820ec-f6a2-4ea2-afe3-1eed4e06ab2c/AzureMediaServices_Overview.ism/manifest",
        type: "application/vnd.ms-sstr+xml"
    }]);

amp 함수의 첫 번째 인수는 비디오 태그의 ID입니다. 사용자 고유의 항목으로 바꾸세요.

두 번째 인수는 options 개체입니다. 이를 통해 데이터 설정 특성으로 할 수 있는 것과 같은 추가 옵션을 설정할 수 있습니다.

세 번째 인수는 '준비' 콜백입니다. Azure Media Player가 초기화되면 이 함수를 호출합니다. 준비 콜백에서 'this' 개체는 플레이어 인스턴스를 참조합니다.

요소 ID를 사용하는 대신 요소 자체에 대한 참조를 전달할 수도 있습니다.


    amp(document.getElementById('example_video_1'), {/*Options*/}, function() {
        //This is functionally the same as the previous example.
    });
    myPlayer.src([{ src: "//example/path/to/myVideo.ism/manifest", type: "application/vnd.ms-sstr+xml"]);

다음을 통해 공유

Azure Media Player 전체 설정

1단계: 페이지 헤드에 JavaScript 및 CSS 파일 포함

CDN 버전

2단계: 페이지에 HTML5 비디오 태그 추가

동적으로 로드된 HTML에 대한 대체 설정

추가 리소스