Supermap/Cesium 開發心得----本地視頻接入播放

在三維中，爲了增長現實感、給人一種帶入感，咱們會採起接入視頻的方式來實現，那麼如何接入視頻呢？

因爲沒有截至寫文章爲止，我沒有視頻流數據，因此只能採起本地視頻文件的方式來作。

本文介紹結束視頻的其中一種方法--------建立一個Entity實體做爲承載視頻的載體，將視頻做爲一種Entity的材質。

首先：在HTML中接入視頻

<video id="trailer" muted autoplay loop crossorigin controls>
    <source src="LV.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element. </video>

這段代碼中 muted標識讓視頻靜音播放，原本這個組件設置的屬性時靜音、自動播放且循環，可是實際上當我把視頻接入進來的時候卻不自動播放，因此須要手動給他播放。

可是想要播放視頻，不是全部的視頻都是能夠播放的，須要符合HTML5標準的視頻格式和編碼才能播放，我一開始也是MP4文件，可是卻不能播放，後來才知道是視頻編碼的問題，

MP4	MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
WebM	WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
Ogg	Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器

咱們須要轉換成這些規定的格式，使用格式工廠對視頻作轉碼操做

 

//視頻播放
var videoElement = document.getElementById('trailer'); videoElement.play(); //開始播放

第二步：造實體貼材質

我纔去造wall實體去貼，模仿街道的廣告牌

造wall實體：

 

    var videoElement = document.getElementById('trailer');
    videoElement.play(); //開始播放

    view.entities.add({
        wall: {
            positions:[
                Cesium.Cartesian3.fromDegrees(116.372834749242,39.8914878935825,8),
                Cesium.Cartesian3.fromDegrees(116.372460907789,39.8914878935825,8)], //這裏表徵實際上是牆的底部的頂點 
            minimumHeights:[20,20], //這裏表徵的實際上是牆的最高的地方，以這個爲例，可知，牆的底部是從位於8m高度的位置開始的，在高度爲20m的位置結束的一面牆  
            material : videoElement, 
        } 
    })

 

最後的效果