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, 
        } 
    })

 

最后的效果