在現今的Google Play 或是App Store中的App都有影音播放或是音樂播放的功能,也因此對於一個App的開發者而言,都會遇到要如何在程式中播放自己的影片,而我們就要來講這次的其中之一的主角Html5的<video>與<audio>,之後再來介紹Apache cordova的官網也有提供像是Media plugin來讓開發者進行影音的顯示也是另一種選擇唷!
首先大家可以知道其實就是透過一行簡單的程式碼
<video width="400" height="400" autoplay controls>
<source src="{{trustSrc(test.yourvideosrc )}}" >
</video>
開發者就能透過這行來進行控制,而且還可以透過其他的屬性來達到其他更進階的操作,以下舉出其中幾個簡單的介紹:
1. src:顧名思義就是讓開發者於此加入影片的來源目的,不過許多開發者不一定是想播放手機中的影片,也想播放外播連結的影片,會遇到無法播放路徑的問題。這時候可以透過$sce來處理外部的連結,如下面的範例:
$scope.trustSrc = function (src) {
return $sce.trustAsResourceUrl(src);
}
記得要先Inject $sce 然後透過這種方法來讓來源變成可信任的,如此一來就可以播放外面的路徑囉!
2. controls:透過這項屬性會提供開發者有播放、暫停、音量和快轉等功能,但是功能也會受到不同的平台與瀏覽器,而有不同的控制選項和支援。
3. Autoplay:程式能夠在執行此頁面時自動進行播放影音。
4. Width 和height:可自定義高度與寬度大小
上面就是在powercloud時應用到的影片播放,而html也有<audio>的Tag來支援音樂的播放,而使用的設定也與video類似,記得使用時請注意檔案格式的支援問題,有些格式是否支援就要再進行查詢。 那再來講解一下cordova官網所提供的Media播放的plugin,也是可以進行播放影音檔。下面簡單介紹步驟以及應用:
1.執行 Cordova plugin add Cordova-plugin-media來安裝套件
2.var media= new Media(src,success,fail)
3.官網有提到播放、暫停、下一首等等功能,透過上面宣告的media再給與他路徑後,並可使用所提供的Methodvu像是media.Play()、media.Stop()、 media.Pause()來進行功能的實作,例如:
var mymedia = new Media('localhost/local.mp3'
,function(success){
console.log('Your media start');
},
function(error){
console.log('media error');
}
)
mymedia.play();
4.注意的是它會有MediaStatus的callback,也因此開發者能透過這些狀態進行 更進階的功能實作等等。
5.Error message的部分,管網也有提到不同的code對應的錯誤,也是能讓開發者來 快速處理錯誤,並提供使用者看見錯誤的內容,使不是也很方便吧!
對於Media plugin來說,提供了他有很多的Method來給開發者使用,而且像是獲得執行的時間等等更可以再進階實做成進度條的顯示,也能達到根html video tag中控制選項的部分功能相同,但是在不同的平台上也是會有遇到檔案格式的支援性問題,所以在開發時也必須注意到這點,這樣大家對於影音的播放是否有點簡單的了解呢?兩種的影音播放皆能於cordova專案下執行,所以開發者能自行選擇來使用,其實在做這部分的功能最重要的還是影音的minetype格式支援問題,所以在執行上有些錯誤不仿先看看檔案格式,或是各平台的瀏覽器支援度,再來選擇自己想要的開發套件吧,希望大家都能夠在自己的Cordova專案播放想要的影片囉!!
參考來源:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-media/
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content