Angular 2 Azure Media Services視頻播放

我無法使用Angular播放Azure Media Services視頻。我有一個簡單的HTML頁面的作品：Angular 2 Azure Media Services視頻播放

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <link href="//amp.azure.net/libs/amp/1.3.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"> 
    <script src="//amp.azure.net/libs/amp/1.3.0/azuremediaplayer.min.js"></script> 

</head> 
<body> 
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0"> 
     <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> 
</body> 
</html>

但是，當我完全一樣的視頻標籤添加到的角度成分，它僅僅是一個塊框不打我的視頻。

添加以下到我的index.html頁面：

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

我添加了視頻標籤到我的組件的HTML頁面：

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0"> 
     <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>

這是一個最簡單的設置，只有一個模塊和一個組件，並且頁面上沒有其他內容。我使用Angular的最新快速入門示例創建了該項目，所以我應該有最新的軟件包。我錯過了什麼？

來源

2017-01-24 bougiefever

您的獨立樣本不適用於我，而type =「application/vnd.ms-sstr + xml」'不是HTML5視頻的有效媒體類型 – Offbeatmammal

它當然是Azure Media Services媒體播放器的有效格式。查看Azure媒體播放器的快速入門：https://amp.azure.net/libs/amp/latest/docs/ – bougiefever

@Offbeatmammal至於獨立樣本無法正常工作，如果您只是將html保存爲文件並且嘗試加載它在瀏覽器中，它不起作用。但是，如果您使用Web服務器加載頁面，我使用Kestrel來完成，它現在加載得很好。 –

我找到了答案。我需要從微軟下載打字稿定義文件：https://amp.azure.net/libs/amp/latest/docs/

我把這個在我的分型的文件夾，並添加了參考路徑，以我的視頻模塊：

/// <reference path="../../typings/azuremediaplayer.d.ts" />

您仍然需要添加蔚藍的媒體播放器的lib文件到您的index.html：

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

我有一個非常簡單的組件，只顯示視頻。

的HTML：

<video 
    id="vid1" 
    class="azuremediaplayer amp-default-skin" 
    autoplay controls width="640" height="400" 
    poster="poster.jpg" > 
    <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>

分量代碼：

import { Component, ElementRef, OnInit } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'my-azure-media-player', 
    templateUrl: 'azure-media-player.component.html' 
}) 
export class AzureMediaPlayerComponent implements OnInit { 

    constructor(private elRef: ElementRef) {} 

    ngOnInit(): void { 

     var myPlayer = amp('vid1'); 
     console.log(myPlayer.currentTechName()); 
     myPlayer.autoplay(true); 
     myPlayer.controls(true); 
     myPlayer.src({ 
      type: "application/vnd.ms-sstr+xml", 
      src: "//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" 
     }); 

    } 
}

從這裏你可以設置播放。

來源

2017-01-30 19:34:42 bougiefever

Angular 2 Azure Media Services視頻播放

回答

相關問題