2015-05-22 37 views
0

我一直在關注Azure媒體服務,並且我已經能夠創建一個程序,將我的網站存儲中的視頻blob複製到我的媒體服務存儲帳戶,並從中創建資產/資產文件。然後我得到了自適應流媒體的編碼。是否有使用Azure媒體播放器的標準?

我遇到的問題是在播放。我想要使​​用Azure媒體播放器,因爲它在檢測環境和爲流式傳輸提供正確編碼的視頻方面表現出了巨大的承諾。

當我使用iframe方法(found here)它可以工作,但我覺得我失去了一些定製能力 - 它也在Mac上的Safari中破壞。

<iframe class="video-preview" src="//aka.ms/azuremediaplayeriframe?url=[MANIFEST URL HERE]&autoplay=false" name="azuremediaplayer" allowfullscreen></iframe> 

另一種方法(found here)利用所述<video>標籤中放置了報頭的CSS & JS文件一起。

頁眉代碼:

<link href="//amp.azure.net/libs/amp/1.1.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"> 
    <script src="//amp.azure.net/libs/amp/1.1.0/azuremediaplayer.min.js"></script> 
    <script> 
     amp.options.flashSS.swf = "//amp.azure.net/libs/amp/1.1.0/techs/StrobeMediaPlayback.2.0.swf" 
     amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/1.1.0/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf" 
     amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/1.1.0/techs/SmoothStreamingPlayer.xap" 
    </script> 

視頻代碼:

<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered video-preview" controls data-setup='{"nativeControlsForTouch": false}'> 
     <source src="[MANIFEST URL HERE]" 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> 

<data-setup>屬性應該激活<video>標籤,並把它變成一個Azure的媒體播放器,但沒有發生我。

所以,我的問題是:什麼方法是首選/標準?我知道這很難確定,因爲它還很年輕,並且一直在變化,但只是想看看其他人的經歷。

回答

2

demo website上的iframe方法目前是概念驗證(請參閱頁面上的警告「注意:此嵌入代碼僅用於演示目的,請勿在生產中使用」)。它的目的是作爲一種表明玩家可以在iframe中工作的方式。這將隨着時間的推移而擴展,但iframe的靈活性目前僅限於您想要設計參數的方式。

一般而言,您採用的方法取決於您試圖達到的目標(意義取決於您所需的靈活程度)。一般來說,目前推薦的方法是直接在頁面上使用JS和CSS方法。

現在,對於您遇到的問題,理解您所看到的內容將會很棒。

1.對於Mac上Safari上的iframe問題,您看到了什麼?我只是想在OS X Yosemite和Safari瀏覽器下,它似乎是工作的罰款

<iframe src="//aka.ms/azuremediaplayeriframe?url=%2F%2Famssamples.streaming.mediaservices.windows.net%2F91492735-c523-432b-ba01-faba6c2206a2%2FAzureMediaServicesPromo.ism%2Fmanifest&autoplay=false" name="azuremediaplayer" scrolling="no" frameborder="no" align="center" height="280px" width="500px" allowfullscreen></iframe> 

2.您可以查看在documentation提供的樣品?以下是samples的列表,具體而言,您應該查看基本的videotag sample。您需要確保將源添加到視頻標籤中才能使自動檢測工作。如果你還在

如果你仍然有問題,請聯繫[email protected]

+0

謝謝。主要問題是關於標準化方面的'iframe'和'video'標籤方法。我的同事沒有看到我看到的iframe問題,它在我們測試過的所有其他環境中都能正常工作。我想我需要替換'video'標籤的代碼,對吧? – Jason

+1

獲得了視頻標籤的工作。我遇到了問題,因爲我的播放器處於引導模式,沒有母版頁,js/css在我的母版頁上。謝謝! – Jason